fix: current color mode

Saving the current `color mode` in a cookie to avoid `hydration issues`,
as this way the `server` already knows the current `color mode`.

It was necessary to use `useCookie()` to save the `color mode`
instead of the `storage setting` of `nuxtjs/color-mode`, as
the cookie value otherwise will be applied to the current `/path`.
Resulting in different `color modes` for different `paths.

See: nuxt-modules/color-mode#301

Author: marcel-bitfly

frontend/components/bc/BcThemeToggle.vue

@@ -136,7 +136,9 @@ const { t: $t } = useTranslation()
       <span class="main-footer__meta_seperator">
         |
       </span>
-      <BcThemeToggle />
+      <ClientOnly>
+        <BaseColormode />
+      </ClientOnly>
     </p>
   </footer>
 </template>

frontend/components/bc/footer/BcFooterMain.vue

@@ -9,6 +9,7 @@ type CookieName
     | 'bc-cookies-preference'
     | 'bc-user-dashboards'
     | 'bc-validator-dashboard-key'
+    | 'theme'
 
 // for now without the other `type overload` there is no way to use
 // `readonly` feature of `useCookieNuxt` (we might adapt this if needed)

frontend/composables/useBcCookie.ts

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const cookie = useBcCookie<'dark' | 'light'>('theme')
+colorMode.preference = cookie.value || 'dark'
+const handleUpdate = () => {
+  cookie.value = colorMode.preference as 'dark' | 'light'
+}
+</script>
+
+<template>
+  <BaseSwitch
+    v-model="colorMode.preference"
+    class="w-fit"
+    :values="[
+      {
+        label: $t('base.footer.color_mode.light'),
+        key: 'light',
+      },
+      {
+        label: $t('base.footer.color_mode.dark'),
+        key: 'dark',
+      },
+    ]"
+    :class-list="{
+      trackItem: 'p-md +py-md +px-lg border border-transparent rounded-4xl text-gray-600 dark:text-gray-400 has-checked:text-black has-checked:dark:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-brand-300',
+      track: 'border border-gray-100 dark:border-gray-900 flex gap-md [&>*]:grow text-center bg-white dark:bg-gray-950 rounded-4xl shadow-[0_1px_0.5px_0_rgba(255,255,255,0.08)_inset,0-1px_0_0_rgba(255,255,255,0.18)_inset]',
+      thumb: 'bg-gray-50 dark:bg-gray-800 rounded-4xl shadow-[0_2px_2px_0_rgba(0,0,0,0.25),_0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
+    }"
+    screenreader-title="base.footer.color_mode.title"
+    @update:model-value="handleUpdate"
+  >
+    <template #light=" { label } ">
+      <BaseIcon name="sun" />
+      <span class="sr-only">{{ label }}</span>
+    </template>
+    <template #dark=" { label } ">
+      <BaseIcon name="moon" />
+      <span class="sr-only">{{ label }}</span>
+    </template>
+  </BaseSwitch>
+</template>
+
+<style scoped></style>

frontend/layers/base/app/components/BaseColormode.vue

@@ -12,34 +12,38 @@ const { values } = defineProps<{
   screenreaderTitle: TranslationInput,
   values: T,
 }>()
-const idFirstValue = useId()
-const idSecondValue = useId()
+const id = useId()
 const name = useId()
-const modelValue = defineModel<typeof values[number]['key']>()
+const modelValue = defineModel<typeof values[number]['key']>({ required: true })
+const defaultValue = modelValue.value
 const { t: $t } = useTranslation()
-const thumb = useTemplateRef('thumb')
+const thumbs = useTemplateRef('thumb')
 const track = useTemplateRef('track')
 
 const moveThumb = () => {
+  // console.log('👉', thumbs.value)
   const activeTrackItem = track.value?.querySelector(':has(input[type="radio"]:checked)')
+  const thumb = thumbs.value?.[0]
   if (!activeTrackItem) return
-  if (!thumb.value) return
+  if (!thumb) return
 
-  const { x: initialX } = thumb.value.getBoundingClientRect()
+  const { x: initialX } = thumb.getBoundingClientRect()
   const { x } = activeTrackItem.getBoundingClientRect()
 
   // this should rather have been done via view transition api
   // but it currently lacks `firefox support`
   // and also there was a flickering issue
-  const animation = thumb.value.animate([ {
+  const animation = thumb.animate([ {
     transform: `translateX(${x - initialX}px)`,
   } ],
   { duration: 180 },
   )
   return animation.finished.then(() => {
-    activeTrackItem.appendChild(thumb.value!)
+    if (!thumb) return
+    activeTrackItem.appendChild(thumb)
   })
 }
+
 watch(modelValue, () => {
   moveThumb()
 })
@@ -56,55 +60,36 @@ watch(modelValue, () => {
       v-bind="$attrs"
     >
       <label
-        :for="idFirstValue"
+        v-for="(value, index) in values"
+        :key="value.key"
+        :for="`${id}-${index}`"
         :class="classList?.trackItem"
         class="relative"
       >
         <span class="relative z-10">
           <slot
-            name="first"
-            :label="values[0]?.label"
+            :name="value.key"
+            :label="values[index]?.label"
           >
-            {{ values[0]?.label }}
+            {{ values[index]?.label }}
           </slot>
         </span>
         <input
-          :id="idFirstValue"
+          :id="`${id}-${index}`"
           v-model="modelValue"
-          :value="values[0]?.key"
+          :value="values[index]?.key"
           type="radio"
           class="sr-only"
           :name
         >
         <span
+          v-if="value.key === defaultValue"
           ref="thumb"
           class="absolute inset-[0] z-0"
           aria-hidden="true"
           :class="classList?.thumb"
         />
       </label>
-      <label
-        class="relative"
-        :class="classList?.trackItem"
-        :for="idSecondValue"
-      >
-        <span class="relative z-10">
-          <slot
-            name="second"
-            :label="values[1]?.label"
-          >
-            {{ values[1]?.label }}
-          </slot>
-        </span>
-        <input
-          :id="idSecondValue"
-          v-model="modelValue"
-          :value="values[1]?.key"
-          class="sr-only"
-          type="radio"
-          :name
-        >
-      </label>
     </div>
   </fieldset>
 </template>

frontend/layers/base/app/components/BaseSwitch.vue

@@ -40,7 +40,6 @@ const resourceLinks: Link[] = [
     href: 'https://status.beaconcha.in/', icon: 'circle-check-filled', text: $t('base.footer.resources.links.site_status'),
   },
 ]
-const colorMode = useColorMode()
 </script>
 
 <template>
@@ -169,35 +168,9 @@ const colorMode = useColorMode()
             />
           </li>
         </ul>
-        <BaseSwitch
-          v-model="colorMode.value"
-          class="w-fit -ml-[1px]"
-          :values="[
-            {
-              label: $t('base.footer.color_mode.light'),
-              key: 'light',
-            },
-            {
-              label: $t('base.footer.color_mode.dark'),
-              key: 'dark',
-            },
-          ]"
-          :class-list="{
-            trackItem: 'p-md +py-md +px-lg border border-transparent rounded-4xl text-gray-600 dark:text-gray-400 has-checked:text-black has-checked:dark:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-brand-300',
-            track: 'border border-gray-100 dark:border-gray-900 flex gap-md [&>*]:grow text-center bg-white dark:bg-gray-950 rounded-4xl shadow-[0_1px_0.5px_0_rgba(255,255,255,0.08)_inset,0-1px_0_0_rgba(255,255,255,0.18)_inset]',
-            thumb: 'bg-gray-50 dark:bg-gray-800 rounded-4xl shadow-[0_2px_2px_0_rgba(0,0,0,0.25),_0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
-          }"
-          screenreader-title="base.footer.color_mode.title"
-        >
-          <template #first=" { label } ">
-            <BaseIcon name="sun" />
-            <span class="sr-only">{{ label }}</span>
-          </template>
-          <template #second=" { label } ">
-            <BaseIcon name="moon" />
-            <span class="sr-only">{{ label }}</span>
-          </template>
-        </BaseSwitch>
+        <BaseColormode
+          class="-ml-[1px]"
+        />
       </div>
     </div>
 

frontend/layers/base/app/components/TheFooter.vue

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   /* eslint-disable perfectionist/sort-objects  -- as there is a conflict with `nuxt specific eslint rules` */
   modules: [
     '@nuxt/icon',
+    '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
     'reka-ui/nuxt',
   ],
@@ -22,6 +23,16 @@ export default defineNuxtConfig({
       scrollBehaviorType: 'smooth',
     },
   },
+  colorMode: {
+    fallback: 'dark',
+    preference: 'dark',
+    dataValue: 'theme',
+    storageKey: 'theme',
+    // currently cookie storage is only applying the theme on the current path
+    // See open PR: https://github.com/nuxt-modules/color-mode/pull/301
+    // storage: 'cookie',
+    storage: 'localStorage',
+  },
   vite: {
     plugins: [ tailwindcss() ],
   },

frontend/layers/base/nuxt.config.ts

@@ -1,5 +1,6 @@
 {
     "dependencies": {
+        "@nuxtjs/color-mode": "^3.5.2",
         "@tailwindcss/vite": "^4.1.12",
         "reka-ui": "^2.5.0",
         "tailwindcss": "^4.1.12"

frontend/layers/base/package.json

@@ -28,7 +28,6 @@ export default defineNuxtConfig({
   /* eslint-disable perfectionist/sort-objects  -- as there is a conflict with `nuxt specific eslint rules` */
   modules: [
     '@nuxtjs/i18n',
-    '@nuxtjs/color-mode',
     [
       '@pinia/nuxt',
       { storesDirs: [ './stores/**' ] },
@@ -40,12 +39,6 @@ export default defineNuxtConfig({
   ],
   ssr: process.env.ENABLE_SSR !== 'FALSE',
   devtools: { enabled: true },
-  colorMode: {
-    fallback: 'dark',
-    preference: 'dark',
-    dataValue: 'theme',
-    storageKey: 'theme',
-  },
   runtimeConfig: {
     private: {
       apiServer: process.env.PRIVATE_API_SERVER,