DEV Community

Mashofa
Mashofa

Posted on

DaisyUI: Custom Theme in NuxtJs

#javascript #nuxt #css

DaisyUI saya biasanya saya pilih karena component-base css bisa mempercepat dalam development dengan kustomisasi yang tinggi dan mudah. namun saat saya menggunakan DaisyUI untuk custom theme menemukan sedikit masalah pada setup awalnya. Pada kasus ini saya menggunakan nuxtJs

Intalasi DaisyUI

Kalian bisa menginstall DaisyUI pada projek nuxt kalian dengan menjalankan kode dibawah ini:

npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
Enter fullscreen mode Exit fullscreen mode

Lalu setting pada file nuxt.config

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  css: ["~/assets/app.css"],
});
Enter fullscreen mode Exit fullscreen mode

Lalu import Tailwindcss dan DaisuUI pada app.css yang disimpan difolder assets

@import "tailwindcss";
@plugin "daisyui";
Enter fullscreen mode Exit fullscreen mode

Kustom Tema

Agar mudah kalian bisa langsung ke website DaisyUI, setelah itu kalian bisa lihat button {}css dan ketika diklik maka akan muncul berbagai properti tema kustom yang kalian atur.

Buka kembali app.css dengan menambahkan css yang telah disalin dari button {}css

@import "tailwindcss";
@plugin "daisyui";
// tambahkan disini setting theme nya
@plugin "daisyui/theme" {
  name: "winter";
// jika ini tema utama, ubah default menjadi true
  default: true;

  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97% 0.014 254.604);
  --color-base-200: oklch(93% 0.032 255.585);
  --color-base-300: oklch(88% 0.059 254.128);
  --color-base-content: oklch(37% 0.146 265.522);
  --color-primary: oklch(0% 0 0);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(44% 0.017 285.786);
  --color-secondary-content: oklch(98% 0 0);
  --color-accent: oklch(59% 0.145 163.225);
  --color-accent-content: oklch(97% 0.021 166.113);
  --color-neutral: oklch(54% 0.245 262.881);
  --color-neutral-content: oklch(97% 0.014 254.604);
  --color-info: oklch(78% 0.154 211.53);
  --color-info-content: oklch(30% 0.056 229.695);
  --color-success: oklch(79% 0.209 151.711);
  --color-success-content: oklch(26% 0.065 152.934);
  --color-warning: oklch(85% 0.199 91.936);
  --color-warning-content: oklch(28% 0.066 53.813);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.21875rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;
}
Enter fullscreen mode Exit fullscreen mode

Jika belum berpengaruh pada projek kalian, maka kalian bisa menambahkan attribut data-theme="winter"(contoh diatas dengan nama winter) pada element html.

<body data-theme="winter">....</body>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)