bootstrap-5utilities

Extending Table background colors via Utility API in Bootstrap 5


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?


Solution

  • 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!