reactjs - How to change built-in theme with custom colors? - Stack Overflow

admin管理员组

文章数量:1391792

I want to change Daisyui's built-in light and dark theme with custom colors. I'm working with React.js, daisyui 5.0.2

I've read their document here and followed the steps exactly to no avail.

Currently, the light/dark theme is applied but the custom colors won't load.

Here's my App.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  
  --color-primary: oklch(60% 0.2 140);
  --color-secondary: oklch(20% 0.01 0);
  --color-accent: oklch(80% 0.2 85);
  --color-neutral: oklch(100% 0 0);
  --color-base-100: oklch(15% 0.01 0);
  --color-base-200: oklch(98% 0.01 0);
  --color-base-300: oklch(85% 0.01 240);
  --color-info: oklch(55% 0.25 260);
  --color-success: oklch(70% 0.2 140);
  --color-warning: oklch(80% 0.15 80);
  --color-error: oklch(60% 0.3 30);
}

@plugin "daisyui/theme" {
  name: "dark";
  prefersdark: true;
  
  --color-primary: oklch(60% 0.2 140); 
  --color-secondary: oklch(25% 0.01 0); 
  --color-accent: oklch(80% 0.2 85);
  --color-neutral: oklch(20% 0.01 0);
  --color-base-100: oklch(10% 0.01 0);
  --color-base-200: oklch(15% 0.01 0); 
  --color-base-300: oklch(20% 0.01 0);
  --color-info: oklch(50% 0.25 260);
  --color-success: oklch(55% 0.2 140);
  --color-warning: oklch(75% 0.15 80);
  --color-error: oklch(55% 0.3 30);
}

Things I've tried but didn't work:

• Modifying the tailwind.config.js file to add daisyui plugin, and add custom theme or overwrite the built-in light and dark theme like so:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    fontFamily: {
      sans: ["Open Sans", "sans-serif"],
    },
  },
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#27C432",
          secondary: "#222222",
          accent: "#FFC456",
          neutral: "#FFFFFF",
          "base-100": "#1E1E1E",
          "base-200": "#F9F9F9",
          "base-300": "#D0D5DD",
          info: "#436dfe",
          success: "#7af38a",
          warning: "#FFB01C",
          error: "#ff0000",
        },
      },
    ],
  },
  plugins: [require("daisyui")],
};

After adding the custom theme, I added data-theme="mytheme" to my html but it didn't work.

I want to change Daisyui's built-in light and dark theme with custom colors. I'm working with React.js, daisyui 5.0.2

I've read their document here and followed the steps exactly to no avail.

Currently, the light/dark theme is applied but the custom colors won't load.

Here's my App.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  
  --color-primary: oklch(60% 0.2 140);
  --color-secondary: oklch(20% 0.01 0);
  --color-accent: oklch(80% 0.2 85);
  --color-neutral: oklch(100% 0 0);
  --color-base-100: oklch(15% 0.01 0);
  --color-base-200: oklch(98% 0.01 0);
  --color-base-300: oklch(85% 0.01 240);
  --color-info: oklch(55% 0.25 260);
  --color-success: oklch(70% 0.2 140);
  --color-warning: oklch(80% 0.15 80);
  --color-error: oklch(60% 0.3 30);
}

@plugin "daisyui/theme" {
  name: "dark";
  prefersdark: true;
  
  --color-primary: oklch(60% 0.2 140); 
  --color-secondary: oklch(25% 0.01 0); 
  --color-accent: oklch(80% 0.2 85);
  --color-neutral: oklch(20% 0.01 0);
  --color-base-100: oklch(10% 0.01 0);
  --color-base-200: oklch(15% 0.01 0); 
  --color-base-300: oklch(20% 0.01 0);
  --color-info: oklch(50% 0.25 260);
  --color-success: oklch(55% 0.2 140);
  --color-warning: oklch(75% 0.15 80);
  --color-error: oklch(55% 0.3 30);
}

Things I've tried but didn't work:

• Modifying the tailwind.config.js file to add daisyui plugin, and add custom theme or overwrite the built-in light and dark theme like so:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    fontFamily: {
      sans: ["Open Sans", "sans-serif"],
    },
  },
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#27C432",
          secondary: "#222222",
          accent: "#FFC456",
          neutral: "#FFFFFF",
          "base-100": "#1E1E1E",
          "base-200": "#F9F9F9",
          "base-300": "#D0D5DD",
          info: "#436dfe",
          success: "#7af38a",
          warning: "#FFB01C",
          error: "#ff0000",
        },
      },
    ],
  },
  plugins: [require("daisyui")],
};

After adding the custom theme, I added data-theme="mytheme" to my html but it didn't work.

• reactjs
• daisyui

Share Improve this question Follow asked Mar 12 at 6:28 Халиука Б.Халиука Б. 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Important: Using outdated directives can cause TailwindCSS not to generate the compiled CSS. I believe that removing the @tailwind directives and the tailwind.config.js will resolve your issue.

Breaking changes from TailwindCSS v4

DaisyUI v5 was necessary to introduce support for TailwindCSS v4. TailwindCSS v4 introduced many breaking changes. For example, the @tailwind directives became deprecated, and you can remove them from your code.

• Removed @tailwind directives - StackOverflow

From TailwindCSS v4 onwards, there is no need for a tailwind.config.js file; instead, CSS-first directives are preferred.

• New configuration option in v4 - StackOverflow

Related:

• What's changed in TailwindCSS v4 - StackOverflow

Now that we've cleared that up, let's see how you can customize the light and dark themes in DaisyUI using CSS-first.

How to customize themes in DaisyUI v5

• Customize DaisyUI components - DaisyUI v5 Docs
• Example custom components - DaisyUI v5 Playground

With the @plugin directive, you can implement DaisyUI into your project. Here, you can define the main settings for DaisyUI, such as the themes. However, you no longer customize the themes here.

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

To customize the themes, you need to load the daisyui/theme plugin for each theme. This opens up the option to customize the specific theme

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  /* ... */
}

@plugin "daisyui/theme" {
  name: "dark";
  prefersdark: true;
  /* ... */
}

• Working playground with light and dark themes

Note: You doing these correctly. However, the colors for your light and dark themes are identical, and both will result in the same dark theme.

Since you no longer need to use tailwind.config.js, custom themes must also be integrated into the CSS file, like this:

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, mycustomtheme;
}

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  /* ... */
}

@plugin "daisyui/theme" {
  name: "dark";
  prefersdark: true;
  /* ... */
}

@plugin "daisyui/theme" {
  name: "mycustomtheme";
  /* ... */
}

Starting from DaisyUI v5, you no longer need to manually edit the daisyui/theme plugin. Instead, you can use the Theme Generator, from which, after selecting the appropriate settings, you can retrieve the CSS code:

• Theme Generator - DasyiUI v5

本文标签： reactjsHow to change builtin theme with custom colorsStack Overflow