docs

Author: saadeghi

package.json

@@ -1,6 +1,7 @@
 {
   "name": "daisyui-monorepo",
   "private": true,
+  "packageManager": "bun@1.2.8",
   "workspaces": [
     "packages/*"
   ],

packages/docs/src/components/Footer.svelte

@@ -8,7 +8,7 @@
 
 <div data-sveltekit-preload-data>
   <div class="bg-base-100 text-base-content">
-    <footer class="footer md:footer-horizontal mx-auto max-w-6xl px-4 py-20">
+    <footer class="footer md:footer-horizontal mx-auto max-w-7xl px-4 py-20 text-xs">
       <div>
         <div class="flex items-center gap-2">
           <svg width="32" height="32" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">

packages/docs/src/routes/(routes)/docs/install/rails/+page.md

@@ -70,6 +70,7 @@ Run this code to download latest version of daisyUI as a single js file
 
 ```sh:Terminal
 curl -sLo app/assets/tailwind/daisyui.js https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js
+curl -sLo app/assets/tailwind/daisyui-theme.js https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js
 ```
 
 Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
@@ -82,6 +83,11 @@ Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
 @source "../../../app/views/**/*";
 
 @plugin "./daisyui.js";
+
+/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */
+@plugin "./daisyui-theme.js"{
+  /* custom theme here */
+}
 ```
 
   </div>

packages/docs/src/routes/(routes)/docs/install/standalone/+page.md

@@ -17,6 +17,7 @@ Run this code to download latest version of daisyUI as a single js file and put
 
 ```sh:Terminal
 curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js
+curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js
 ```
 
 ### 3. Add Tailwind CSS and daisyUI
@@ -28,6 +29,11 @@ Address your HTML and other markup files in the `source` function.
 @import "tailwindcss" source(none);
 @source "./public/*.{html,php,erb}";
 @plugin "./daisyui.js";
+
+/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */
+@plugin "./daisyui-theme.js"{
+  /* custom theme here */
+}
 ```
 
 ### 4. Build CSS

packages/docs/src/routes/(routes)/docs/themes/+page.md

@@ -148,6 +148,16 @@ To add a new theme, use `@plugin "daisyui/theme" {}` in your CSS file, with the
 }
 ```
 
+If you're using CDN and you want to use a custom theme, use it like this:
+
+```css:app.css
+:root:has(input.theme-controller[value=mytheme]:checked),[data-theme="mytheme"] { /* mytheme is the name of the custom theme */
+  color-scheme: light;
+  --color-base-100: oklch(98% 0.02 240);
+  /* ...rest of CSS variables like above example */
+}
+```
+
 ## <Translate text="How to customize an existing theme?" />
 
 To customize a built-in theme, you can use the same structure as adding a new theme, but with the same name as the built-in theme. For example, to customize the `light` theme: