CSS Dark Mode
You are advised to define all variables at root element. Because it can make the whole works easier to do. Here’re the vars I set:
:root {
--bg: #fff;
--textColor: #004050;
--borderColor: rgba(0,0,0,.15);
}Simply consider :root as <html> element with high priority.
If you want to use your pre-defined var in the CSS, you can:
body {
color: var(--bg);
}Thereafter, whenever you want to change your theme color, just simply edit the vars. All elements and pages that use these vars will be updated coordinately.
We have a light vars set now. The next is a dark vars set. You can choose your favorite colors used in dark theme (e.g. dark blue, dark gray, pure black, etc.). Here is an example:
:root {
--bg: rgb(30,30,34);
--textColor: rgb(150,150,154);
--borderColor: #2C2C3A;
}Dark Mode Trigger
Now we have both light and dark mode sets. What we left is making a trigger to switch between these modes automatically. To achieve this feature, we use a media query prefers-color-scheme method.
@media (prefers-color-scheme: dark) {
:root {
--bg: rgb(30,30,34);
--textColor: rgb(150,150,154);
--borderColor: #2C2C3A;
}
}Click here to learn more about prefers-color-scheme.
To see how the dark theme works, you may need a smartphone or PC which support dark mode. So far, we have successfully made our auto dark theme switcher.
Appendix · Determine Dark Mode by JS
If you need JS to determine whether the device is dark mode, you can make it like this:
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
//Dark Mode Code
}matchMedia method returns a MediaQueryList object. The object contains matches and media properties and addListener and removeListener methods.
addListener receives a MediaQueryList type parameter. Adding a listener to prefers-color-scheme to detect when the device switched between light and dark mode.
let listeners={
dark:(mediaQueryList )=>{
if(mediaQueryList.matches){
alert('Dark mode activated.')
}
},
light:(mediaQueryList)=>{
if(mediaQueryList.matches){
alert('Light mode activated.')
}
}
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)