Dark mode toggle button has become a norm in web development now. But we can automatically enable dark mode based on system settings using pure CSS. (No more toggle buttons)
It's as easy as adding a media query to your CSS. This is how I added automatic dark mode in my app Hoy (hoy.sh). I use variables in my app so it became much more easy to enable it.
My CSS before adding dark mode:
:root {
--background-color: #f7f6ee;
--secondary-color: #fbfefb;
--text-dark: #101010;
--text: #333333;
--text-light: #7b7b85;
--text-lighter: #ababab;
--blue: #3498db;
--green: #27ae60;
--yellow: #feca57;
--red: #c0392b;
--white: #ffffff;
}
/* Sample css for an element */
body {
background: var(--background-color);
color: var(--text);
}
Media queries allow us to add CSS based on the system's colour preference using prefers-color-scheme
. For detailed documentation refer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme.
So in order to enable dark mode based on the system settings, all I had to do is to add the below code in my CSS.
@media (prefers-color-scheme: dark) {
:root {
--background-color: #1e1f23;
--secondary-color: #232428;
--text-dark: #efefef;
--text: #c4c5c9;
--text-light: #6c6d71;
--text-lighter: #8e8f93;
}
}
Check out the automatic dark mode in my app at https://hoy.sh
Top comments (5)
Looks like normal as usual on my mobile browser. What kind of browser that support this CSS mode?
Here is the browser support caniuse.com/#feat=prefers-color-sc...
It's usually an OS setting you should turn on (e.g. chrome on Windows will activate prefers-color-scheme: dark if you have dark theme turned on in your Windows settings)
It works BUT how to add toggling button?
*if it is in dark mode, toggle in light & vice versa?
you can just make class and after that with js add some toggle event listener on button
you can make it with css with toggle:checked and after that make the root color changes