I need to have a dynamic theme for my website that es from a database, possible values are theme-1, theme-2 etc. and I want each one to change the color palette of the site, i.e the primary tailwind color being green for theme-1 but blue for theme-2.
I have tried using but it is such an overkill as it regenerates all the colors and has a very cumbersome and long prefix before each class. I want to define the 'theme-1' class at the body level and do something along the lines of this pseudo code
.theme-2 {
/* primary-500 is now color: blue */
}
I am using Tailwind v2 due to dependency constraints.
I need to have a dynamic theme for my website that es from a database, possible values are theme-1, theme-2 etc. and I want each one to change the color palette of the site, i.e the primary tailwind color being green for theme-1 but blue for theme-2.
I have tried using https://github./upupming/tailwindcss-themeable but it is such an overkill as it regenerates all the colors and has a very cumbersome and long prefix before each class. I want to define the 'theme-1' class at the body level and do something along the lines of this pseudo code
.theme-2 {
/* primary-500 is now color: blue */
}
I am using Tailwind v2 due to dependency constraints.
Share Improve this question asked Jul 28, 2022 at 9:22 Leon ALeon A 3134 silver badges9 bronze badges 4- How much colors do you have in a single palette? Maybe, using CSS variables is solution here, but it depends – Ihar Aliakseyenka Commented Jul 28, 2022 at 9:25
- I'll generate a few palettes using tailwindshades.. The important thing for me is to be able to reuse primary as a class name and have tailwind classes like bg-primary-500 and text-primary-500 automatically switch, as there will be a lot of HTML generated with Vue – Leon A Commented Jul 28, 2022 at 9:28
- Having a look at tailwindcss./docs/… thanks to your suggestion. However it seems this is only a solution for multiple classes, and not dynamically overwriting 'primary' as I'm hoping – Leon A Commented Jul 28, 2022 at 9:32
-
You may create custom ponents fro every theme, but not entirely sure it is a good idea. Like DO NOT create pallete named
primary, but a bunch of others. And define ponents in CSS like.theme-1 .text-primary-500 {@apply text-theme1-500}, .theme-2 .text-primary-500 {@apply text-theme2-500}and so on. Another solution is to write custom variant for every theme maybe. Use it liketheme1:text-green-500 theme2:text-blue-500but again it hard to maintain for a big amount of themes – Ihar Aliakseyenka Commented Jul 28, 2022 at 9:38
2 Answers
Reset to default 5You might use tw-colors, a slim plugin that makes it really easy to configure multiple color themes.
tailwind.config.js
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
halloween: {
'primary': 'orange',
'secondary': 'yellow',
},
summer: {
'primary': 'pink',
'secondary': 'red',
},
winter: {
'primary': 'blue',
'secondary': 'green',
},
party: {
'primary': 'steelblue',
'secondary': 'darkblue',
},
})
],
};
use themes like this with class:
<html class='theme-halloween'>
...
</html>
Or with data attributes:
<html data-theme='halloween'>
...
</html>
Themes can be switched dynamically with some toggle button or whatever you prefer
Disclaimer: I am the author of this package
Solution: use CSS Variables.
main.css
:root .theme-1 {
--tw-text-opacity: 1;
--color-primary-50: 235,242,254;
--color-primary-100: 215,230,253;
--color-primary-200: 176,205,251;
--color-primary-300: 137,180,250;
--color-primary-400: 98,155,248;
--color-primary-500: 59,130,246;
--color-primary-600: 11,97,238;
--color-primary-700: 8,75,184;
--color-primary-800: 6,53,131;
--color-primary-900: 4,31,77;
}
tailwind.config.js
colors: {
...
primary: {
50: 'rgba(var(--color-primary-50), var(--tw-text-opacity))',
100:'rgba(var(--color-primary-100), var(--tw-text-opacity))',
200:'rgba(var(--color-primary-200), var(--tw-text-opacity))',
300:'rgba(var(--color-primary-300), var(--tw-text-opacity))',
400:'rgba(var(--color-primary-400), var(--tw-text-opacity))',
500:'rgba(var(--color-primary-500), var(--tw-text-opacity))',
600:'rgba(var(--color-primary-600), var(--tw-text-opacity))',
700:'rgba(var(--color-primary-700), var(--tw-text-opacity))',
800:'rgba(var(--color-primary-800), var(--tw-text-opacity))',
900:'rgba(var(--color-primary-900), var(--tw-text-opacity))'
}
...
Now you can use text-primary-500 and have the color change with only 1 parent class