Dark mode

I have a minor visual impairment and bright white backgrounds make it more difficult for me to read text. It is also hard on the eyes to read the lesson steps on the bright white, left-hand side of the screen, then look over to the dark code editor in the middle. I’m glad the code editor is in dark mode, but going back and forth several times starts to give you a headache.
What would be nice is a way to toggle the lesson text to dark mode.

Thank you for such a great code learning site. I will definitely be a long term customer.

Thanks for your input!

For now, a workaround is to use a chrome extension like this one to force the site into dark mode:

Hope it helps!

8 Likes

Thanks for that recommendation.
I’m having a lot of fun learning here. I just don’t like the eye-strain headaches most nights.

Cheers!

Wow!
That extension really does the trick. If there is a black object on the screen, it might get hidden. But, it works great.
I was using an extension “reader mode” and it works a lot like iOS ‘reader view’ and actually restructures the page to simplify it and adjusts the text to a heavier weight. But, while that is great for reading articles, it screws up the Codecademy website trying to make it all one frame. It becomes useless on that type of website.
So, I thank you again. You’ve saved me from a lot of pain!

2 Likes

So happy to hear! And that extension is open source so I believe you can reach out to devs in the GitHub repository and let them know if the extension is breaking the codecademy website too much to be useful!

1 Like

Is there a roadmap for dark mode already for the site? Better to have it built in as a feature rather than be dependent on an external chrome extension. :pray:

This is an amazing recommendation, Thank You!

Was just slogging through one of their lessons on accessibility, (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-making-a-website-accessible/modules/wdcp-22-learn-web-accessibility/lessons/accessible-design/exercises/accessibility-color-accessibility) ,

and they had the cheek to say :

“For instance, using the combination of black (#00000) as a foreground color and white (#ffffff) as a background color provides maximum contrast.
While this is a fairly common color combination for text on a page, the high contrast can also cause glare that will increase strain on the user’s eyes over time.”

Can’t lie, this website has been causing me a lot a pain and headache and reading this had me lose my temper quite a bit. “If you can’t do, teach” is what i’m taking away from this lesson from codecademy.

I really appreciate you sharing this link because i genuinely wasn’t aware there was any plugins that could “dark mode” part of a screen.

1 Like

Thank you this is a very useful extension