I hope this doesn't surprise anyone out there, but people are opinionated. Honestly, when it comes to supporting light and dark device settings, I'm really opinionated. Supporting these interface themes are an excellent example of "meeting your users where they are". It shows that you respect their preferences. Maybe they are in a dark environment and do not want a bright screen, maybe a light theme is easier to discern given a user's sight limitations. Whatever the reasons, including this support should be part of your design system.

In order to show how easy it is to implement and (hopefully) better the web world, I'll take you through a how-to on what it takes to support this user-centric design concept.

What are interface themes?

A user's interface theme is a system-level setting typically triggered by enabling "Dark Mode".

While this setting is most obviously apparent in the UI of your device, it can also be a signal to websites to indicate your preferred mode.

How to integrate them in your design system

If you have an existing design system, it can be tricky to incorporate theme preferences, but not impossible, though you do need to make sure the design system (and team) is comfortable with allowing users to make their own design decisions.

Here are a couple items to consider:

• Your design system shouldn't include Dark and Light as brand themes, instead incorporate design expressions e.g. neutral, colorful, warning, etc. This will allow you to incorporate color variants within each. Your design team, if needed, will be able to configure a palette for each expression and theme (ex: neutral-light and neutral-dark).
• When you have a light expressive theme, but the user chooses Dark mode, the design system should invert the background and foreground colors. This works inverse, when a user chooses Light mode (though many design systems assume Light mode).
• When you have an expressive theme that is neither dark nor light (e.g. the grey area of the palette), when a user chooses Dark mode, the background color doesn't necessarily need adjusted, instead only the foreground colors may need alternated.
• As with any system that can adjust color, it is important that you maintain a proper, accessible contrast for all elements regardless of Dark or Light modes.

How to incorporate Dark and Light Modes in your CSS

As with many interface adjustments, switching modes leverages a media query:

@media (prefers-color-scheme: dark) {
  /* include dark-specific CSS here */
}

@media (prefers-color-scheme: light) {
  /* include light-specific CSS here */
}

Your media queries will work best when you leverage variables for your color palette. This will allow for overriding variables using higher specificity without needing to rebuild all the classes and rules within your CSS files.

:root {
  --text-color: #333;
  --background-color: #FFF;
}

.my-component {
  color: var(--text-color);
  background: var(--background-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #FFF;
    --background-color: #333;
  }
}

In Closing

Just to put it out there, I'm not a CSS wizard, so I'm showing a pretty easy example. However, I have fully built support for Dark and Light modes into this site and it was not a difficult exercise.

My hope is that every site starts implementing this capability from the beginning.