refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/components/settings/SettingsColorMode.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ColorMode } from '~/composables/settings'
+
+const colorMode = useColorMode()
+
+function setColorMode(mode: ColorMode) {
+  colorMode.preference = mode
+}
+
+const modes = [
+  {
+    icon: 'i-ri-moon-line',
+    label: 'settings.interface.dark_mode',
+    mode: 'dark',
+  },
+  {
+    icon: 'i-ri-sun-line',
+    label: 'settings.interface.light_mode',
+    mode: 'light',
+  },
+  {
+    icon: 'i-ri-computer-line',
+    label: 'settings.interface.system_mode',
+    mode: 'system',
+  },
+] as const
+</script>
+
+<template>
+  <section space-y-2>
+    <h2 id="interface-cm" font-medium>
+      {{ $t('settings.interface.color_mode') }}
+    </h2>
+    <div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
+      <button
+        v-for="{ icon, label, mode } in modes"
+        :key="mode"
+        type="button"
+        btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
+        :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
+        :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
+        @click="setColorMode(mode)"
+      >
+        <span :class="`${icon}`" />
+        {{ $t(label) }}
+      </button>
+    </div>
+  </section>
+</template>