VueJS: Color scheme switcher

color-scheme.less

.light-theme() {
    --display-light: none;
    --display-dark: block;

    --color-background: #ddd;
    --color-foreground: #333;
}

.dark-theme() {
    --display-light: block;
    --display-dark: none;

    --color-background: #333;
    --color-foreground: #ddd;
}

ColorSchemeSwitcher.vue

<template>
    <div id="scheme-switch">
        <button type="button" id="scheme-switch--light" @click="setLightTheme">
            <slot name="light">Light theme</slot>
        </button>
        <button type="button" id="scheme-switch--dark" @click="setDarkTheme">
            <slot name="dark">Dark theme</slot>
        </button>
    </div>
</template>

<script setup>
const theme = localStorage.getItem('theme')
theme === 'light' && setLightTheme()
theme === 'dark' && setDarkTheme()

function setLightTheme() {
    localStorage.setItem('theme', 'light')
    document.body.classList.remove('dark')
    document.body.classList.add('light')
}
function setDarkTheme() {
    localStorage.setItem('theme', 'dark')
    document.body.classList.remove('light')
    document.body.classList.add('dark')
}
</script>

<style scoped lang="less">
#scheme-switch {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-foreground);
    border-radius: 3px 0 0 0;
    font-size: .8rem;

    button {
        &, &:hover, &:focus {
            padding: 3px 5px;
            background-color: transparent;
            color: var(--color-background);
            border: none;
            outline: none;
        }
    }

    &--light {
        display: var(--display-light);
    }
    &--dark {
        display: var(--display-dark);
    }
}
</style>

styles.less

@import (reference) './color-scheme';

@media (prefers-color-scheme: light) {
    :root {
        .light-theme();
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        .dark-theme();
    }
}

body {
    &.light {
        .light-theme();
    }
    &.dark {
        .dark-theme();
    }
}