Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: DaisyUI V5 themes color extraction #3312

Closed
J4gQBqqR opened this issue Dec 13, 2024 · 7 comments
Closed

docs: DaisyUI V5 themes color extraction #3312

J4gQBqqR opened this issue Dec 13, 2024 · 7 comments
Labels
v5

Comments

@J4gQBqqR
Copy link

J4gQBqqR commented Dec 13, 2024 •
edited
Loading

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 GitHub Actions
Copy link

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
Copy link
Owner

Yes. There's /theme/object.js
https://unpkg.com/[email protected]/theme/object.js

Also you can use JS object of a specific theme individually:
https://unpkg.com/browse/[email protected]/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.

@saadeghi saadeghi added the v5 label Dec 13, 2024
@J4gQBqqR
Copy link
Author

J4gQBqqR commented Dec 13, 2024 •
edited
Loading

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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?

@saadeghi saadeghi reopened this Dec 13, 2024
@J4gQBqqR
Copy link
Author

I will open another ticket on this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
v5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @J4gQBqqR