53 lines
1.0 KiB
Vue
53 lines
1.0 KiB
Vue
<template>
|
|
<div class="darkToggle">
|
|
<span @click="toggleDarkmode">{{ darkmodeToggleIcon }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
darkmode: this.systemDarkModeEnabled()
|
|
};
|
|
},
|
|
methods: {
|
|
toggleDarkmode() {
|
|
this.darkmode = !this.darkmode;
|
|
document.body.className = this.darkmode ? "dark" : "light";
|
|
},
|
|
systemDarkModeEnabled() {
|
|
const computedStyle = window.getComputedStyle(document.body);
|
|
if (computedStyle["colorScheme"] != null) {
|
|
return computedStyle.colorScheme.includes("dark");
|
|
}
|
|
return false;
|
|
}
|
|
},
|
|
computed: {
|
|
darkmodeToggleIcon() {
|
|
return this.darkmode ? "🌝" : "🌚";
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.darkToggle {
|
|
height: 25px;
|
|
width: 25px;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
margin-bottom: 1.5rem;
|
|
margin-right: 2px;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|