How to create multiple themes #3525
-
|
I'll be A/B testing different color combinations so I need multiple custom themes on my website. I've looked through the beta documentation and found this for making custom themes, but I need to know how to make more than one. If multiple custom themes isn't possible, how can I change the color variables during runtime? I need to be able to dynamically change the colors on my website. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
It's possible, just add You can use theme generator to create themes quickly, copy the CSS and add it to your CSS file. Example: Let me know if you have a question. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the quick response. Worked |
Beta Was this translation helpful? Give feedback.
-
|
Am I missing something? It doesn't work for me. as soon as I add a second custom theme the first one doesn't work anymore: @plugin "daisyui";
@plugin "daisyui/theme" {
name: "mylight";
default: true;
prefersdark: false;
color-scheme: light;
--color-base-100: oklch(98% 0.02 250);
/* bright white */
--color-base-200: oklch(95% 0.02 250);
/* light gray */
--color-base-300: oklch(92% 0.02 250);
--color-base-content: oklch(20% 0.03 250);
/* dark navy-gray text */
--color-primary: oklch(45% 0.15 260);
/* deep navy */
--color-primary-content: oklch(98% 0.01 260);
--color-secondary: oklch(80% 0.17 90);
/* gold */
--color-secondary-content: oklch(20% 0.03 90);
--color-accent: oklch(65% 0.15 220);
/* ocean blue */
--color-accent-content: oklch(98% 0.01 220);
--color-neutral: oklch(25% 0.03 260);
/* deep neutral */
--color-neutral-content: oklch(98% 0.01 260);
--color-info: oklch(65% 0.15 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(60% 0.15 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(75% 0.15 80);
--color-warning-content: oklch(25% 0.05 80);
--color-error: oklch(65% 0.15 30);
--color-error-content: oklch(98% 0.01 30);
/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;
/* border size */
--border: 1px;
/* effects */
--depth: 1;
--noise: 0;
}
@plugin "daisyui/theme" {
name: "mydark";
default: false;
prefersdark: true;
color-scheme: dark;
--color-base-100: oklch(15% 0.02 260);
/* dark navy background */
--color-base-200: oklch(20% 0.02 260);
--color-base-300: oklch(25% 0.02 260);
--color-base-content: oklch(90% 0.02 260);
/* light text */
--color-primary: oklch(65% 0.15 220);
/* ocean turquoise */
--color-primary-content: oklch(15% 0.02 260);
--color-secondary: oklch(80% 0.17 90);
/* gold */
--color-secondary-content: oklch(15% 0.02 90);
--color-accent: oklch(65% 0.15 250);
/* vivid blue */
--color-accent-content: oklch(98% 0.01 250);
--color-neutral: oklch(25% 0.03 260);
--color-neutral-content: oklch(90% 0.02 260);
--color-info: oklch(65% 0.15 220);
--color-info-content: oklch(15% 0.02 220);
--color-success: oklch(60% 0.15 140);
--color-success-content: oklch(15% 0.02 140);
--color-warning: oklch(75% 0.15 80);
--color-warning-content: oklch(15% 0.02 80);
--color-error: oklch(65% 0.15 30);
--color-error-content: oklch(15% 0.02 30);
/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;
/* border size */
--border: 1px;
/* effects */
--depth: 1;
--noise: 0;
} |
Beta Was this translation helpful? Give feedback.
-
|
@MatthiasGrandl Set your OS/browser to light mode to see the light theme. Let me know if you have a question. |
Beta Was this translation helpful? Give feedback.
-
|
yeah ok of course that was the issue 🤦 thanks @saadeghi ! |
Beta Was this translation helpful? Give feedback.
It's possible, just add
@plugin "daisyui/theme" {...one after another.You can use theme generator to create themes quickly, copy the CSS and add it to your CSS file.
Example:
https://play.tailwindcss.com/foHfzej9xK?file=css (Only in Tailwind Play
@betatag is needed because daisyUI 5 is beta until next week)Let me know if you have a question.