Reacting to changes when switching from dark to light mode in Svelte

I am trying to display a certain message when theme changes from dark to light. To determine whether theme is light or dark, I look at document.documentElement.classList and check if it contains dark, i.e. something like document.documentElement.classList.contains("dark").

However, when I try to bind a value reactively in the script:

<script>
$: isDarkMode = document.documentElement.classList.contains("dark")
</script>

I receive a 500 internal error. I do not know what could be the source of the error.

Below I provide all the code, should it prove to be helpful in any way.

<script lang="ts">
  function toggleTheme() {
    if (document.documentElement.classList.contains("dark")) {
      document.documentElement.classList.remove("dark");
    } else {
      document.documentElement.classList.add("dark");
    }
  }

  $: isDarkMode = document.documentElement.classList.contains("dark");
</script>

<button on:click={toggleTheme}>Change theme</button>

{#if isDarkMode}
  <p>Welcome to the dark side!</p>
{:else}
  <p>Please have your health checked</p>
{/if}

Note: toggleTheme works as expected. In the beginning, I assumed the problem had something to do with accessing the document, but that does not seem to be the case.

Does someone know what is causing the internal error and how to fix it? Thank you for the help.

The problem probably is accessing the document. Usage within the function does not matter because that can only be triggered in the browser where the document exists. If there is server-side rendering, any usage that happens during initial rendering will cause errors.

The logic seems backward and the reactivity would not work, as document is not reactive. Would instead use a local flag and set the class depending on that instead. The local value will be reactive as it is declared in the component.

You can guard against SSR issues in different ways, if you are using SvelteKit you can use the browser flag. E.g.

<script>
  import { browser } from '$app/environment';

  let isDarkMode = true;
  $: if (browser) {
    document.documentElement.classList.toggle('dark', isDarkMode);
  }
</script>
<button on:click={() => isDarkMode = !isDarkMode}>Change theme</button>

If not using SvelteKit, you could e.g. set some flag to true in onMount.