This commit is contained in:
2022-01-10 00:50:09 +01:00
parent 2371907f54
commit 2937e7b974

View File

@@ -1,41 +1,36 @@
<template> <template>
<div class="darkToggle"> <div class="darkToggle">
<span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span> <span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
darkmode: this.supported darkmode: this.supported
} };
}, },
methods: { methods: {
toggleDarkmode() { toggleDarkmode() {
this.darkmode = !this.darkmode; this.darkmode = !this.darkmode;
document.body.className = this.darkmode ? 'dark' : 'light' document.body.className = this.darkmode ? "dark" : "light";
}, },
supported() { supported() {
const computedStyle = window.getComputedStyle(document.body) const computedStyle = window.getComputedStyle(document.body);
if (computedStyle['colorScheme'] != null) if (computedStyle["colorScheme"] != null)
return computedStyle.colorScheme.includes('dark') return computedStyle.colorScheme.includes("dark");
return false return false;
} }
}, },
computed: { computed: {
darkmodeToggleIcon() { darkmodeToggleIcon() {
return this.darkmode ? '🌝' : '🌚' return this.darkmode ? "🌝" : "🌚";
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.darkToggle { .darkToggle {
height: 25px; height: 25px;
@@ -54,4 +49,4 @@ export default {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
</style> </style>