2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

Add dark mode support

Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself.

- Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage.
- Color modes can also be set via data attribute thanks to `data-theme` (with light or dark options available currently).
- Docs are heavily WIP for demonstrating the dark mode.
- 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.

Todos and open questions:

- [ ] Do we refer to these as themes or color modes?
- [ ] Do we provide a color mode toggler JS plugin?
- [ ] 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).
This commit is contained in:
Mark Otto
2022-02-16 14:55:43 -08:00
parent 1821f699b1
commit 015d729445
28 changed files with 395 additions and 52 deletions
@@ -46,7 +46,7 @@ Customize the prefix via the `$prefix` Sass variable. By default, it's set to `b
CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
```css
```scss
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}