extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-06-27 21:21:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Toggle dark mode when prefers-color-scheme changes

Browse Source
This commit is contained in:
Gabe Cook 2023-05-10 02:38:51 -05:00 committed by Bastien Wirtz
parent f0f9f0a017
commit 6cfa1643b4
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/DarkMode.vue
View File

@ -47,6 +47,7 @@ export default {
} }
this.isDark = this.getIsDark(); this.isDark = this.getIsDark();
this.$emit("updated", this.isDark); this.$emit("updated", this.isDark);
this.watchIsDark();
}, },
methods: { methods: {
toggleTheme: function () { toggleTheme: function () {
@ -81,6 +82,13 @@ export default {
]; ];
return values[this.mode]; return values[this.mode];
}, },
watchIsDark: function () {
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
this.isDark = this.getIsDark();
this.$emit("updated", this.isDark);
});
},
}, },
}; };
</script> </script>