1

I was configuring with my SvelteJS and Tailwindcss project with DaisyUI. But every time I add DaisyUI to a Project the background color becomes black. Maybe it's a default color that's not the problem. but how will I change it?
After a lot of searches, I found if I add data-theme="corporate" default HTML tag it's gone. But I don't think it's a good idea to change the default HTML file.

<!DOCTYPE html>
<html lang="en" data-theme="corporate">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <link rel="icon" href="%svelte.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div>%svelte.body%</div>
    </body>
</html>

Please show me the correct way to change these colors in DaisyUI?

sk shahriar ahmed raka
  • 815
  • 1
  • 10
  • 29

3 Answers3

3

Based on https://github.com/saadeghi/daisyui/issues/338

Try changing to base:false in your daisyUI config.

https://daisyui.com/docs/config/

working
  • 873
  • 3
  • 11
  • 21
1

I was having the same issue. I solved it by customizing the dark theme, which is the default theme if you're using the browser in dark mode. The base-100 color seems to be responsible for the background color. I changed it to my desired color for the background and it worked.

daisyui: { styled: true, themes: [ { dark: { ...require("daisyui/src/colors/themes")["[data-theme=dark]"], "base-100": "#15122D", // your desired bg-color }, }, ], };

Alternatively, as the other answer here suggests to set base:false is a better solution.

Nirjal Mahat
  • 247
  • 3
  • 5
1

I was having the same issue while using chrome in dark mode.

This is what worked for me:

 #tailwind.config.js

 daisyui: {
  darkTheme: "light",
 },
Marcos
  • 19
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 27 '23 at 15:00