How to Make Dark Mode for Websites Using Only CSSHow to make a dark mode toggle in CSS which allows website visitors to view an eye-friendly design depending on their own system settings.
Several methods exist for adding dark or light modes to a website. These often involve a piece of Javascript to toggle a class on the body, which then triggers some alternative styling. Cookies are also used to maintain dark mode across page views.
When designing this site, I wanted a dark mode that did not use Javascript or Cookies, so I decided to use CSS3 Media Queries to achieve this result. Using media query for dark mode, the decision to load light or dark colours depends on the user's device settings. This site will load in dark mode if the user has dark mode enabled on their mobile or tablet. If light mode is enabled, this site will load in light colours. The only downside is that users cannot toggle between modes, but for me, that is OK.
What is Dark Mode?
Normal mode (or light mode) shows dark text on a white background and historically comes from paper and ink. In recent years, however, dark mode has become a popular alternative where light text is presented on a dark background.
The idea behind dark mode is that it reduces the light emitted by device screens while maintaining the minimum colour contrast ratios required for readability. This is often seen as being better for your eyes by reducing eye strain, to reduce blue light exposure and depending on the screen type, it can help reduce battery usage.
CSS Only Dark Mode Media Query
CSS3 Media Queries are a conditional set of instructions that are used to alter or add new CSS rules based on system settings. They are most commonly used to display different layouts and typography depending on the screen size - this is responsive web design.
CSS3 also has a media query for prefers-color-scheme, which can be used when the user's colour scheme matches the specified value.
In my case, the design of my site is for light mode by default; all styles in the CSS reflect this. I then add a media query for prefers-color-scheme: dark, which changes the background and text colours accordingly.
Let's have a look at how that works in practice.
body {
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
} You can also reverse the logic, specifying dark mode by default and adding a media query for prefers-color-scheme: light.
That's it. There is no adding or toggling extra classes; there are just a few colour overrides in a media query. It persists across pages and does not use Javascript or Cookies.
How to Change Dark Mode
Changing dark mode depends on the device you are using.
On Windows, click on the Start Menu and type "dark mode" and select from the list, or right-click the desktop and select Personalization then Colours from the left-hand menu. From this screen, you can set the colour mode (light, dark or custom).
On Apple macOS, from the Apple menu, select System Preferences, click General, then choose one of the Appearance options at the top of the window.
Android and iOS have shortcut icons in the status bar/notification bar, which turn on dark mode.
