Fix useColorMode hydration issues

Author: davidmyersdev

assets/css/tailwind.css

@@ -11,7 +11,8 @@
     --colors-primary: 59 130 246;
   }
 
-  .dark {
+  .dark,
+  [data-appearance=dark] {
     --layer-0-bg: 18 18 18;
     --layer-0-bg-hover: 39 39 42;
     --layer-0-bg-active: 39 39 42;
@@ -80,12 +81,14 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    .auto {
+    .auto,
+    [data-appearance=auto] {
       @apply dark;
     }
   }
 
-  .light {
+  .light,
+  [data-appearance=light] {
     --layer-0-bg: 244 244 245;
     --layer-0-bg-hover: 228 228 231;
     --layer-0-bg-active: 228 228 231;
@@ -154,12 +157,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    .auto {
+    .auto,
+    [data-appearance=auto] {
       @apply light;
     }
   }
 
-  .custom {
+  .custom,
+  [data-appearance=custom] {
     --layer-0-bg: 10 0 31;
     --layer-0-bg-hover: 21 0 44;
     --layer-0-bg-active: 32 2 58;

components/settings/Appearance.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 const { store } = useVuex()
-const { store: appearance } = useAppearance()
+const { storedValue: appearance } = useAppearance()
 
 const experimental = computed(() => store.state.settings.experimental)
 </script>

composables/useAppearance.ts

@@ -1,25 +1,46 @@
+const valueToSystem = {
+  auto: 'auto',
+  custom: 'dark',
+  dark: 'dark',
+  light: 'light',
+} as const
+
+export type AppearanceValue = keyof typeof valueToSystem
+
 const buildAppearance = () => {
-  const { store, system: resolved } = useColorMode({
+  const storedValue = useLocalStorage<AppearanceValue>('vueuse-color-scheme', 'auto', {
     initOnMounted: true,
-    modes: {
-      auto: 'auto',
-      october: 'dark october',
-      custom: 'custom',
+  })
+
+  watch(storedValue, () => {
+    if (!Object.keys(valueToSystem).includes(storedValue.value)) {
+      storedValue.value = 'auto'
+    }
+  })
+
+  useHead({
+    htmlAttrs: {
+      'data-appearance': storedValue,
     },
   })
 
   const system = computed(() => {
-    if (store.value === 'custom') {
-      // Todo: Remove this extra step by making the editor use CSS variables all the time.
+    // Todo: Remove this extra step by making the editor use CSS variables all the time.
+    if (storedValue.value === 'custom') {
       return 'dark'
     }
 
-    if (store.value === 'october') {
+    if (storedValue.value === 'dark') {
       return 'dark'
     }
 
-    return store.value
+    if (storedValue.value === 'light') {
+      return 'light'
+    }
+
+    return 'auto'
   })
+
   const isAuto = computed(() => system.value === 'auto')
   const isDark = computed(() => system.value === 'dark')
   const isLight = computed(() => system.value === 'light')
@@ -28,8 +49,7 @@ const buildAppearance = () => {
     isAuto,
     isDark,
     isLight,
-    resolved,
-    store,
+    storedValue,
     system,
   }
 }
@@ -40,15 +60,5 @@ export type SystemAppearance = 'auto' | 'dark' | 'light'
 export const appearanceKey = Symbol('appearance') as InjectionKey<Appearance>
 
 export const useAppearance = () => {
-  const injected = inject(appearanceKey, undefined)
-
-  if (injected) {
-    return injected
-  }
-
-  const appearance = buildAppearance()
-
-  provide(appearanceKey, appearance)
-
-  return appearance
+  return injectOrProvide(appearanceKey, buildAppearance)
 }

layouts/dashboard.vue

@@ -10,7 +10,7 @@ import { bindGlobal } from '#root/src/common/keybindings'
 const { doc } = useDocs()
 const { isZen, toggleZen } = useZen()
 const { showMenu, showMeta, toggleMenu, toggleMeta } = useLayout()
-const { store: appearance, isAuto, isDark, isLight } = useAppearance()
+const { storedValue: appearance, isAuto, isDark, isLight } = useAppearance()
 const isPrimaryGutterShowing = computed(() => !isZen.value && showMenu.value)
 const isSecondaryGutterShowing = computed(() => !isZen.value && showMeta.value && !!doc.value)
 

nuxt.config.ts

@@ -30,7 +30,7 @@ export default defineNuxtConfig({
   app: {
     head: {
       htmlAttrs: {
-        class: 'auto scroll-smooth scroll-pt-4 layer-0',
+        class: 'scroll-smooth scroll-pt-4 layer-0',
         lang: 'en',
       },
       link: [