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 |
---|---|
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.
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).
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).
- Fixes #27514 (closed)
- Fixes #28424 (closed)
- Replaces #28449
- Fixes #28540 (closed)
- Fixes #28754 (closed)
- Fixes #29720 (closed)
- Fixes #31175 (closed)
- Fixes #33071 (closed)
- Fixes #33501 (closed)
- Fixes #34457 (closed)
- Fixes #37081 (closed)