Skip to content
GitLab

Add dark mode support

Merged Mark Otto requested to merge new-masthead-darkmode into main

Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself. Here's a quick look at what's coming. Builds on #35736.

Live Preview

Light Dark
home-light home-dark
docs-light docs-dark

Toggling

Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage. Color modes are set via data attribute via data-theme (with light or dark options available currently). This allows us to theme the entire page, or specific components, like so.

component-dark

New Sass and CSS variables

In order to best implement color modes, I've spiked out a number of new Sass and CSS variables (e.g., --bs-secondary-bg and --bs-tertiary-bg). In addition, I've added new global CSS variables like --bs-border-color and more. So, in addition to general color modes and theming support, we get greater real-time customization, too.

This allows us to have more nuance coloring, and a more system-wide color scheme, than we currently support. Some inspiration of the new CSS variables comes from macOS and other design systems where there are global constants (e.g., using the same border-color or blue being the color for links, primary actions, etc).

new-colors

Todos and open questions:

  • Do we refer to these as themes or color modes?
  • Do we provide a color mode toggler JS plugin? (Would close #35333 (closed))
  • Finish docs for color modes
  • Update all components to better utilize global CSS variables so they can be more easily themed (e.g., see $dropdown-* Sass variable changes in the diff).