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

Dark mode - manually using the ‘class’ strategy #38571

Closed
2 tasks done
harnishdesign opened this issue May 9, 2023 · 5 comments
Closed
2 tasks done

Dark mode - manually using the ‘class’ strategy #38571

harnishdesign opened this issue May 9, 2023 · 5 comments
Labels
feature

Comments

@harnishdesign
Copy link

Prerequisites

Proposal

I have realized in dark mode. I can't set dark mode manually using the ‘class’ strategy.

have any available option of Something like below example ? according to Tailwind css dark mode.

<!-- Dark mode not enabled -->
<html data-bs-theme="light">
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-dark">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html data-bs-theme="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-dark">
    <!-- ... -->
  </div>
</body>
</html>

Motivation and context

if you are any provide option something like. that will great for dark mode easily manage.
@julien-deramond
Copy link
Member

There are no dark:* class utilities. You can contextually use data-bs-theme="dark" in the DOM wherever you want. There's an example in https://getbootstrap.com/docs/5.3/customize/color-modes/#example.

@harnishdesign
Copy link
Author

@julien-deramond I know. but, How can i manually force to override class? When I will need in some elements.
have not changes color in dark mode when i use class .bg-white .bg-light .text-dark .text-black etc....

@julien-deramond
Copy link
Member

julien-deramond commented May 9, 2023 •
edited
Loading

Right now, you can use utilities that automatically switch colors depending on the chosen theme:

@Firas-HadjKacem

This comment was marked as off-topic.

Sign in to view
@mdo
Copy link
Member

mdo commented Jun 1, 2023

Yup, right now, no plans to allow for moving from dark mode to light mode in a nested setting. The CSS selectors unfortunately are just too rough to deal with based on how things are currently implemented.

@mdo mdo closed this as not planned Won't fix, can't repro, duplicate, stale Jun 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mdo @harnishdesign @julien-deramond @Firas-HadjKacem