Have $form-check-input-border's default derive from $black

[cpsievert]

Before this change, if you implement a dark mode theme using $grays, checks and radios aren't very visible:

After this change, you'll get better default styling

[mdo]

Is this because you’ve customized the $black value? Feel like this shouldn’t have a visible difference, but I might be missing something. 🤔

[cpsievert]

Yea, those screenshots are the result of setting these variable defaults

$primary: #FF0000 !default;
$white: #000000 !default;
$gray-100: #1A1A1A !default;
$gray-200: #333333 !default;
$gray-300: #4C4C4C !default;
$gray-400: #666666 !default;
$gray-500: #808080 !default;
$gray-600: #999999 !default;
$gray-700: #B2B2B2 !default;
$gray-800: #CCCCCC !default;
$gray-900: #E6E6E6 !default;
$black: #FFFFFF !default;

[cpsievert]

Feel like this shouldn’t have a visible difference, but I might be missing something.

There won't be any difference in the default CSS, but there is an important and noticeable different if you've implemented a dark mode with $black, $white, $gray-* (which I seems to be the recommended way to implement a dark theme?)

[mdo]

Thanks for the fix! I wonder if you wouldn't mind posting some more info about how you're generating and using the dark theme? Could be a nice guide to add to our docs.

[cpsievert]

Thanks @mdo! I've actually been working on an R interface to Bootstrap called {bslib} which makes custom theming easier for Shiny and R Markdown. We (at RStudio) want to make customization of main fonts and colors as easy as possible for our users, so we've provided an interface like:

bslib::bs_theme(bg = "black", fg = "white")

And this, underneath the hood, sets the following variables defaults (via interpolation in CIELAB colour space from bg to fg):

$white: #000000 !default;
$gray-100: #1A1A1A !default;
$gray-200: #333333 !default;
$gray-300: #4C4C4C !default;
$gray-400: #666666 !default;
$gray-500: #808080 !default;
$gray-600: #999999 !default;
$gray-700: #B2B2B2 !default;
$gray-800: #CCCCCC !default;
$gray-900: #E6E6E6 !default;
$black: #FFFFFF !default;

We've also provided a "real-time theming widget" which enables interactive modification of these and other "main" theming options, for example https://testing-apps.shinyapps.io/themer-demo/

Generally I've found that implementing dark mode themes this way (by just setting $black, $white, and $gray-*) works fairly well for our use cases. The bigger issues I've come across fall more the category of foreground colors not contrasting intelligently by default against configurable (accent) background colors. For example, here is a patch I've made to BS4 to make sure things like $component-active-color provide a sensible contrast to $component-active-bg. Let me know if you be interested in taking more of these "smart contrasting by default" changes for BS5 and/or BS4.

And, by the way, I've also made other additions that reduce the need for users to work with utility classes like .text-white or .navbar-dark by adding contrasts to bg utility classes as well as a $navbar-bg Sass variable (adding classes aren't always straightforward in our world)

[ffoodd]

Really like how you're using our contrast function—even used the same trick for background utilities in Boosted (a branded fork of Bootstrap).

Reversing the gray scale is a pretty nice idea, this might be documented indeed.