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

bug: V5 setAttribute("data-theme", theme) failed in firefox nightly #3317

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

bug: V5 setAttribute("data-theme", theme) failed in firefox nightly #3317

J4gQBqqR opened this issue Dec 13, 2024 · 5 comments

Comments

@J4gQBqqR
Copy link

What version of daisyUI are you using?

5.0.0-alpha.48

Which browsers are you seeing the problem on?

Firefox

Reproduction URL

N/A

Describe your issue

I am changing theme using the following code:

<script lang="ts">
	import { s } from "$lib/utilities/Store.svelte";
	import Chart from "chart.js/auto";

	let theme = $derived(s.isDarkMode ? "dim" : "nord");
	$effect(() => {
		window.document.documentElement.setAttribute("data-theme", theme);
	});
</script>

theme is a derived rune that will change when the isDardMode $state() rune changes. I can change this state rune with a button click.

This is my sveltekit's main page:

<!doctype html>
<html lang="en" data-theme="dim">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="shortcut icon" href="#" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div>%sveltekit.body%</div>
	</body>
</html>

This is my app.css:

@import "tailwindcss";
@plugin "daisyui" {
	themes: all;
}
  • Chrome is working fine:
    图片
    图片
  • Floorp (currently based on Firefox ESR) is working fine:
    图片
    图片
  • However, Firefox nightly fail to change theme:
    图片
    图片
@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.

@J4gQBqqR
Copy link
Author

Hi @saadeghi, I can use a private channel to provide you a reproduction link to my deployed dev site for you to see this. Let me know if you want one and how to send this link privately to you.

@saadeghi
Copy link
Owner

Sure. [email protected]

@J4gQBqqR
Copy link
Author

It is now working in version alpha 49. Thank you for your awesome work!

@saadeghi
Copy link
Owner

Yeah. The theme rules were being applied by the wrong order. Fixed now 💚

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

No branches or pull requests
2 participants
@saadeghi @J4gQBqqR