With Bootstrap 5.3, installed via npm, I am attempting to extend the table color options through the Utility API like so..
The Utility example within my overriding .scss file...
$utilities: map-merge($utilities,
("background-color": (property: background-color,
class: table,
values: map-merge($theme-colors,
("blue": var(--bs-blue),
"green": var(--bs-green),
"corn": var(--bs-corn),
"rust": var(--bs-rust),
)),
),
));
But when I compile my scss and apply the above logic to the following table, no background color is being reflected...
<table class="table table-bordered table-rust">...</table>
How close am I to setting this up correctly?
After further research, the following has been helpful for me. I'm applying a SCSS @each loop on color names to help reference my custom CSS variables like so. The trick was knowing to use --bs-table-bg
instead of background-color
to properly set the colors.
/* https://getbootstrap.com/docs/5.3/customize/css-variables/ */
:root,
[data-bs-theme=light] {
--bs-corn: #ecb04a;
--bs-rust: #b25a3d;
...etc...
}
/* then loop through an array of names to associate css vars to --bs-table-bg: */
/* https://sass-lang.com/documentation/at-rules/control/each/ */
$colors:
"corn",
"rust";
@each $color in $colors {
.table-#{$color} {
--bs-table-bg: var(--bs-#{$color});
}
After compiling, I can now extend background colors onto my bootstrap tables like so.
<table class="table table-bordered table-rust">...</table>
And it shows the background color as expected!