Skip to content

v6 docs: various fixes#42600

Merged
mdo merged 1 commit into
twbs:v6-devfrom
coliff:dev/coliff/v6-docs-fix-updates
Jun 30, 2026
Merged

v6 docs: various fixes#42600
mdo merged 1 commit into
twbs:v6-devfrom
coliff:dev/coliff/v6-docs-fix-updates

Conversation

@coliff

@coliff coliff commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Description

Updates docs and examples to reflect recent changes in how Bootstrap handles dark mode and SVG usage. It clarifies the use of new Sass files for color modes, updates class names for color emphasis, and modernizes SVG handling in both Sass and Webpack guides.

Documentation updates for color modes and dark mode:

  • Updated references to dark mode implementation, specifying that Bootstrap now uses _root.scss and _theme.scss instead of _variables-dark.scss for global and theme color tokens. [1] [2] [3]

SVG usage and handling improvements:

  • Clarified that SVG icons are primarily used as mask-image (with a few remaining background-image cases) in both the Sass and Webpack documentation, and updated code examples to reflect this. [1] [2]

Component and style consistency:

  • Updated class names in the carousel component documentation from text-secondary-emphasis to fg-emphasis-secondary for consistency with the latest Bootstrap naming conventions.
  • Changed the 404 page’s heading from display-1 to fs-6xl for improved consistency with new font size utilities.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

### 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.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think because we use image masks for most of these now, this isn't as accurate?

@mdo mdo merged commit 7be9b68 into twbs:v6-dev Jun 30, 2026
12 checks passed
@coliff coliff deleted the dev/coliff/v6-docs-fix-updates branch July 1, 2026 00:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

3 participants