40 lines
1.1 KiB
Plaintext
40 lines
1.1 KiB
Plaintext
<template>
|
|
<div class="aa-themesw">
|
|
<div
|
|
v-for="m in modes"
|
|
:key="m.value"
|
|
class="aa-themesw-opt"
|
|
:class="{ 'is-active': mode === m.value }"
|
|
@click="emit('update:mode', m.value)"
|
|
>
|
|
<span class="aa-themesw-dot" :class="m.value"></span>{{ m.label }}
|
|
</div>
|
|
<div class="aa-themesw-colors">
|
|
<span
|
|
v-for="c in brands"
|
|
:key="c"
|
|
class="aa-themesw-color"
|
|
:class="{ 'is-active': brand === c }"
|
|
:style="{ background: c }"
|
|
@click="emit('update:brand', c)"
|
|
></span>
|
|
</div>
|
|
<div class="aa-themesw-label">品牌色：{{ brand }}（应用于 CSS 变量 --brand 实时预览）</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
mode: { type: String, default: 'light' },
|
|
brand: { type: String, default: '#2F54EB' }
|
|
});
|
|
const emit = defineEmits(['update:mode', 'update:brand']);
|
|
const modes = [
|
|
{ value: 'light', label: '浅色' },
|
|
{ value: 'dark', label: '深色' }
|
|
];
|
|
const brands = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];
|
|
</script>
|
|
|
|
<style src="./ThemeSwitcher.css"></style>
|