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/daisyui@4.12.10/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.
@aalaap These are the CSS variables:
https://unpkg.com/browse/daisyui@4.12.10/dist/themes.css
For example
--p: 49.12% 0.3096 275.75;
isprimary
color (docs) and the value49.12% 0.3096 275.75
is OKLCHlightness
chroma
hue
.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: