Description
This PR suggests to add a new section in our docs somewhere to explain how to add a new color in our theme colors which is not as easy as before after the new color modes.
Would love to have feedback/ideas from @twbs/css-review
Questions and TODO
-
Choose the right place to add this guide (would be better in Sass?) -
Better explain the content -
It doesn't work in dark mode because there's no dedicated map and so loop to affect the CSS vars. I haven't looked at it in details but I'd say we maybe need something like $theme-colors-dark*
maps as well + loops.
For light mode:
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
For dark mode:
--#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
--#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
--#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
--#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
--#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
--#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
--#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
--#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
Motivation & Context
IMO this change is required for our users to understand how to play with the theme colors.
Type of changes
- Enhancement
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 -
All new and existing tests passed
Live previews
Warning This PR includes a commit that will need to be removed before merging but that will help understand what's suggested
- https://deploy-preview-37737--twbs-bootstrap.netlify.app/docs/5.3/customize/color-modes/#add-colors-to-the-theme (new section)
- https://deploy-preview-37737--twbs-bootstrap.netlify.app/docs/5.3/examples/blog (example of rendering)
Related issues
Mentioned in #37549