Switching the theme from Light to Dark mode after the page reload works starting with the second attempt

[shimkiv]

https://www.shadcn-svelte.com is in use for the app.
Using documentation from here: https://www.shadcn-svelte.com/docs/dark-mode

Steps:

• Enable Light mode;
• Reload the page;
• Click on theme switcher button in order to switch it to Dark mode;
• Nothing happens (visually);
• Click on theme switcher button once again;
• Theme switched to the Dark mode.

Actual results:

• Switching the theme from Light to Dark mode after the page reload works starting with the second attempt only.

Expected results:

• Theme switched from the 1st attempt.

---

Issue recording: https://www.youtube.com/shorts/REMenzzOMAc

[ollema]

what version are you using @shimkiv?

alternatively, can you share a reproduction?

this sounds like the bug I fixed in #17

[shimkiv]

@ollema I'm on v0.0.5 of mode-watcher.

[ollema]

@shimkiv can you share a reproduction repo? this does not seem to happen on my end from what I can tell from the video

[fjlein]

I'm observing the same issue on my end. Does not happen when reloading while dark mode is active.

I copied the example from the docs and modified it to see if something with the component is wrong, but that is not the case. toggleMode() seems to be buggy.

[ollema]

okay, so this preview is using mode-watcher 0.0.5: https://shadcn-svelte-git-fork-ollema-update-mode-watcher-huntabyte.vercel.app/docs/dark-mode

the toggle seems to work fine for me.

1. my system is set to prefer light mode.
2. I clear all localStorage entries - just to be sure I am starting from a clean slate
3. I refresh the page, light mode is enabled automatically
4. I press any toggle, for example the one in the dark mode docs, dark mode is activated on the first press
5. I reload the page, dark mode is still activated

what am I missing?

Screen.Recording.2023-10-29.at.21.19.29.mov

[fjlein]

I observe the same behaviour as seen in your video (up to second 20 in my screen share)

My system is also set to prefer light mode.

The bug seems to be happening when:

1. cleaning the local storage
2. reloading
3. reloading a second time

When you are in light mode, and you press the toggle userPrefersMode: "light" gets added, although you are already in light mode. (starting at second 20 in my screen share)

Screen.Recording.2023-10-29.at.21.32.32.mov

[ollema]

I observe the same behaviour as seen in your video (up to second 20 in my screen share)

My system is also set to prefer light mode.

The bug seems to be happening when:

1. cleaning the local storage
2. reloading
3. reloading a second time

When you are in light mode, and you press the toggle userPrefersMode: "light" gets added, although you are already in light mode. (starting at second 20 in my screen share)

Screen.Recording.2023-10-29.at.21.32.32.mov

thanks @fjlein for your additional information. I still can't seem to reproduce it.

to double check, can you confirm that this is what you do:

1. clearing the localStorage, reloading the page, light mode is activated
2. reloading
3. reloading a second time
4. pressing toggle, dark mode is is NOT activated , instead userPrefersMode = "light" is added

I tried these four steps on both safari and chrome and it works for me. did you also try this with the link I sent above or only with your own apps?

[fjlein]

@ollema Yes, I can confirm that I followed those steps.

Interestingly enough, I can not reproduce this bug in your provided link, only in my local app.

[ollema]

@ollema Yes, I can confirm that I followed those steps.

Interestingly enough, I can not reproduce this bug in your provided link, only in my local app.

can you confirm (maybe by clearing and reinstalling node_modules) that you are running 0.0.5?

otherwise I am out of ideas if it works in the provided link and on my machine but not in your app

[fjlein]

Yes, I can confirm that this bug persists even after a clean reinstall of all modules including mode-watcher 0.0.5. :(

[shimkiv]

FYI.
Updated to latest version of mode-watcher and shadcn-svelte (with components overwrite just in case).
Then changed the https://www.shadcn-svelte.com/docs/dark-mode example a bit:

<script lang="ts">
  import { Button } from '$lib/components/ui/button'
  import * as Tooltip from '$lib/components/ui/tooltip'
  import { mode, toggleMode } from 'mode-watcher'
  import { Moon, Sun } from 'radix-icons-svelte'
</script>

<div class="flex items-center space-x-2">
  <Tooltip.Root>
    <Tooltip.Trigger>
      <div>
        <Button on:click={toggleMode} variant="link" size="icon">
          {#if $mode === 'light'}
            <Sun
              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-foreground"
            />
          {:else}
            <Moon
              class="h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-foreground"
            />
          {/if}
        </Button>
      </div>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>Toggle theme color</p>
    </Tooltip.Content>
  </Tooltip.Root>
</div>

And issue gone (also #21, which as stated should go to shadcn-svelte lib, was fixed).

[fjlein]

The If block fixes the issue for me as well! Thank you for the Update!

Although I don't know the reason is for that.

[shimkiv]

@fjlein, it looks like the shadcn-svelte issue handling click + toggling the icons. I created one for that repo just in case. We probably can close this one.