bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Published 20 hours ago • verified publisher icon twbs

Dark theme fixes for navbar and dropdown (Fixes #39984)

Open karlshea opened this issue 1 year ago • 3 comments

Description

  • Allow data-bs-theme="dark" on parent element of .navbar to trigger .navbar-dark variables as described in the documentation.
  • Allow data-bs-theme="dark" on parent or current element of .dropdown-menu to trigger .dropdown-menu-dark variables as described in the documentation.

Motivation & Context

Closes #39984

Type of changes

  • [x] Bug fix (non-breaking change which fixes an issue)
  • [ ] New feature (non-breaking change which adds functionality)
  • [ ] Refactoring (non-breaking change)
  • [ ] Breaking change (fix or feature that would change existing functionality)

Checklist

  • [x] I have read the contributing guidelines
  • [x] My code follows the code style of the project (using npm run lint)
  • [ ] My change introduces changes to the documentation
  • [ ] I have updated the documentation accordingly
  • [ ] I have added tests to cover my changes
  • [ ] All new and existing tests passed

Live previews

  • https://deploy-preview-39989--twbs-bootstrap.netlify.app/docs/5.3/components/dropdowns/
  • https://deploy-preview-39989--twbs-bootstrap.netlify.app/docs/5.3/components/navbar/

Related issues

#39984, #39291

karlshea avatar May 15 '24 23:05 karlshea

@julien-deramond I'm not sure how the last navbar could be fixed if the background color is set with a style tag, there doesn't seem to be anything to work off of there?

In 5.3 without this PR's change if I remove bg-primary from the second navbar and manually set the background color with a style the text also renders white in dark mode.

karlshea avatar May 25 '24 07:05 karlshea

I've checked rapidly, but there is a forced data-bs-theme="light" (that should be displayed in the markup of the documentation, by the way). In this case, the color should be black since the light mode is forced.

I'll need to find the time to check all the existing PRs and issues at the same time regarding the color modes, because this could be also fixed automatically by https://github.com/twbs/bootstrap/pull/39295 if the color: is set by default (not the case right now).

julien-deramond avatar May 25 '24 07:05 julien-deramond

Yeah I'm not really sure what to do here. Maybe CSS specificity is winning?

karlshea avatar May 28 '24 21:05 karlshea