rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Remove nesting color modes docs section (#38192)

Browse Source 
* Update docs for nesting color modes to better communicate issues with nesting light in dark

* Remove nesting entirely actually, it's impossible to properly show an example when in dark mode
This commit is contained in:
Mark Otto 2023-03-07 21:53:31 -08:00 committed by GitHub
parent 3cec38c368
commit a3f8480d5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
site/content/docs/5.3/customize/color-modes.md
View File

@ -62,73 +62,6 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
## Nesting color modes
Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode.
For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`.
{{< example class="p-0" >}}
<div data-bs-theme="dark" class="p-3 text-body bg-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item active" aria-current="page">Dark</li>
</ol>
</nav>
<p>This should be shown in a <strong>dark</strong> theme at all times.</p>
<div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="dropdown mb-4">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div data-bs-theme="light" class="p-3 text-body bg-body rounded">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item"><a href="#">Dark</a></li>
<li class="breadcrumb-item active" aria-current="page">Light</li>
</ol>
</nav>
<p>This should be shown in a <strong>light</strong> theme at all times.</p>
<div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
Light dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
{{< /example >}}
## Usage
### Enable dark mode