Skip to content
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

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

Merged
merged 1 commit into from
Apr 14, 2021

Conversation

cpsievert
Copy link
Contributor

@cpsievert cpsievert commented Apr 9, 2021

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

Screen Shot 2021-04-09 at 11 36 08 AM

After this change, you'll get better default styling

Screen Shot 2021-04-09 at 11 36 54 AM

@cpsievert cpsievert requested a review from a team as a code owner April 9, 2021 16:38
@cpsievert cpsievert mentioned this pull request Apr 9, 2021
2 tasks
@mdo
Copy link
Member

mdo commented Apr 9, 2021

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
Copy link
Contributor Author

cpsievert commented Apr 9, 2021

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
Copy link
Contributor Author

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 mdo merged commit 2120a02 into twbs:main Apr 14, 2021
@mdo
Copy link
Member

mdo commented Apr 14, 2021

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
Copy link
Contributor Author

cpsievert commented Apr 14, 2021

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
Copy link
Member

ffoodd commented Apr 15, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants