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

Add dark mode support

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
site/layouts/_default/single.html
+2 -2
View File
@@ -7,11 +7,11 @@
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ if eq .Title "Examples" }}
<div class="d-flex flex-column flex-md-row gap-3">
<a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
<a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary btn-bd-lg d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
Download examples
</a>
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary btn-bd-lg" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
Download source code
</a>
</div>