--fontColor:'#fff'color: var(--fontColor);[data-theme='default'] {/* 字体 */--font-primary: #fff;--font-highlight: #434a50;/* 布局 */--background-header: #2f3542;--background-aside: #545c64;--background-main: #0678be;}
[data-theme='black'] {/* 字体 */--font-primary: #fff;--font-highlight: #434a50;/* 布局 */--background-header: #303030;--background-aside: #303030;--background-main: #393939;}
@import './theme-default.css';@import './theme-black.css';
import '@/assets/styles/theme/index.css';html lang="en" data-theme="default">html>template>div>select name="pets" @change="handleChange">option value="default">默认色option>option value="black">黑色option>select>div>登录页面div>div>template>script setup lang="ts">const handleChange = (e: Event) => {window.document.documentElement.setAttribute('data-theme', (e.target as HTMLSelectElement).value);};script>style lang="scss">body {color: var(--font-primary);background-color: var(--background-main);}style>
效果图，暗黑色：
const themeColor = {default: {font: '#333',},black: {font: '#fff',},};export default themeColor;
template>div>select name="pets" @change="handleChange">option value="default">默认色option>option value="black">黑色option>select>div>登录页面div>div ref="echartRef" class="myChart">div>div>template>script setup lang="ts">import { onMounted, ref, watch } from 'vue';import themeColor from '@/config/theme';import * as echarts from 'echarts';type ThemeTypes = 'default' | 'black';const echartRef = refnull >(null);const theme = ref('default'); const handleChange = (e: Event) => {const selectTheme = (e.target as HTMLSelectElement).value as ThemeTypes;theme.value = selectTheme;window.document.documentElement.setAttribute('data-theme', selectTheme);};const drawGraph = () => {let echartsInstance = echarts.getInstanceByDom(echartRef.value!);if (!echartsInstance) {echartsInstance = echarts.init(echartRef.value);}echartsInstance.clear();var option = {color: ['#3398DB'],title: {text: '柱状图',left: 'center',textStyle: {color: themeColor[theme.value].font,},},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisLabel: {show: true,color: themeColor[theme.value].font,},nameTextStyle: {color: themeColor[theme.value].font,},},],yAxis: [{type: 'value',axisLabel: {show: true,color: themeColor[theme.value].font,},nameTextStyle: {color: themeColor[theme.value].font,},},],series: [{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220],},],};echartsInstance.setOption(option);};onMounted(() => {drawGraph();});watch(theme, () => {drawGraph();});script>style lang="scss">body {color: var(--font-primary);background-color: var(--background-main);}.myChart {width: 300px;height: 300px;}style>
body {filter: grayscale(1); //1相当于100%}