PronounsPage/components/ModeSwitch.vue

<template>
    <div class="btn-group" role="group">
        <button
            v-for="(buttonIcon, buttonMode) in modes"
            type="button"
            :class="['btn', 'btn-sm', mode === buttonMode ? 'btn-primary' : 'btn-outline-primary']"
            @click="mode = buttonMode"
        >
            <Icon :v="buttonIcon" />
            <T>mode.{{ buttonMode }}</T>
        </button>
    </div>
</template>

<script lang="ts">
import dark from '../plugins/dark.ts';
import type { Mode } from '../plugins/dark.ts';

export default dark.extend({
    data() {
        return {
            mode: 'automatic' as Mode,
            modes: {
                light: 'sun',
                automatic: 'eclipse',
                dark: 'moon',
            },
        };
    },
    watch: {
        mode() {
            this.$eventHub.$emit('mode-changed', this.mode);
            this.setMode(this.mode);
            this.isDark = this.detectDark();
        },
    },
    mounted() {
        this.mode = this.getMode();

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.isDark = this.detectDark());

        this.$eventHub.$on('mode-changed', (mode: Mode) => {
            if (mode !== this.mode) {
                this.mode = mode;
            }
        });
    },
});
</script>