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

Add dark mode support #35857

Merged
merged 57 commits into from
Nov 29, 2022
Merged

Add dark mode support #35857

merged 57 commits into from
Nov 29, 2022

Conversation

mdo
Copy link
Member

@mdo mdo commented Feb 16, 2022

Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself. Here's a quick look at what's coming. Builds on #35736.

Live Preview

Light Dark
home-light home-dark
docs-light docs-dark

Toggling

Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage. Color modes are set via data attribute via data-theme (with light or dark options available currently). This allows us to theme the entire page, or specific components, like so.

component-dark

New Sass and CSS variables

In order to best implement color modes, I've spiked out a number of new Sass and CSS variables (e.g., --bs-secondary-bg and --bs-tertiary-bg). In addition, I've added new global CSS variables like --bs-border-color and more. So, in addition to general color modes and theming support, we get greater real-time customization, too.

This allows us to have more nuance coloring, and a more system-wide color scheme, than we currently support. Some inspiration of the new CSS variables comes from macOS and other design systems where there are global constants (e.g., using the same border-color or blue being the color for links, primary actions, etc).

new-colors

Todos and open questions:

  • Do we refer to these as themes or color modes?
  • Do we provide a color mode toggler JS plugin? (Would close Creating Dark Mode Button #35333)
  • Finish docs for color modes
  • Update all components to better utilize global CSS variables so they can be more easily themed (e.g., see $dropdown-* Sass variable changes in the diff).

@mdo mdo changed the title New masthead darkmode Add dark mode support Feb 16, 2022
@Kopyov
Copy link
Contributor

Kopyov commented Feb 18, 2022

@mdo consider also adding root CSS vars for $spacer as it would give a better control over margin/padding utility classes and prepare the code to re-use spacing CSS vars in all components. Something like this:

// root var
--#{$variable-prefix}spacer: #{$spacer};

// variables.scss
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: calc(var(--#{$variable-prefix}spacer) * .25),
  2: calc(var(--#{$variable-prefix}spacer) * .5),
  3: var(--#{$variable-prefix}spacer),
  4: calc(var(--#{$variable-prefix}spacer) * 1.5),
  5: calc(var(--#{$variable-prefix}spacer) * 3),
) !default;

// component vars in variables.scss
$card-spacer-y:                     var(--#{$variable-prefix}spacer) !default;
$card-spacer-x:                     var(--#{$variable-prefix}spacer) !default;
$card-title-spacer-y:             calc(var(--#{$variable-prefix}spacer) * .5) !default;

and convert all SASS calculations to calc(). This change will probably lead to other changes in a bunch of files, but would be definitely a good addition in one of future updates.

@mdo mdo force-pushed the new-masthead branch 5 times, most recently from 75e2cac to 4d1d58c Compare February 23, 2022 19:46
@mdo mdo mentioned this pull request Feb 23, 2022
2 tasks
@mdo
Copy link
Member Author

mdo commented Feb 24, 2022

Pushed a big update here that revamps the toggler to be a dropdown so we can accept light mode, dark mode, or automatic (based on system preference). My JS isn't the best, but it feels decent and works well lol. Would love some eyes on it.

Light Dark
home-light-v2 home-dark-v2
docs-light-v2 docs-dark-v2

And here's how the theme toggler looks in the navbar. Note that as you change the theme, the icon in the navbar updates accordingly to indicate what theme is active.

home-light-v2-picker

@mdo mdo force-pushed the new-masthead-darkmode branch 2 times, most recently from 2ab5a4f to 2ce19a3 Compare February 24, 2022 21:12
@mdo mdo marked this pull request as ready for review February 25, 2022 00:31
@mdo mdo requested review from a team as code owners February 25, 2022 00:31
@mdo mdo changed the base branch from new-masthead to main February 25, 2022 04:30
@mdo mdo force-pushed the new-masthead-darkmode branch 3 times, most recently from 85be61d to a3c6ffd Compare March 1, 2022 05:24
@mdo mdo mentioned this pull request Nov 28, 2022
81 tasks
Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It becomes very difficult to review it globally with all the comments and various topics mentioned by everyone so IMHO we got a first version that can be merged already.

@mdo tracked a part of all the discussions that happened in this PR in #37549. I'll complete it with my remaining feedback and double check we haven't forgotten any other feedback done by everyone. Thanks all for that 🙏

If we merge this PR, we could continue to tackle the different topics separately in dedicated PRs. And it'll allow us to manipulate on a daily-basis the light and dark mode while reviewing other PRs.

At some point, let's release an alpha version just to have first feedbacks regarding the color modes but also how the documentation allow the users to install this new color mode and also to evaluate the impact as a 5.3.0 (if there are no ultra breaking changes that should rather end up in a v6 rather than a v5.3.0).

⚠️ Before merging just double check and update the description with all the "Fixes" commands. Maybe all the issues couldn't be closed right away with this PR only

@mdo mdo merged commit fc3f4b6 into main Nov 29, 2022
@mdo mdo deleted the new-masthead-darkmode branch November 29, 2022 06:30
@mdo
Copy link
Member Author

mdo commented Nov 29, 2022

😮 We merged it!

I ended up removing the fix for the text underline CSS variable on links, but that could maybe come back. It was a little rougher to tackle than I expected, so waiting on a new fix there.

@tonimelisma
Copy link

Excellent! Thank you so much @mdo! Which release do you expect this to be in? Will it be in 5.3.0 or something earlier?

@mdo
Copy link
Member Author

mdo commented Nov 29, 2022

Excellent! Thank you so much @mdo! Which release do you expect this to be in? Will it be in 5.3.0 or something earlier?

It'll come in a v5.3.0-alpha1 release, 🔜

@kjoedion
Copy link

kjoedion commented Dec 2, 2022

thank you @mdo you're a rock star

@kjoedion
Copy link

kjoedion commented Dec 3, 2022

@mdo any idea when we can install this via something like npm i bootstrap@5.3.0-alpha1?

@burdittw
Copy link

burdittw commented Dec 5, 2022

Something is not right with the merge or modified code has been uploaded. In the _root.scss at line 135, it is trying to use some variables that not defined as in the --#{$prefix}body-color: #{$body-color-dark};. The ending section ends in #{$body-color-dark} and is not setup anywhere. This whole section starts with if $enable-dark-mode so I am guessing this was either some old code in main or the newer version from the new-masthead-darkmode did not get applied???

@julien-deramond
Copy link
Member

@burdittw $body-color-dark is defined in _variables-dark.scss (new file) which is imported in bootstrap.scss before _root.scss (see https://twbs-bootstrap.netlify.app/docs/5.2/customize/sass/#importing)

@mmm8955405
Copy link

release v5.3.0-alpha1

@septatrix
Copy link
Contributor

@mdo any idea when we can install this via something like npm i bootstrap@5.3.0-alpha1?

You can always install it using npm as a git repo (and hash)

@mmm8955405
Copy link

@mdo any idea when we can install this via something like npm i bootstrap@5.3.0-alpha1?

You can always install it using npm as a git repo (and hash)

Why not publish?

@twbs twbs locked and limited conversation to collaborators Dec 7, 2022
@mdo
Copy link
Member Author

mdo commented Dec 7, 2022

The next release will ship when it's ready :).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
No open projects
Status: Done