refactor: migrate to @nuxtjs/color-mode

Author: danielroe

app/app.vue

@@ -3,18 +3,13 @@ import { useEventListener } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
-const { settings } = useSettings()
 
 // Initialize accent color before hydration to prevent flash
 initAccentOnPrehydrate()
 
 const isHomepage = computed(() => route.path === '/')
-const theme = settings.value.theme === 'dark' ? 'dark' : 'light'
 
 useHead({
-  htmlAttrs: {
-    'data-theme': 'dark',
-  },
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
   },

app/components/SettingsMenu.vue

@@ -3,6 +3,7 @@ import { onKeyStroke, onClickOutside } from '@vueuse/core'
 
 const { settings } = useSettings()
 const { locale, locales, setLocale } = useI18n()
+const colorMode = useColorMode()
 
 const availableLocales = computed(() =>
   locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
@@ -138,6 +139,32 @@ onKeyStroke(',', e => {
             </span>
           </button>
 
+          <!-- Theme selector -->
+          <div class="pt-2 mt-2 border-t border-border">
+            <div class="px-2 py-1">
+              <label for="theme-select" class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('settings.theme') }}
+              </label>
+            </div>
+            <div class="px-2 py-1">
+              <select
+                id="theme-select"
+                :value="colorMode.preference"
+                class="w-full bg-bg-muted border border-border rounded-md px-2 py-1.5 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-fg/50 cursor-pointer"
+                @change="
+                  colorMode.preference = ($event.target as HTMLSelectElement).value as
+                    | 'light'
+                    | 'dark'
+                    | 'system'
+                "
+              >
+                <option value="system">{{ $t('settings.theme_system') }}</option>
+                <option value="light">{{ $t('settings.theme_light') }}</option>
+                <option value="dark">{{ $t('settings.theme_dark') }}</option>
+              </select>
+            </div>
+          </div>
+
           <!-- Language selector -->
           <div class="pt-2 mt-2 border-t border-border">
             <div class="px-2 py-1">

app/composables/useSettings.ts

@@ -14,14 +14,11 @@ export interface AppSettings {
   includeTypesInInstall: boolean
   /** Accent color theme */
   accentColorId: AccentColorId | null
-  /** Theme of site, default dark */
-  theme: 'dark' | 'light'
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
   relativeDates: false,
   includeTypesInInstall: true,
-  theme: 'dark',
   accentColorId: null,
 }
 

i18n/locales/en.json

@@ -43,6 +43,10 @@
   "settings": {
     "relative_dates": "Relative dates",
     "include_types": "Include {'@'}types in install",
+    "theme": "Theme",
+    "theme_light": "Light",
+    "theme_dark": "Dark",
+    "theme_system": "System",
     "language": "Language",
     "help_translate": "Help translate npmx"
   },

nuxt.config.ts

@@ -31,8 +31,16 @@ export default defineNuxtConfig({
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
+    '@nuxtjs/color-mode',
   ],
 
+  colorMode: {
+    preference: 'system',
+    fallback: 'dark',
+    dataValue: 'theme',
+    storageKey: 'npmx-color-mode',
+  },
+
   css: ['vue-data-ui/style.css'],
 
   devtools: { enabled: true },

package.json

@@ -31,6 +31,7 @@
     "@nuxt/a11y": "1.0.0-alpha.1",
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/scripts": "^0.13.2",
+    "@nuxtjs/color-mode": "^4.0.0",
     "@nuxtjs/html-validator": "^2.1.0",
     "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "^3.21.0",