75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script lang="ts">
|
|
import {Options, Vue} from 'vue-class-component';
|
|
import {reactive} from 'vue';
|
|
import {Watch} from 'vue-property-decorator';
|
|
|
|
const sharedDarkMode = reactive({
|
|
internalDarkMode: false,
|
|
internalLoaded: false,
|
|
|
|
get darkMode() {
|
|
if (!this.internalLoaded) {
|
|
this.internalDarkMode = localStorage.getItem('darkmode') === ('' + true);
|
|
this.internalLoaded = true;
|
|
}
|
|
return this.internalDarkMode;
|
|
},
|
|
|
|
set darkMode(value: boolean) {
|
|
this.internalDarkMode = value;
|
|
localStorage.setItem('darkmode', '' + this.internalDarkMode);
|
|
},
|
|
});
|
|
|
|
@Options({
|
|
name: 'BootstrapThemeSwitch',
|
|
})
|
|
export default class BootstrapThemeSwitch extends Vue {
|
|
get sharedDarkMode() {
|
|
return sharedDarkMode;
|
|
}
|
|
|
|
mounted(): void {
|
|
this.onThemeChanged(this.dark);
|
|
}
|
|
|
|
get dark(): boolean {
|
|
return this.sharedDarkMode.darkMode;
|
|
}
|
|
|
|
set dark(value: boolean) {
|
|
this.sharedDarkMode.darkMode = value;
|
|
}
|
|
|
|
@Watch('dark', {immediate: true})
|
|
private onThemeChanged(isDarkMode: boolean): void {
|
|
if (isDarkMode) {
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
} else {
|
|
document.documentElement.removeAttribute('data-bs-theme');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="form-check form-switch light-dark-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" v-model="dark">
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.light-dark-switch .form-check-input {
|
|
--bs-form-switch-bg: url(assets/sun.svg) !important;
|
|
}
|
|
|
|
.light-dark-switch .form-check-input:focus {
|
|
--bs-form-switch-bg: url(assets/sun_focus.svg) !important;
|
|
}
|
|
|
|
.light-dark-switch .form-check-input:checked,
|
|
.light-dark-switch .form-check-input:checked:focus {
|
|
--bs-form-switch-bg: url(assets/moon.svg) !important;
|
|
}
|
|
</style>
|