how to wait for local store value in <svelte:head> in sveltekit

Question

I read this answer about how to wait for component render but it is not working in case of svelte:head

this is my code

<svelte:head>

    {#if $theme === 'dark'}
        <link rel="stylesheet" href="{assets}/smui.css" />
        <link rel="stylesheet" href="{assets}/smui-dark.css" media="screen" />
    {:else if $theme === 'light'}
        <link rel="stylesheet" href="{assets}/smui.css" />
    {:else}
        <!-- SMUI Styles -->
        <link rel="stylesheet" href="{assets}/smui.css" media="(prefers-color-scheme: light)" />
        <link
            rel="stylesheet"
            href="{assets}/smui-dark.css"
            media="screen and (prefers-color-scheme: dark)"
        />
    {/if}

the issue is that the site will load with the last option (else) and then will choose the first or second after reading the store.

this leads to site flicker. so how do I force the site t wait for the value?

Answer 1

Assuming you control these stylesheets, use @media (prefers-color-scheme: dark) { in native css.

For example:

@media (prefers-color-scheme: light) {
  .coolClass {
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .coolClass {
    background-color: black;
  }
}

As mentioned in a comment, your current solution won't work as this type of rendering is very discouraged in svelte.

In your case, wrap your dark stylesheet in @media (prefers-color-scheme: dark) {} and keep your spreadsheet normal, since this is your import order in your HTML