Warning Draft idea
This PR is a draft idea
/cc @mdo
This PR tries to tackle a part of the problem we currently have with the new complexity of customizing colors in Bootstrap coming with the color modes. This is also link to the complexity that we can see in https://github.com/twbs/bootstrap/pull/37737 (only for the dark mode) and to this answer: https://github.com/twbs/bootstrap/discussions/37838#discussioncomment-4631730.
On one hand we have for the light mode:
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text: #{$value};
}
On the other hande we have for the dark mode:
--#{$prefix}primary-text: #{$primary-text-dark};
--#{$prefix}secondary-text: #{$secondary-text-dark};
--#{$prefix}success-text: #{$success-text-dark};
--#{$prefix}info-text: #{$info-text-dark};
--#{$prefix}warning-text: #{$warning-text-dark};
--#{$prefix}danger-text: #{$danger-text-dark};
--#{$prefix}light-text: #{$light-text-dark};
--#{$prefix}dark-text: #{$dark-text-dark};
So this PR suggests to have an equivalent for the dark mode and so to have corresponding maps:
$theme-colors-text-dark
$theme-colors-bg-subtle-dark
$theme-colors-border-subtle-dark
TODO if this PR is useful:
-
Fix the issue with the unit tests -
Something to update in the docs?
IDK if it would be helpful or not but we could create a mixin to avoid copy-pasting this system; something like:
@mixin generate($map, $map-dark) {
@each $color, $value in $map {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@if $enable-dark-mode {
@each $color, $value in $map-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
}
}
@include generate($theme-colors-bg-subtle, $theme-colors-bg-subtle-dark);