Darkly tweak #1811
Darkly tweak #1811
Conversation
SleeplessOne1917
requested review from
dessalines,
alectrocute and
jsit
as code owners
| .btn-outline-secondary { | ||
| color: $gray-500; | ||
| } |
There was a problem hiding this comment.
If there's a way to do this by setting an scss variable, let me know. That is preferable to needing to put this selector in every darkly scss file.
There was a problem hiding this comment.
I think there may be; one sec.
There was a problem hiding this comment.
This is, I think, a consequence of the way we're doing these theme colors, the concern I brought up here.
In litely, secondary is green -- the "primary" accent color. In darkly, secondary is a a very dark gray. So using the same class -- btn-outline-secondary -- results in unpredictably different outcomes. We're using secondary to mean different things in different themes.
I think maybe the best solution for now (other than revisiting the way we use secondary) would be to do this:
_variables.darkly.scss:
$secondary: $gray-600;It might also be worth considering adding the text-dark class to the non-active radio toggles so that the text has a higher contrast than the borders. This would make the litely ones have dark gray text instead of green text, however -- another way the inconsistent theme color naming would nail us.
There was a problem hiding this comment.
I'm also just noticing that having $input-border-color: $body-bg in darkly is kind of an odd choice:
| @@ -55,5 +56,3 @@ hr.my-3 { | |||
| display: none; | |||
| } | |||
| } | |||
|
|
|||
| @import "../../../../node_modules/bootstrap/scss/bootstrap"; | |||
There was a problem hiding this comment.
I think it's necessary that this come at the end, since $container-max-widths is being written here.
Also, I believe as of Bootstrap 5, $container-max-widths (and other maps) need to be spelled out in full; they're not longer merged with the defaults.
There was a problem hiding this comment.
I think it's necessary that this come at the end, since $container-max-widths is being written here.
If I put the bootstrap import at the end, wouldn't that override the variables set higher up in the file?
There was a problem hiding this comment.
No, Bootstrap uses the Sass !default flag so as not to overwrite any variables you've set.
There was a problem hiding this comment.
No, Bootstrap uses Sass's !default flag so as not to overwrite any vars you may have set yourself
* Make outline buttons have better contrast in dark themes * Change secondary color for darkly themes * Put compact styles back to how they were before * Forgot to build themes
Description
Make outline buttons have more contrast in darkly themes
Screenshots
Before
After