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
Latest comments (5)
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
Looks like normal as usual on my mobile browser. What kind of browser that support this CSS mode?
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)
Here is the browser support caniuse.com/#feat=prefers-color-sc...