How to use themes with CDN #3133
-
|
In the docs, the only way to customize DaisyUi is using the When I try to add themes manually by creating a css file with all the variables, like the one below ( :root {
color-scheme: light;
--inc: 0% 0 0;
--suc: 0% 0 0;
--wac: 0% 0 0;
--erc: 0% 0 0;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 0 48% 100%;
--pf: 0 36% 71%;
--pc: 255 100% 100%;
--s: 52 78% 35%;
--sf: 40 65% 27%;
--sc: 255 100% 100%;
--a: 249 45% 9%;
--af: 234 35% 5%;
--ac: 255 100% 100%;
--n: 28 11% 12%;
--nf: 0 0% 0%;
--nc: 255 100% 100%;
--b1: 255 100% 100%;
--b2: 245 96% 97%;
--b3: 209 82% 84%;
--bc: 0 0% 0%;
--in: 59 51% 96%;
--su: 34 77% 37%;
--wa: 251 75% 14%;
--er: 239 27% 27%;
--rounded-box: 0.5rem;
--rounded-btn: 0.25rem;
--rounded-badge: 1rem;
--animation-btn: .2s;
--animation-input: .2s;
--btn-text-case: capitalize;
--navbar-padding: 1rem;
--border-btn: 1px;
}It seems to ignore the values and everything becomes black and white. When I use the My <link rel="stylesheet" href="/static/css/days-ui.min.css" type="text/css"/>
<link rel="stylesheet" href="/static/css/my-custom-themes.css" type="text/css"/>
<script src="/static/js/tailwind.min.js"></script>
<script src="/static/js/tailwind.config.js"></script>Instead of importing from the CDN I'm downloading the file and serving it on my own server, but the content is the same as the one in the CDN (https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css and https://cdn.tailwindcss.com). I also noticed that the css changes when I add the Is it mandatory to use a build step to configure it? DaisyUI doesn't work properly with CDNs? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
I was able to fix it, the problem was the format of the colors that I was using. I created a theme using this amazing website, but unfortunately it only exports the themes to JSON config. To be able to use it as CSS I had to convert the colors to the format that DaisyUI uses, what took a few tries (first HSL, them an entire journey to oklch). After a long time, I finally was able to get hex to oklch, and the theme worked. |
Beta Was this translation helpful? Give feedback.
-
|
That's great! Can you post an example here? Even I'm struggling with this. |
Beta Was this translation helpful? Give feedback.
-
|
@aalaap These are the CSS variables: For example You can play with them or convert them in this website: https://oklch.com/ To add a new custom theme using CDN (if you don't have a Tailwind node setup to generate the CSS file) you can add a CSS file to your project with this: [data-theme=mytheme] {
color-scheme: light;
--in: 72.06% 0.191 231.6;
--su: 64.8% 0.150 160;
--wa: 84.71% 0.199 83.87;
--er: 71.76% 0.221 22.18;
--pc: 89.824% 0.06192 275.75;
--ac: 15.352% 0.0368 183.61;
--inc: 0% 0 0;
--suc: 0% 0 0;
--wac: 0% 0 0;
--erc: 0% 0 0;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 49.12% 0.3096 275.75;
--s: 69.71% 0.329 342.55;
--sc: 98.71% 0.0106 342.55;
--a: 76.76% 0.184 183.61;
--n: 32.1785% 0.02476 255.701624;
--nc: 89.4994% 0.011585 252.096176;
--b1: 100% 0 0;
--b2: 96.1151% 0 0;
--b3: 92.4169% 0.00108 197.137559;
--bc: 27.8078% 0.029596 256.847952
}and customize the colors. then you can use your theme like Let me know if you have a question. |
Beta Was this translation helpful? Give feedback.
-
|
@saadeghi Thank you for the quick response! This is the info I was looking for and I actually managed to get it working by following the solution you posted earlier in #777 ! I do have a build setup, but I still have a requirement for changing themes and/or theme variables dynamically at runtime. This helps! |
Beta Was this translation helpful? Give feedback.
@aalaap These are the CSS variables:
https://unpkg.com/browse/[email protected]/dist/themes.css
For example
--p: 49.12% 0.3096 275.75;isprimarycolor (docs) and the value49.12% 0.3096 275.75is OKLCHlightnesschromahue.You can play with them or convert them in this website: https://oklch.com/
To add a new custom theme using CDN (if you don't have a Tailwind node setup to generate the CSS file) you can add a CSS file to your project with this: