Custom Theming (Please help) #3002
-
|
This works fine but .... <!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>But I need something like this below <!--Blue Theme mode enabled -->
<html class="bluetheme">
<body>
<!-- Will be blue -->
<div class="bg-white bluetheme:bg-blue">
<!-- ... -->
</div>
</body>
</html>Please help me on how to solve .... |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hey 👋 The current implementation of Here's a very basic demo of how you could handle this: https://github.com/adamwathan/theming-tailwind-demo More context on the "dark mode only" nature of our Design RationaleThe obvious question when implementing this feature is "why not build some generalized universal theming solution that supports an arbitrary number of themes?" The main reasons are:
So for now, this feature is unapologetically dark mode only. Every design decision has been made with the mindset of "we only support light mode and dark mode and we don't care about supporting anything else". That's why the parent class is simply |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your reply : ) |
Beta Was this translation helpful? Give feedback.
Hey 👋
The current implementation of
darkModeis not meant to work as a multi-theme approach.Here's a very basic demo of how you could handle this: https://github.com/adamwathan/theming-tailwind-demo
More context on the "dark mode only" nature of our
darkModeimplementation, copied from the dark mode PR:Design Rationale
The obvious question when implementing this feature is "why not build some generalized universal theming solution that supports an arbitrary number of themes?"
The main reasons are: