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
This is a work in progress. I don't know enough about color theory to manipulate the -bs-primary-lighten-* and -bs-primary-darken-* in order to mimic what happens in Bootstrap when a color is tinted/shaded.
I started this based on finding the word "primary" in https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css. All other classes including the word "primary" would need to be reviewed but for the most part, they all seem to already utilize CSS variables. "light" and "dark" are outliers and likely could be excluded from this.
The goal is to create something that makes it easier to override the Bootstrap colors when not compiling from Sass. Obviously this implementation is using Sass, but it could be compiled and the raw CSS copied for a pure CSS implementation.
@mixincolor-variables($color, $value) {
$color-prefix: #{$prefix}#{$color};
:root {
// Attempting to reduce the minimum number of variables to override.// So far, only these 3 would absolutely need to be overridden--#{$color-prefix}: #{$value};
--#{$color-prefix}-contrast: #{color-contrast($value)};
--#{$color-prefix}-rgb: #{map-get($theme-colors-rgb, $color)};
// Lighten and Darken// Creates variables -bs-primary-lighten-5 through -bs-primary-lighten-95,// and -bs-primary-darken-5 through -bs-primary-darken-95.// More robust/readable than -bs-primary-100 through -bs-primary-900@for$ifrom1to20 {
$l: $i*0.05;
$suffix: $l*100;
--#{$color-prefix}-lighten-#{$suffix}: hwb(
fromvar(--#{$color-prefix}) hcalc(w/#{1-$l}) b
);
--#{$color-prefix}-darken-#{$suffix}: hwb(
fromvar(--#{$color-prefix}) hwcalc(b/#{1-$l})
);
}
// override existing root variables so they reference back to the minimal overrides--#{$color-prefix}-text-emphasis: var(--#{$color-prefix}-lighten-20);
--#{$color-prefix}-bg-subtle: var(--#{$color-prefix}-darken-40);
--#{$color-prefix}-border-subtle: var(--#{$color-prefix}-darken-20);
}
// override button styles.btn-#{$color} {
--bs-btn-color: var(--#{$color-prefix}-contrast);
--bs-btn-bg: var(--#{$color-prefix});
--bs-btn-border-color: var(--#{$color-prefix});
--bs-btn-hover-color: var(--#{$color-prefix}-contrast);
--bs-btn-hover-bg: var(--#{$color-prefix}-darken-10);
--bs-btn-hover-border-color: var(--#{$color-prefix}-darken-20);
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: var(--#{$color-prefix}-contrast);
--bs-btn-active-bg: var(--#{$color-prefix}-darken-20);
--bs-btn-active-border-color: var(--#{$color-prefix}-darken-25);
--bs-btn-active-shadow: inset03px5pxrgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--#{$color-prefix}-contrast);
--bs-btn-disabled-bg: var(--#{$color-prefix});
--bs-btn-disabled-border-color: var(--#{$color-prefix});
}
.btn-#{$color}-outline {
// ...
}
// override table styles.table-#{$color} {
// ...
}
}
@each$color, $valuein$theme-colors {
@includecolor-variables($color, $value);
}
Certain variables under the table styles would be overridden using the new -lighten-* variables. Since the background color of a table style is being lightened drastically, the font color could remain black and not have to be based off of the color pallete.
Some sensible dark mode defaults would be nice for each color. Or perhaps it would be up to the developer to simply do this:
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
Bootstrap
-
This is a work in progress. I don't know enough about color theory to manipulate the
-bs-primary-lighten-*and-bs-primary-darken-*in order to mimic what happens in Bootstrap when a color is tinted/shaded.I started this based on finding the word "primary" in https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css. All other classes including the word "primary" would need to be reviewed but for the most part, they all seem to already utilize CSS variables. "light" and "dark" are outliers and likely could be excluded from this.
The goal is to create something that makes it easier to override the Bootstrap colors when not compiling from Sass. Obviously this implementation is using Sass, but it could be compiled and the raw CSS copied for a pure CSS implementation.
Certain variables under the table styles would be overridden using the new
-lighten-*variables. Since the background color of a table style is being lightened drastically, the font color could remain black and not have to be based off of the color pallete.Some sensible dark mode defaults would be nice for each color. Or perhaps it would be up to the developer to simply do this:
Again I don't know enough about color theory to get too deep into color manipulation for dark mode.
Beta Was this translation helpful? Give feedback.
All reactions