CSS配合自定义html属性.APP[color-mode="dark"]实现主题控制

53 阅读1分钟

主题变量定义文件

```@primary-color: #1890ff;

@dark-border-color: #4e4e4e;
@light-border-color: #e4e7ed;

// * 白色主题
.APP[color-mode="light"] {
	--surface1: #ffffff;
	--surface2: #000000;
}

// * 黑色主题
.APP[color-mode="dark"] {
	--surface1: #000000;
	--surface2: #ffffff;
}
.textColor {
	color: var(--surface1);
}

组件中中使用store中的themeColor变量,实现暗黑主题切换.......

const { header } = useStore();
<div class="APP" color-mode="{header.themeColor}">
    <!-- Content here -->
</div>