<div class="carousel-item active">
<div class="d-flex flex-column justify-content-center bg-subtle-primary p-9 bg-1 rounded-5" style="min-height: 320px;">
<h3>Build anything</h3>
- <p class="text-secondary-emphasis mb-3">Compose slides from your own markup—text, buttons, cards, or media.</p>
+ <p class="fg-emphasis-secondary mb-3">Compose slides from your own markup—text, buttons, cards, or media.</p>
<div><a class="btn-solid theme-primary" href="#">Get started</a></div>
</div>
</div>
<div class="carousel-item">
<div class="d-flex flex-column justify-content-center text-center bg-subtle-success p-9 bg-2 rounded-5" style="min-height: 320px;">
<h3>Style it your way</h3>
- <p class="text-secondary-emphasis mb-3">Use utilities or custom CSS to size and theme each slide however you need.</p>
+ <p class="fg-emphasis-secondary mb-3">Use utilities or custom CSS to size and theme each slide however you need.</p>
<div><a class="btn-solid theme-success" href="#">Learn more</a></div>
</div>
</div>
<div class="carousel-item">
<div class="d-flex flex-column justify-content-center text-end bg-subtle-warning p-9 bg-3 rounded-5" style="min-height: 320px;">
<h3>Mix and match</h3>
- <p class="text-secondary-emphasis mb-3">Combine custom content with controls, indicators, and the overlay layout.</p>
+ <p class="fg-emphasis-secondary mb-3">Combine custom content with controls, indicators, and the overlay layout.</p>
<div><a class="btn-solid theme-inverse" href="#">Browse examples</a></div>
</div>
</div>
}
```
-- 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.
+- Dark mode overrides live in `_root.scss` (via the `color-mode()` mixin) and `_theme.scss`, which adjust global and theme color tokens. You don’t need these files for your own custom color modes, but they give Bootstrap a single place to reset colors for built-in dark mode.
## Usage
## Custom color modes
-While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap’s dark mode specific Sass variables, but that’s not required for you.
+While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. Bootstrap’s built-in dark mode uses `_root.scss` and `_theme.scss`, but you can follow the same pattern in your own stylesheet.
For example, you can create a “blue theme” with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.
### Sass variables
-CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
+CSS variables for our dark color mode are generated from Sass in `_root.scss` and `_theme.scss`, including overrides for components that embed SVG data URIs in CSS—primarily via `mask-image` (carousel controls, close buttons, and similar icons), with select dropdown arrows as a remaining `background-image` case.
{/* <ScssDocs name="sass-dark-mode-vars" file="scss/_config.scss" /> */}
$icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
// After escape-svg(), the <, >, and # characters are percent-encoded
-// so the data URI works reliably as a CSS background-image
+// so the data URI works reliably in CSS (e.g. as a mask-image or background-image)
.element {
- background-image: escape-svg($icon);
+ mask-image: escape-svg($icon);
}
```
### Extracting SVG files
-Bootstrap’s CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack’s asset modules feature.
+Bootstrap’s CSS includes multiple references to SVG files via inline `data:` URIs—mostly as `mask-image` icons (close buttons, carousel controls, and more), with a few remaining `background-image` cases such as select carets. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack’s asset modules feature.
Configure Webpack to extract inline SVG files like this:
title="404 - File not found"
>
<div class="text-center py-5">
- <h1 class="display-1">404</h1>
+ <h1 class="fs-6xl">404</h1>
<h2>File not found</h2>
</div>
</BaseLayout>
projects / thirdparty / bootstrap.git / commitdiff
