<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>