[🐞] Qwik UI Website theme bug - light mode / dark mode

[Shane-Donlon]

Which package is affected?

Documentation Website

Describe the bug

When I go to the Qwik UI Website it forces light mode (although I have prefers dark mode)

Then when I change to dark mode, refresh the page I have to click the theme toggler twice to change from dark.
On click 1 it changes the class from "dark" to "dark",
On click 2 it changes from "dark" to "light"

2 issues:

1. Prefers color scheme preferences should be adhered to
2. Theme toggler should require only 1 click to change themes.

I thought I knew where the bug was coming from but this seems to be coming from
"qwik-themes": "^0.2.0" package.

As a note: the Qwik Cookbook theme-management page has a similar bug.

Reproduction

https://qwikui.com/

Steps to reproduce

1. Go to qwikui.com
2. page will have a white background.
3. Change the theme to dark.
4. Refresh the page
5. Click the theme toggler button (and theme won't change)
6. Click the theme toggler button (theme changes)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
    Memory: 1.09 GB / 7.74 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.14.2 - ~\AppData\Roaming\npm\pnpm.CMD

Additional Information

No response

[Shane-Donlon]

Salut Maïeul, ce va?
(my French is very rusty)
So I think I've solved some of the bugs from the qwik-themes repo.
I did fork it, but I disconnected the upstream as I wasn't sure if it was still maintained etc..

Commits can be found https://github.com/Shane-Donlon/qwik-themes/commits/main/ and Commits on Dec 6, 2024.

I did change the scope slightly of this, and added a themeChanger component etc. Just me playing around with the idea.
https://qwik-themes-testing-dark-light-only.netlify.app/ is a live example.

I haven't tested how well this plays with Brutalist etc just yet,
I did want to focus on getting light-dark working first and then expand the scope out.

[Shane-Donlon]

@maiieul

Salut Maïeul, ce va?
Okay so I think (famous last words 🤣 ) I've fixed the bugs and moved away from useVisibleTask.

Testing site link:
https://testing-qwik-themes-v-103.netlify.app/

Repo Link:
https://github.com/Shane-Donlon/qwik-themes

Commits Link:
https://github.com/Shane-Donlon/qwik-themes/commits/main/

Test repo Link:
https://github.com/Shane-Donlon/testing-qwik-themes-2

I set this up as my own repo as I wasn't overly sure where things were happening at the time.
But also I did want to add the themeChanger to it too (for myself, but not sure if it should be in the official themes?)

Let me know what you think!

[maiieul]

Hello Shane, ça va, just been quite a bit busy recently 🙃 I attempted to remove the visible task on my end in November as well and I was able to do it too (😁). So I'll have a look at your solution here when I can.. I still have quite a lot on my plate, but I might as well prioritize this. Thanks for sharing!