feat: set color scheme meta data value based on user settings (#689)

Author: thasmo

app/app.vue

@@ -21,6 +21,16 @@ const localeMap = locales.value.reduce(
   {} as Record<string, Directions>,
 )
 
+const darkMode = usePreferredDark()
+const colorMode = useColorMode()
+const colorScheme = computed(() => {
+  return {
+    system: darkMode ? 'dark light' : 'light dark',
+    light: 'only light',
+    dark: 'only dark',
+  }[colorMode.preference]
+})
+
 useHead({
   htmlAttrs: {
     'lang': () => locale.value,
@@ -30,6 +40,7 @@ useHead({
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
   },
+  meta: [{ name: 'color-scheme', content: colorScheme }],
 })
 
 if (import.meta.server) {

lunaria/styles.ts

@@ -301,8 +301,6 @@ export const CustomStyles = html`
       --ln-color-missing: var(--ln-color-black);
       --ln-color-outdated: #fb923c;
       --ln-color-done: #c084fc;
-  
-      color-scheme: dark;
     }
   
     html {