On gists

Vue composition - theme selector

Vue.js

ThemeSelection.js Raw #

import { ref, computed } from 'vue';

const theme = ref('light');

export function useThemeSelection() {
    const getTheme = () => theme.value;
    const setTheme = v => {
        theme.value = v;
    };

    const selectedTheme = computed({
        get: () => getTheme(),
        set: newTheme => setTheme(newTheme),
    });

    return {
        theme,
        selectedTheme,
    };
}

ThemeSelector.vue Raw #

<template>
    <div> <!-- lze oboji ;) -->
        <select @change="handleChange" v-model="theme">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
        </select>
        <select @change="handleChange" v-model="selectedTheme">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
        </select>
    </div>
</template>

<script setup>
import { useThemeSelection } from '../composables/ThemeSelection';

const { selectedTheme, theme } = useThemeSelection();
const handleChange = event => {
    const newTheme = event.target.value;
    theme.value = newTheme; // Set the new theme
};
</script>

<style lang="scss" scoped></style>

HomeView.vue Raw #

<template>
    <div class="settings">
        <div class="settings-row">
            <ThemeSelector />
            theme {{ theme }}
            <div :class="selectedTheme">Here's how the {{ selectedTheme }} theme looks like.</div>
        </div>
    </div>
</template>

<script setup>
import { useThemeSelection } from '../composables/ThemeSelection';
import ThemeSelector from '../components/ThemeSelector.vue';

const { selectedTheme, theme } = useThemeSelection();
</script>

<style>
.light {
    background-color: #fff;
    color: #000;
}
.dark {
    background-color: #000;
    color: #fff;
}
.green {
    background-color: green;
    color: #fff;
}
.red {
    background-color: red;
    color: #fff;
}
</style>