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>
import dark from '../plugins/dark.js';

export default {
    mixins: [dark],
    data() {
        return {
            mode: 'automatic',
            isDark: false,
            modes: {
                light: 'sun',
                automatic: 'eclipse',
                dark: 'moon',
            },
        };
    },
    watch: {
        mode() {
            this.$eventHub.$emit('mode-changed', this.mode);
            this.setMode(this.mode);
            this.isDark = this.detectDark();
        },
        isDark() {
            this.setIsDark(this.isDark);
            this.$store.commit('setDarkMode', this.isDark);
        },
    },
    mounted() {
        if (!process.client) {
            return false;
        }

        this.mode = this.getMode();
        this.isDark = this.detectDark();

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

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