Patch auto dark / light mode

s-complex · Jan 7, 2024 · 98df229 · 98df229
1 parent 6a8a1ce
commit 98df229
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,20 @@
 <script setup lang="ts">
+import { useTheme } from 'vuetify';
+import { onMounted } from 'vue';
 
+const vuetifyTheme = useTheme()
+
+function toggleTheme(themeName?: string) {
+  vuetifyTheme.global.name.value = themeName ?? (vuetifyTheme.global.current.value.dark ? 'light' : 'dark')
+}
+
+onMounted(() => {
+  const darkMatch = matchMedia('(prefers-color-scheme: dark)')
+  toggleTheme(darkMatch.matches ? 'dark' : 'light')
+  darkMatch.addEventListener('change', (event) =>
+    toggleTheme(event.matches ? 'dark' : 'light')
+  )
+})
 </script>
 
 <template>

diff --git a/src/vuetify.ts b/src/vuetify.ts
@@ -6,8 +6,6 @@ const vuetify = createVuetify({
     themes: {
       light: {
         colors: {
-          background: "#ECEFF1",
-          surface: "#FFFFFF",
           primary: "#2196F3",
           secondary: "#03A9F4",
           blockquote: "#ECEFF1",
@@ -16,8 +14,6 @@ const vuetify = createVuetify({
       },
       dark: {
         colors: {
-          background: "#263238",
-          surface: "#37474F",
           primary: "#2196F3",
           secondary: "#03A9F4",
           blockquote: "#455A64",