Is there any issue if autoModeWatcher for both ssr and non-ssr are added in root +layout.svelte ?

[Haiz14]

On the website i am working at, some pages are server-rendered, some are client-rendered.

If i add autoModeWatcher in root +layout.svelte for both ssr and non ssr, will it cause any issue?

<script>
  import { onMount } from 'svelte';
  import { autoModeWatcher } from '@skeletonlabs/skeleton';
  onMount(() => {						 
    autoModeWatcher();
  })
</script>

<svelte:head>{@html '<script>(' + autoModeWatcher.toString() + ')();</script>'}</svelte:head>

[Haiz14]

I did use both, and everything seems to work fine on both csr and SSR pages.

[Hugos68]

Hey @Haiz14, since the autoModeWatcher runs in the head it will only work on the client. However, this is intended, as mode toggling always happens on the client, not the server.

So the the autoModeWatcher is both SSR and Client safe.

I also happen to notice you did:

  onMount(() => {						 
    autoModeWatcher();
  })

This can be removed, as the autoModeWatcher already runs inside the script tag within the head.

If you do encounter any issues, please let us know!

[Haiz14]

Selected light or dark mode is breaking on CSR pages. I think I would have to add onMount in all CSR pages.

• visit a non CSR pages change light mode
• then visit CSR pages, change dark mode
• on that same page, change mode back to light
• reload this CSR page, the selected mode is light, but displayed mode is dark.

[Hugos68]

Well it won't work on a non CSR page, you're disabling javascript, and you need javascript for the mode watcher. You were talking about SSR, disabling CSR is not an option if you want to use it.

[Haiz14]

Example of broken mode