feat(ui): ✨ add darkmode

components/toolbar/slider/DarkModeSwitch.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { Themes } from '~/composables/darkmode'
+import { themePreference } from '~/composables/darkmode'
+
+const { t } = useI18n()
+
+function changeTheme(theme: Themes) {
+  themePreference.value = theme
+}
+</script>
+
+<template>
+  <div class="flex flex-row space-x-1 text-xl">
+    <div
+      class="i-uil:desktop cursor-pointer"
+      :class="{ 'text-gray-400 dark:text-gray-600': themePreference !== 'system' }"
+      :title="t('darkmode.system')"
+      @click="changeTheme('system')"
+    />
+    <div
+      class="i-uil:sun cursor-pointer"
+      :class="{ 'text-gray-400 dark:text-gray-600': themePreference !== 'light' }"
+      :title="t('darkmode.light')"
+      @click="changeTheme('light')"
+    />
+    <div
+      class="i-uil:moon cursor-pointer"
+      :class="{ 'text-gray-400 dark:text-gray-600': themePreference !== 'dark' }"
+      :title="t('darkmode.dark')"
+      @click="changeTheme('dark')"
+    />
+  </div>
+</template>

components/toolbar/slider/index.vue

@@ -24,6 +24,8 @@ watchEffect(() => {
       <ToolbarLogo v-model:show-slider="show" class="flex-grow-0" />
 
       <ToolbarSliderGeneralLinks />
+
+      <ToolbarSliderDarkModeSwitch />
     </div>
     <PMask v-model:show="show" />
   </div>

composables/darkmode/index.ts

@@ -0,0 +1,38 @@
+const themes = ['system', 'light', 'dark'] as const
+export type Themes = typeof themes[number]
+
+export const themePreference = useLocalStorage<Themes>('theme_preference', 'system', {
+  listenToStorageChanges: true,
+  serializer: {
+    read(raw): Themes {
+      return themes.includes(raw as any) ? (raw as Themes) : 'system'
+    },
+    write(value): string {
+      return value
+    },
+  },
+})
+
+export const isDark = computed(() =>
+  themePreference.value === 'system' ? usePreferredDark().value : themePreference.value === 'dark',
+)
+
+export function applyTheme() {
+  // Attention: only client has 'document' object
+  if (process.client) {
+    const html = document.documentElement
+    const metaTag = document.querySelector('meta[name="theme-color"]')
+    watchEffect(() => {
+      if (isDark.value) {
+        html.classList.add('dark')
+        if (metaTag)
+          metaTag.setAttribute('content', '#1f2937')
+      }
+      else {
+        html.classList.remove('dark')
+        if (metaTag)
+          metaTag.setAttribute('content', '#ffffff')
+      }
+    })
+  }
+}

plugins/darkmode.ts

@@ -0,0 +1,6 @@
+// plugins/theme.ts
+import { applyTheme } from '~/composables/darkmode'
+
+export default defineNuxtPlugin(() => {
+  applyTheme()
+})