How to modify DaisyUI theme using CDN
Jasser Mark Arioste
Daisy UI is usually set up using npm and is already packaged in a production CSS, for example in this tutorial on how to set it up on Next.js . However, sometimes we want a quick setup using the CDN without any dependencies. In this tutorial, I will show you how to set up DaisyUI using CDN modifying the theme.
Project Setup
To setup daisyUI using cdn, we only need to add tailwindcss cdn and daisyui cdn to our html
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/daisyui@2.31.0/dist/full.css"
rel="stylesheet"
type="text/css"
/>Now we can use all the components of daisyUI and do modifications using tailwindcss utility classes.
<body>
<main>
<button class="btn btn-primary rounded-full">Hello</button>
<button class="btn btn-secondary">Hello</button>
</main>
</body>Customizing the theme in a CDN setting
Normally, we use tailwind.config.js to customize the theme in DaisyUI. However when using a cdn, we need to write the theme using css . If we check the generated theme from DaisyUI, we find something like below on the inspect tool, DaisyUI uses css variables and hsl color model representation to represent the colors.
All these variables represent something in the daisy ui theme. If you want to modify primary color for example, you have to modify --p variable. below is a customized theme and breakdown of all the variables.
//styles.css
[data-theme='mytheme'] {
/* primary */
--p: 262 50% 40%;
/* primary focus */
--pf: 262 80% 40%;
/* primary content */
--pc: 0 0% 100%;
/* secondary */
--s: 316 70% 0%;
/* secondary focus */
--sf: 316 70% 100%;
/* secondary content */
--sc: 0 0% 50%;
/* accent */
--a: 175 70% 41%;
/* accent content */
--ac: 0 0% 100%;
/* accent focus */
--af: 175 70% 33%;
/* info */
--in: 198 93% 60%;
/* info content */
--inc: 198 100% 12%;
/* success */
--su: 158 64% 52%;
/* success content */
--suc: 158 100% 10%;
/* warning */
--wa: 43 96% 56%;
/* warning content */
--wac: 43 100% 11%;
/* error */
--er: 0 91% 71%;
/* error content */
--erc: 0 100% 14%;
/* neutral */
--n: 218 18% 12%;
/* neutral focus */
--nf: 223 17% 8%;
/* neutral content */
--nc: 220 13% 69%;
/* base 100 */
--b1: 220 18% 20%;
/* base 200 */
--b2: 220 17% 17%;
/* base 300 */
--b3: 219 18% 15%;
/* base content */
--bc: 220 13% 69%;
/* other settings */
--rounded-box: 1rem;
--rounded-btn: 0.25rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-text-case: capitalize;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}If you want to use a certain hex code, you’ll have to use an hex to hsl color converter.
Using the customized theme DaisyUI theme
In order to use the customized theme, we just have to add the css and use the theme using data-theme attribute as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/daisyui@2.31.0/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<!-- insert link here -->
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-theme="mytheme" class="p-16">
<h1>mytheme</h1>
<button class="btn btn-primary rounded-full">Hello</button>
<button class="btn btn-secondary">Hello</button>
</div>
<div data-theme="light" class="p-16">
<h1>Light theme</h1>
<button class="btn btn-primary rounded-full">Hello</button>
<button class="btn btn-secondary">Hello</button>
</div>
</body>
</html>Let’s will see the difference between mytheme and light theme.
Conclusion
We have successfully setup daisyUI using CDN and also modify the theme to use in our project.
Resources
Docs - https://daisyui.com/docs/cdn/ Code & Demo - https://stackblitz.com/edit/web-platform-xpaf5a
Credits: Image by 🌼 Christel 🌼 from Pixabay
