Light and dark mode in just 14 lines of CSS

I wish to darkish mode all of the issues. However I additionally know heaps of people that want gentle mode! To respect private preferences and contemplate accessibility from the beginning, I add assist for native gentle and darkish mode as quickly as I start a brand new net undertaking.

This resolution makes use of no JavaScript, so we’re not constructing a light-weight and darkish mode toggle. As a substitute, it detects the consumer’s system settings with a CSS media question, and makes use of two customized CSS properties to find out a fundamental color scheme. Here is the way it’s carried out.



Declare 2 CSS customized properties

CSS customized properties are additionally known as CSS variables or cascading variables. You possibly can outline CSS customized properties anyplace in your CSS recordsdata, and so they observe the identical cascading and specificity patterns as different CSS guidelines. For instance, you’ll be able to outline CSS variables on the doc root, and override them in additional particular CSS courses. What’s nice is you may as well examine and debug declared CSS variables in browser dev instruments, which seem beneath the stylesheet guidelines.

CSS customized properties are declared by phrases prefixed with two dashes (–), and accessed utilizing the var() operate.

:root {
  --my-color-variable: #000000;
}

.factor {
  /* That is calculated as #000000! */
  colour: var(--my-color-variable);
}
Enter fullscreen mode

Exit fullscreen mode

You too can cross a second parameter into the var() operate, which acts as a fallback worth if the customized property would not exist whenever you attempt to use it.

.factor {
  colour: var(--my-new-color, #ff0000);
}
Enter fullscreen mode

Exit fullscreen mode

For this gentle/darkish mode resolution, outline two color variables on the doc root — one for the foreground color, and one for the background color. I have a tendency to decide on darkish mode by default, so I set the background color to black (--color-bg) and the foreground color to white (--color-fg).

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}
Enter fullscreen mode

Exit fullscreen mode



Use the prefers-color-scheme media question

Subsequent, we’ll hook into system settings utilizing the prefers-color-scheme CSS media question and flip the variable declarations for the background and foreground colors. The next code units the --color-bg to white and the --color-fg to black when a light-weight theme setting is detected.

@media (prefers-color-scheme: gentle) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}
Enter fullscreen mode

Exit fullscreen mode



Add physique kinds

Lastly, utilizing the CSS customized properties, set the background-color (for the web page color) and colour (for the textual content) on the HTML physique factor, which all baby parts will inherit if they don’t seem to be overwritten.

physique {
  background-color: var(--color-bg);
  colour: var(--color-fg);
}
Enter fullscreen mode

Exit fullscreen mode

And that is it — assist for native gentle and darkish mode preferences in simply 14 strains of CSS!



View the code on CodePen

Here is the full example on CodePen, which can show gentle or darkish mode relying in your system preferences. Toggle your system settings to observe the CodePen swap themes!

How do you implement darkish mode and lightweight mode? Let me know on Twitter.



Add a Comment

Your email address will not be published. Required fields are marked *