You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In a Bootstrap 4 app, I'm using Bootstrap like this:
$body-bg: var(--body-bg);
$body-color: var(--body-color);
// more variables set like this@import"../node_modules/bootstrap/scss/bootstrap";
This makes implementing a dark mode dead simple: My JS sets an attribute on the body according to the requested theme (based on in-app user settings and the OS theme), and some simple CSS applies proper colors:
body {
--body-bg: #FFF;
--body-color: #111;
// and so on
}
@mediascreen {
body[data-theme="dark"] {
--body-bg: #000;
--body-color: #EEE;
// and so on
}
}
This works great. Not all SCSS variables are customizable like this (notably, my popovers are always black-on-white) because some go into SCSS expressions like darken(), but most are – and I was expecting this to be the direction Bootstrap moves in as a whole, base on discussion in many issues like #26596.
Now, I'm struggling to upgrade to Bootstrap 5, because now, setting $body-bg: var(--body-bg); is no longer possible, as the body background color makes its way into _table-variants.scss where it's used in an opaque expression:
SassError: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
on line 150 of node_modules/bootstrap/scss/_functions.scss, in function `mix`
from line 150 of node_modules/bootstrap/scss/_functions.scss, in function `opaque`
from line 4 of node_modules/bootstrap/scss/mixins/_table-variants.scss, in mixin `table-variant`
from line 134 of node_modules/bootstrap/scss/_tables.scss
from line 22 of node_modules/bootstrap/scss/bootstrap.scss
from line 33 of src/bootstrap.scss
This is pretty bad – changing the $body-bg is one of the more important aspects of having a dark mode 😉
Is there a good way to circumvent this? (Or would that even be considered to be a Bootstrap bug – it's pretty reasonable to call this a regression, I think?) Is there another approach to implement CCS-based dynamic theming?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
In a Bootstrap 4 app, I'm using Bootstrap like this:
This makes implementing a dark mode dead simple: My JS sets an attribute on the
body
according to the requested theme (based on in-app user settings and the OS theme), and some simple CSS applies proper colors:This works great. Not all SCSS variables are customizable like this (notably, my popovers are always black-on-white) because some go into SCSS expressions like
darken()
, but most are – and I was expecting this to be the direction Bootstrap moves in as a whole, base on discussion in many issues like #26596.Now, I'm struggling to upgrade to Bootstrap 5, because now, setting
$body-bg: var(--body-bg);
is no longer possible, as the body background color makes its way into_table-variants.scss
where it's used in anopaque
expression:This is pretty bad – changing the
$body-bg
is one of the more important aspects of having a dark mode 😉Is there a good way to circumvent this? (Or would that even be considered to be a Bootstrap bug – it's pretty reasonable to call this a regression, I think?) Is there another approach to implement CCS-based dynamic theming?
Beta Was this translation helpful? Give feedback.
All reactions