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.

Sign up for GitHub

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

Jump to bottom

Should the color mode expose a variable or event that can be used by third-party components? #39266

Open
2 tasks done
Tracked by #2223
ZhangChengLin opened this issue Oct 3, 2023 · 3 comments
Open
2 tasks done
Tracked by #2223

Should the color mode expose a variable or event that can be used by third-party components? #39266

ZhangChengLin opened this issue Oct 3, 2023 · 3 comments
Labels
color mode feature

Comments

@ZhangChengLin
Copy link
Contributor

Prerequisites

Proposal

Should a parameter of the current color mode value be exposed for use by other components?

And whether there should be an active event that can be monitored when the color mode of the page changes.

Motivation and context

For example, when using other components on the page, third-party components also support bright mode and other mode switching, and can be modified synchronously with the bootstrap color mode status. Should bootstrap provide convenience for this?
@julien-deramond
Copy link
Member

Should a parameter of the current color mode value be exposed for use by other components?

Are you talking about the color mode value used for the whole page? Because the color mode can be used contextually within the page too.

And whether there should be an active event that can be monitored when the color mode of the page changes.

Our color-modes.js is not embedded in the Bootstrap JS file. Whenever the color mode changes for the whole page, I'd say one could add an event in this code to modify synchronously third-party components for instance, or to trigger anything.

Do you have some technical suggestions based on what already exists in Bootstrap?

@ZhangChengLin
Copy link
Contributor Author

Are you talking about the color mode value used for the whole page? Because the color mode can be used contextually within the page too.

Yes, I mean that when the color mode of the entire page level is modified by the user through buttons, can know that the color mode of the page has been adjusted through event monitoring without refreshing the page.

I understand that color mode can change the color mode locally in the page, but I currently don't know the relevant scenarios where it is needed.

Our color-modes.js is not embedded in the Bootstrap JS file. Whenever the color mode changes for the whole page, I'd say one could add an event in this code to modify synchronously third-party components for instance, or to trigger anything.

Yes, that's fine if there is.

Do you have some technical suggestions based on what already exists in Bootstrap?

There is not

@julien-deramond julien-deramond mentioned this issue Oct 4, 2023
Merged
@2dareis2do
Copy link

2dareis2do commented Oct 6, 2023 •
edited
Loading

You can use css variables for this. e.g. in your css you have something like this:

:root, [data-bs-theme=light]{

--bs-blue: #0d6efd;
...

}

We can see that $blue is defined as a scss variable

$blue: #0d6efd !default;

Then again is scss we have somehting like

[data-bs-theme="blue"] {
...
  --bs-body-bg: var(--bs-blue);

But these do not appear to be used or fully supported in bootsrap when switching from say light to dark mode. What we do have though are examples where it does. e.g. --bs-body-color

:root, [data-bs-theme=light] {
--bs-body-color: #212529;
...

}

also

@media (prefers-color-scheme:dark)
:root {
color-scheme: dark;
--bs-body-color: #dee2e6;

so here you can access like element: var(--bs-blue)

Interesting the only references to the --bs-body-color variable I can find are

<body style="--bs-body-color: #333;">

and



// scss-docs-start custom-color-mode
--
[data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);

Whats interesting about this is assigning or overriding one css variable with another in the scss>

Ok after a bit more investigation I can see it is being set in _reboot.scss like so:


body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

and then for dark mode we could do

  @media (prefers-color-scheme: dark) {
    --bs-body-color: var(--bs-white);
  }

Also you can change this value in a differrent context.

I think one issue with colours in bootstrap is they use a combination of css and scss variables. Maybe this will be rationalised in boostrap 6. Is there a version of boostrap 6 available yet?

@julien-deramond julien-deramond moved this to Todo in v5.4.0 Nov 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color mode feature
Projects
v5.4.0
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
3 participants
@2dareis2do @julien-deramond @ZhangChengLin