Closed bkilinc closed 2 years ago
@bkilinc You have to use the Utilities API and add your custom colors.
https://getbootstrap.com/docs/5.1/utilities/background/#utilities-api https://getbootstrap.com/docs/5.1/utilities/api/#using-the-api
Existing Utilities: https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
CODE
// Import utilities first
@import "~bootstrap/scss/utilities";
// After utilites, use map-merge to add your custom colors
// Background Colors
$utilities: map-merge(
$utilities,
(
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1,
),
values:
map-merge(
// Your custom colors
$custom-colors,
map-merge(
$utilities-bg-colors,
(
"transparent": transparent,
)
)
),
),
)
);
// Text Colors
$utilities: map-merge(
$utilities,
(
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1,
),
values:
map-merge(
// Your custom colors
$custom-colors,
map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, 0.5),
"white-50": rgba($white, 0.5),
"reset": inherit,
)
)
),
),
)
);
so $theme-colors affect some components and it may not affect some other components. May be this should be documented in variables file.
The maps that are used for these are built in _variables.scss
, but you can rebuild them.
Instead of just
$theme-colors: map-merge($theme-colors, $custom-colors);
do
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text: map-merge($utilities-text, $utilities-colors);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
$utilities-bg: map-merge($utilities-bg, $utilities-colors);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
This works. But, it isn't beautiful.
Duplicate of #34756. #34942 will be shipped in v5.2.0 to address it.
I solved the problem. Related information exists in [ helpers/color-bg.scss ]. I worked with the following sources.*
------------------------add-source---------------------------------------
$theme-colors: map-merge($theme-colors, $custom-theme-colors); $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); $utilities-text: map-merge($utilities-text, $utilities-colors); $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text"); $utilities-bg: map-merge($utilities-bg, $utilities-colors); $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
@each $color, $value in $theme-colors { $color-rgb: to-rgb($value); .text-bg-#{$color} { color: color-contrast($value) !important; background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) !important; } } @each $color, $value in $theme-colors { $color-rgb: to-rgb($value); .link-#{$color} { color: color-contrast($value) !important; } }
Prerequisites
Describe the issue
I added custom colors to $theme-colors map, btn-, link- colors are generated perfectly but text- and bg- colors are not generated. I guess it should behave same.
my custom.scss file is as follows.
as a result ;
Reduced test cases
include file at top;
bg-primary-light, text-primary-light should be generated
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.1.3