Light vs Dark Mode Debate, prefers-color-scheme Will Answer
Light or dark mode? Which to make your site default?
With a simple css media query, prefers-color-scheme, you can read the minds of users (well their operating system preferences).
Light and dark mode has become a widely adopted appearance setting found in most operating systems today. Users have already taken the time to set their OS preferences, so don’t make them have to click around to change the theme of your app/site.
With prefers-color-scheme you can control more than just color, but for the purpose of this conversation, we will demo changing the root CSS variable of the background color.
:root {
--background-color: #ffffff; /* white background */
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #ffffff; /* white background */
}
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #000000; /* black background */
}
}The :root is our default background color in case prefers-color-scheme isn’t supported. Since the default root is the same as the light mode, we can simplify the code by removing the prefers-color-scheme: light.
:root {
--background-color: #ffffff; /* white background */
}@media (prefers-color-scheme: dark) {
:root {
--background-color: #000000; /* black background */
}
}
If the user’s appearance setting is dark mode, then we will change the background to black, otherwise it will remain white.
Testing
To test, you will need to go into your OS settings and change your appearance. While toggling between the two options, you should see your site/app changing as well.
Mac: System Preferences > General > Appearance
Windows: Settings > Personalization > Colors
CSS Only Demo: CodePen
Why We Use prefers-color-scheme
At GumGum, we conducted a UX/UI internal survey, finding that users are split almost 50/50 for preference to using light or dark mode. For some people, it is just a personal preference that they enjoy, and for others, it is due to accessibility. Despite the users’ reasoning, there is a demand for this feature, and we give the user some power to control their experience.
We are currently working on making this available on our internal applications. It’s been something we’ve wanted to do for a while, but finding this new CSS feature has made it much easier to implement.
Support
Since the prefers-color-scheme media query has been out for a couple of years now, it works with most updated browsers. It’s always recommended that you have a fallback mode (default), and review the browser version support of using this query.
Can I Use is a great site for checking this info: https://caniuse.com/?search=prefers-color-scheme
Advanced
This demo is using pure CSS, but with a little JavaScript, multiple themes can be supported beyond system color preferences. Typically how I like to handle a full page theme is applying a custom data attribute at the highest level (HTML element). If the custom data attribute doesn’t match any options, then it will default to light mode.
Specificity plays an important role here since there is no OR logic in CSS. To avoid confusion between CSS and JS on checking user themes, we will control all of the theme from JS.
In the demo below, we have a select input that takes precedence over the system settings. We are watching for a change in system color settings with window.matchMedia, and if the input is set to system, then it will change, otherwise it will stay with the selected value.
JS Demo: CodePen
Summary
It’s been a couple of years since prefer-color-scheme became available and by now it has good support. The CSS community over the last few years has begun to introduce new features that previously required JS, and we look forward to taking advantage of them in our GumGum Design System.
Prefer-color-scheme is a great CSS opportunity to enhance UX and UI of any website or web application.
