From 015d729445bb6f34412a3047e350bce29464333f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 16 Feb 2022 14:55:43 -0800 Subject: [PATCH] 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). --- scss/_dropdown.scss | 3 + scss/_root.scss | 66 ++++++++++++- scss/_utilities.scss | 6 +- scss/_variables.scss | 47 ++++++--- site/assets/js/application.js | 25 +++++ site/assets/scss/_ads.scss | 6 +- site/assets/scss/_buttons.scss | 4 + site/assets/scss/_clipboard-js.scss | 4 +- site/assets/scss/_component-examples.scss | 4 +- site/assets/scss/_content.scss | 38 ++++++- site/assets/scss/_footer.scss | 4 +- site/assets/scss/_masthead.scss | 8 +- site/assets/scss/_navbar.scss | 34 +++++++ site/assets/scss/_sidebar.scss | 10 +- site/assets/scss/_syntax.scss | 22 ++++- site/assets/scss/_toc.scss | 2 +- site/assets/scss/_variables.scss | 7 ++ site/content/docs/5.1/components/dropdowns.md | 8 +- site/content/docs/5.1/customize/color.md | 99 +++++++++++++++++++ .../docs/5.1/customize/css-variables.md | 2 +- site/layouts/_default/baseof.html | 2 +- site/layouts/_default/single.html | 4 +- site/layouts/partials/docs-navbar.html | 15 +++ site/layouts/partials/docs-versions.html | 7 +- site/layouts/partials/favicons.html | 1 + site/layouts/partials/footer.html | 8 +- site/layouts/partials/home/masthead.html | 4 +- site/layouts/partials/icons.html | 7 ++ 28 files changed, 395 insertions(+), 52 deletions(-) diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index ef4eaafb0..63224a0db 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,3 +1,5 @@ +// stylelint-disable custom-property-empty-line-before + // The dropdown wrapper (`
`) .dropup, .dropend, @@ -171,6 +173,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For ` + +
+ +
+ + +
+{{< /example >}} + +## Custom color modes + +While the primary use case for color modes is light and dark mode, custom color modes can easily be added. Create your own `data-theme` selector with a custom value as the name of your color mode, then modify the CSS variables as needed. + +For example, you can create a blue theme with the selector `data-theme="blue"`. + +{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}} + +
+
Example blue theme
+

Some paragraph text to show how the blue theme might look with written copy.

+ +
+ +
+ + +
+
+ +```html +
+ ... +
+``` + +## New theme colors + +Added in v5.2.0 + +Bootstrap's color palette has continued to expand and become more nuanced in v5.2.0 with the addition of new `secondary` and `tertiary` colors. Our new colors are available through Sass and CSS variables (but not our color maps), with the express goal of making it easier to customize across multiple colors modes like light and dark. + +Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`. + +{{< callout warning>}} +**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color. +{{< /callout >}} + +{{< bs-table "table text-start table-swatches" >}} +| Description | Swatch | Variables | +| --- | --- | --- | +| **Body —** Default foreground (color) and background, including components. |
 
 
| `--bs-body-color`
`--bs-body-color-rgb`
`--bs-body-bg`
`--bs-body-bg-rgb` | +| **Secondary —** For disabled states, dividers, and lighter text. |
 
 
| `--bs-secondary-color`
`--bs-secondary-color-rgb`
`--bs-secondary-bg`
`--bs-secondary-bg-rgb` | +| **Tertiary —** For hovers, accents, wells, and text. |
 
 
| `--bs-tertiary-color`
`--bs-tertiary-color-rgb`
`--bs-tertiary-bg`
`--bs-tertiary-bg-rgb` | +| **Border —** For component borders, dividers, and rules. Blends with background colors thanks to `rgba()` values. |
Border color
| `--bs-border-color` | +| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. |
Primary
| `--bs-primary`
`--bs-primary-rgb` | +| **Success —** Theme color used for positive or succesful actions and information. |
Success
| `--bs-success`
`--bs-success-rgb` | +| **Danger —** Theme color used for errors and dangerous actions. |
Danger
| `--bs-danger`
`--bs-danger-rgb` | +| **Warning —** Theme color used for warning messages. |
Warning
| `--bs-warning`
`--bs-warning-rgb` | +| **Info —** Theme color used for neutral and informative content. |
Info
| `--bs-info`
`--bs-info-rgb` | +{{< /bs-table >}} + ## Theme colors We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file. diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md index 13142f6ad..5116df555 100644 --- a/site/content/docs/5.1/customize/css-variables.md +++ b/site/content/docs/5.1/customize/css-variables.md @@ -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); } diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html index fdf19b31f..608a6f857 100644 --- a/site/layouts/_default/baseof.html +++ b/site/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "header" . }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index ae1a41faa..dfe5695d4 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -7,11 +7,11 @@

{{ .Page.Params.Description | markdownify }}

{{ if eq .Title "Examples" }}
- + Download examples - + Download source code
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 441c2bd56..e13e074ec 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -84,6 +84,21 @@ {{ partial "docs-versions" . }} + +
+ +
+ +
+ + + Download +
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index dd234c387..238c7cb5c 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -8,7 +8,12 @@