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)