Skip to content

Commit

Permalink
Dark mode: Tables (#2349)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julien Déramond <[email protected]>
  • Loading branch information
@louismaximepiton @julien-deramond
louismaximepiton and julien-deramond committed Dec 18, 2023
1 parent 49cbf4d commit f791a57
Show file tree
Hide file tree
Showing 4 changed files with 396 additions and 9 deletions.
8 changes: 8 additions & 0 deletions scss/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,10 @@
--#{$prefix}icon-filter: none;
--#{$prefix}select-indicator: #{$form-select-indicator};
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
--#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
--#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
--#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
--#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
// ******* End additions for dark-mode
}

Expand Down Expand Up @@ -238,6 +242,10 @@
--#{$prefix}icon-filter: #{$invert-filter};
--#{$prefix}select-indicator: #{$form-select-indicator-dark};
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
--#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
--#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
--#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
--#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
// ******* End additions for dark-mode
// scss-docs-end root-dark-mode-vars
}
Expand Down
12 changes: 6 additions & 6 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -888,21 +888,21 @@ $table-th-font-weight: null !default;

$table-striped-color: $table-color !default;
$table-striped-bg-factor: .065 !default; // Boosted mod
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-striped-hover-color: $table-color !default; // Boosted mod
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
$table-striped-hover-color: var(--#{$prefix}black) !default; // Boosted mod
$table-striped-hover-bg-factor: .4 !default; // Boosted mod
$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod
$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
$table-variant-striped-bg-factor: .2 !default; // Boosted mod
$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod

$table-active-color: $table-color !default;
$table-active-color: var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
$table-active-bg-factor: .135 !default; // Boosted mod
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
$table-variant-active-bg-factor: .6 !default; // Boosted mod

$table-hover-color: $table-color !default;
$table-hover-bg-factor: .065 !default; // Boosted mod
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor)`
$table-variant-hover-bg-factor: .2 !default; // Boosted mod

$table-border-factor: .4 !default; // Boosted mod
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/5.3/content/tables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
</div>
</td>
<td>
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
Cell text
</td>
<td>Cell text</td>
Expand Down Expand Up @@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
</div>
</td>
<td>
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
Cell text
</td>
<td>Cell text</td>
Expand Down Expand Up @@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
<table class="table table-sm table-hover align-middle has-checkbox">
...
<td>
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
Cell text
</td>
...
Expand Down
Loading

0 comments on commit f791a57

Please sign in to comment.