-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode: Tables #2349
Dark mode: Tables #2349
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
d7a5d92
to
78fb42c
Compare
03af5c3
to
f49a3ee
Compare
247f532
to
6965621
Compare
35328ca
to
f0b8a1e
Compare
6965621
to
2e31f74
Compare
@@ -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}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We'll see that at the end of the process of migrating everything, but these variables will probably end up in _tables.scss.
@@ -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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need to say something about it in the documentation, or move on to a real SVG?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's merge it as si even if we have a lot of questions, remarks.
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Description
#141414
or#000000
in dark mode..table-active
is the most important state or the:hover
state..bg-transparent
on it.Tables in dark mode, by using existing Sass vars :
$table-bg
var(--#{$prefix}body-bg)
transparent
$table-striped-bg
$table-striped-bg-factor
var(--#{$prefix}table-striped-bg-factor)
$table-striped-hover-color
$table-color
var(--#{$prefix}black)
$table-striped-hover-bg
$table-striped-hover-bg-factor
var(--#{$prefix}table-striped-hover-bg-factor)
$table-active-color
$table-color
var(--#{$prefix}black)
$table-active-bg
$table-active-bg-factor
var(--#{$prefix}table-active-bg-factor)
$table-hover-bg
$table-hover-bg-factor
var(--#{$prefix}table-hover-bg-factor)
--bs-table-striped-hover-bg-factor
$table-striped-hover-bg-factor
.855
--bs-table-striped-bg-factor
$table-hover-bg-factor
.135
--bs-table-hover-bg-factor
$table-hover-bg-factor
.135
--bs-table-active-bg-factor
$table-active-bg-factor
.565
Links