[🐞] 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.