aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
authorGabe Cook <gabe565@gmail.com>2023-05-10 02:38:51 -0500
committerBastien Wirtz <bastien.wirtz@gmail.com>2023-05-13 15:19:54 +0200
commit6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a (patch)
treea5e6f8d2b55bf57271c31185aaa9f36b8cca4cee /src/components
parentf0f9f0a017e341bc6bfb41ce82c66cd7c185c787 (diff)
downloadhomer-6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a.tar.gz
homer-6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a.tar.zst
homer-6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a.zip
Toggle dark mode when `prefers-color-scheme` changes
Diffstat (limited to 'src/components')
-rw-r--r--src/components/DarkMode.vue8
1 files changed, 8 insertions, 0 deletions
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 4318c22..f0f823d 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -47,6 +47,7 @@ export default {
47 } 47 }
48 this.isDark = this.getIsDark(); 48 this.isDark = this.getIsDark();
49 this.$emit("updated", this.isDark); 49 this.$emit("updated", this.isDark);
50 this.watchIsDark();
50 }, 51 },
51 methods: { 52 methods: {
52 toggleTheme: function () { 53 toggleTheme: function () {
@@ -81,6 +82,13 @@ export default {
81 ]; 82 ];
82 return values[this.mode]; 83 return values[this.mode];
83 }, 84 },
85
86 watchIsDark: function () {
87 matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
88 this.isDark = this.getIsDark();
89 this.$emit("updated", this.isDark);
90 });
91 },
84 }, 92 },
85}; 93};
86</script> 94</script>