[table `active` variant](/docs/reference/color-variants#table-variants) which takes precedence over

any specific row or cell variants.

For accessibility reasons (specifically for color blind users, or users with color contrast issues),

it is highly recommended to always provide some other visual means of conveying that a row is

selected, such as shown in the example below.

// Re-declare `table-active` class here so that it can take

// precedence over row variants when used on selectable rows

// Class can only be applied to rows and not individual cells

> tbody > .table-active {

&,

> th,

> td {

background-color: $table-active-bg;

}

}

// Add special hover styling for `table-active` row variant

&.table-hover > tbody > tr.table-active:hover {

td,

th {

color: $table-hover-color;

// `$table-hover-bg` default is a very transparent black

// We overlay it over the background color to achieve the

// same color effect while keeping the background solid

background-image: linear-gradient($table-hover-bg, $table-hover-bg);

background-repeat: no-repeat;

}

}

// Important is needed to override the standard `bg-variants`

// as the also use `!important`

background-color: $table-dark-active-bg !important;

}

}

// Add special hover styling for `bg-active` row variant (dark tables)

&.table-hover.table-dark > tbody > tr.bg-active:hover {

td,

th {

color: $table-dark-hover-color;

// `$table-dark-hover-bg` default is a very transparent white

// We overlay it over the background color to achieve the

// same color effect while keeping the background solid

background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);

background-repeat: no-repeat;