feat: system preference color mode

Author: HigherOrderLogic

app/components/cd.vue

@@ -1,5 +1,10 @@
+<script setup lang="ts">
+const route = useRoute()
+const toPath = computed(() => route.path.split('/').slice(0, -1).join('/') || '/')
+</script>
+
 <template>
-  <nuxt-link v-if="$route.path !== '/'" :to="$route.path.split('/').slice(0, -1).join('/') || '/'">
+  <nuxt-link v-if="$route.path !== '/'" :to="toPath">
     cd ..
   </nuxt-link>
 </template>

app/components/theme-toggle.vue

@@ -1,8 +1,23 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+function changePreference() {
+  if (colorMode.preference === 'light') {
+    colorMode.preference = 'dark'
+  } else if (colorMode.preference === 'dark') {
+    colorMode.preference = 'system'
+  } else {
+    colorMode.preference = 'light'
+  }
+}
+</script>
+
 <template>
   <color-scheme>
     <button
-      class="i-mdi-weather-sunny dark:i-mdi-weather-night font-size-[24px]"
-      @click="$colorMode.preference = $colorMode.preference === 'dark' ? 'light' : 'dark'"
+      class="font-size-[24px]"
+      :class="[$colorMode.preference === 'system' ? 'i-mdi-monitor' : 'i-mdi-weather-sunny dark:i-mdi-weather-night']"
+      @click="changePreference"
     />
     <template #placeholder>
       <div class="i-mdi-weather-sunny font-size-[24px]" />

app/layouts/default.vue

@@ -14,7 +14,7 @@
 <style lang="scss" module>
 .dashed_link {
   a {
-  --at-apply: "underline-dashed hover:underline-solid"
-}
+    --at-apply: "underline-dashed hover:underline-solid"
+  }
 }
 </style>

eslint.config.mjs

@@ -12,6 +12,7 @@ export default withNuxt(antfu({
     'curly': ['error', 'all'],
     'no-console': 'warn',
 
+    'style/brace-style': ['error', '1tbs'],
     'style/max-len': ['error', { code: 120 }],
 
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],