SSR - Hydration text mismatch

[imcm7]

On server it not read color because color is stored in local storage and not cookie

[RamaHerbin]

I've got the same issue here

[Kolobok12309]

You can try use ClientOnly for components that use theme variable like this

<div class="color-theme-switcher">
  <ClientOnly>
    <SfIcon
      :icon="iconName"
      class="color-theme-switcher__icon"
    />
  
    <span class="color-theme-switcher__text">
      Theme
    </span>
  
    <SfToggleSwitch
      v-model="isDark"
      class="color-theme-switcher__toggler"
    />
  
    <template #placeholder>
      <div class="color-theme-switcher__placeholder" />
    </template>
  </ClientOnly>
</div>