56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup>
|
|
import { useLayout } from '../composables/useLayout'
|
|
import { onMounted } from 'vue'
|
|
|
|
const { primaryColors, surfaces, primary, surface, isDarkMode, updateColors, toggleDarkMode } =
|
|
useLayout()
|
|
|
|
onMounted(() => {
|
|
toggleDarkMode()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="config-panel hidden">
|
|
<div class="config-section">
|
|
<div>
|
|
<span class="config-label">Primary</span>
|
|
<div class="config-colors">
|
|
<button
|
|
v-for="pc of primaryColors"
|
|
:key="pc.name"
|
|
type="button"
|
|
:title="pc.name"
|
|
:class="['color-button', { selected: primary === pc.name }]"
|
|
:style="{ backgroundColor: pc.palette['500'] }"
|
|
@click="updateColors('primary', pc.name)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="config-label">Surface</span>
|
|
<div class="config-colors">
|
|
<button
|
|
v-for="s of surfaces"
|
|
:key="s.name"
|
|
type="button"
|
|
:title="s.name"
|
|
:class="[
|
|
'color-button',
|
|
{
|
|
selected: surface
|
|
? surface === s.name
|
|
: isDarkMode
|
|
? s.name === 'zinc'
|
|
: s.name === 'slate',
|
|
},
|
|
]"
|
|
:style="{ backgroundColor: s.palette['500'] }"
|
|
@click="updateColors('surface', s.name)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|