mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +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:
@@ -1,3 +1,5 @@
|
||||
// stylelint-disable custom-property-empty-line-before
|
||||
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropend,
|
||||
@@ -171,6 +173,7 @@
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
border-radius: var(--#{$variable-prefix}dropdown-item-border-radius, 0); // stylelint-disable-line property-disallowed-list
|
||||
|
||||
// Prevent dropdown overflow if there's no padding
|
||||
// See https://github.com/twbs/bootstrap/pull/27703
|
||||
|
||||
Reference in New Issue
Block a user