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

Display Issue with form-switch in "light" theme after switching from "dark" theme #39384

Open
3 tasks done
maikycourse opened this issue Nov 9, 2023 · 1 comment
Open
3 tasks done

Display Issue with form-switch in "light" theme after switching from "dark" theme #39384

maikycourse opened this issue Nov 9, 2023 · 1 comment
Labels
color mode confirmed css v5

Comments

@maikycourse
Copy link

maikycourse commented Nov 9, 2023 •
edited
Loading

Prerequisites

Describe the issue

I've encountered an issue when using the form-switch component in Bootstrap. When changing from the "dark" theme to the "light" theme, switches do not display correctly if they were previously used within the "dark" theme. This particularly happens when the switches are unchecked in the "light" theme.

Steps to Reproduce the Problem:

  1. Set the overall page theme to "dark" (<body data-bs-theme="dark">).
  2. Use the form-switch component within a container that has a different specific theme, for example: <div data-bs-theme="light">.
  3. Check the appearance of the unchecked switches.

Reduced test cases

<body data-bs-theme="dark">
    <div data-bs-theme="light">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
            <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
        </div>
    </div>
</body>

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.2
@github-project-automation github-project-automation bot moved this to To do in v5.3.3 Nov 9, 2023
@julien-deramond
Copy link
Member

Thanks for reporting this issue @maikycourse
Indeed we spotted an issue with some use cases when data-bs-theme="light" is used within data-bs-theme="dark" mostly in cases like this one where we have the following, but not the corresponding "rollback" for light mode:

@if $enable-dark-mode {
  @include color-mode(dark) {
    .form-switch .form-check-input:not(:checked):not(:focus) {
      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
    }
  }
}

I haven't dug into this specific issue too much, but I think this can be fixed in the same batch as what's suggested in #39295; a fix in the same spirit relying on :root CSS vars.
I'll try some things and link my PR to this issue if it can be fixed simultaneously.

@julien-deramond julien-deramond removed this from v5.3.3 Feb 21, 2024
@github-project-automation github-project-automation bot moved this to To do in v5.3.4 Feb 21, 2024
topkecleon referenced this issue in topkecleon/Patiobar Mar 26, 2024
@topkecleon
Potential fix for volume slider button not adapting to dark mode.
7d5c735
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 confirmed css v5
Projects
v5.3.4
Status: To do
Milestone
No milestone
Development

No branches or pull requests
2 participants
@maikycourse @julien-deramond