saadeghi/daisyui

docs: DaisyUI V5 themes color extraction

J4gQBqqR opened this issue · 7 comments

J4gQBqqR commented

On which page do you see this issue?

https://v5.daisyui.com/docs/themes/

Describe the issue

I am using DaisyUI v4 with the daisyui/src/theming/themes.js code to extract color:

<script lang="ts">
	import Icon from "@iconify/svelte";
	import { colorManager, s } from "$lib/utilities/Store.svelte";
	import themes from "daisyui/src/theming/themes.js";
	import Chart from "chart.js/auto";

	let theme = $derived(s.isDarkMode ? "dim" : "nord");
	Chart.defaults.color = themes[s.isDarkMode ? "dim" : "nord"]["base-content"];
	Chart.defaults.borderColor = themes[s.isDarkMode ? "dim" : "nord"]["primary"];
	Chart.defaults.backgroundColor =
		themes[s.isDarkMode ? "dim" : "nord"]["base-100"];

	$effect(() => {
		window.document.documentElement.setAttribute("data-theme", theme);
	});
</script>

Now I am trying out DaisyUI v5. After upgrade all related packages, I started to realize that the daisyui/src/theming/themes.js file is removed with TailwindCSS v4 plugins. So now there is no such convenient utility for us to use. Is there a replacement method and can this method be documented in documentation here "https://v5.daisyui.com/docs/themes/"?

What browsers are you seeing the problem on?

All browsers

github-actions commented

Thank you @J4gQBqqR for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

saadeghi commented

Yes. There's /theme/object.js
https://unpkg.com/daisyui@5.0.0-alpha.47/theme/object.js

Also you can use JS object of a specific theme individually:
https://unpkg.com/browse/daisyui@5.0.0-alpha.47/theme/

Color names are now exactly same as the CSS variables now, to make it easier to use.

And unlike the previous file, it includes all values of all themes, not just the seed values.

Let me know if you have any questions.

J4gQBqqR commented

Just another question, I found that the way that I was setting theme using JavaScript is no longer working in v5:
window.document.documentElement.setAttribute("data-theme", theme);

Is there an equivalent with DaisyUI v5 that I can programming change theme?

saadeghi commented

Is data-theme being added to <html> tag using this line?

Also make sure you enabled all themes form CSS:

@plugin "daisyui" {
  themes: all;
}

Docs will be ready soon.

Let me know if you have any questions

J4gQBqqR commented

Yes, I added them by using this block in app.css:

@import "tailwindcss";
@plugin "daisyui" {
	themes:
		nord --default,
		dim --prefersdark;
}

Although this is added, the window.document.documentElement.setAttribute("data-theme", theme); still does not work

saadeghi commented

When window.document.documentElement.setAttribute("data-theme", theme); runs, can you check if data-theme attribute is added to <html> tag?

Is it null or something?

Are there any errors in devtools console?

Can you share a minimal reproduction example where I can run this script and see the issue?

J4gQBqqR commented

I will open another ticket on this issue.