Do you use dark themes or dark mode in your text editor? You can offer website visitors a choice of dark or light modes. Some people prefer using the dark mode because it is easier on their eyes.
What do you need to create a dark mode?
The only tools you need are HTML, CSS and JavaScript. You can use a button to allow your visitors to select between modes or use media queries that check their operating system for their preference.
Toggle example
Ananay Negoi uses CSS Variables and a button to toggle between light and dark mode. She demonstrates how to build the Dark-Light mode switch.
Level 5 Media Query
Level 5 Media Query checks your operating system for your preference for a light or dark mode. You can use this query to automatically set the mode for each visitor.
Designing for dark mode
When you create a dark mode for your website, it involves more than switching the colors to darker ones. You need to consider how color, fonts, images affect the readability and usability of your website. Your website reflects your brand. You want to think about how a dark mode can affect your brand. Andy Clarke walks you through the steps he took when he created a dark mode version of his website.
Dark Mode Resources
If you want to implement a dark mode design of your website, refer to these resources on how to do it.