diff options
-rw-r--r-- | src/components/DarkMode.vue | 8 |
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> |