多主题开发
一、概述
ThingsPanel系统主题的实现分为两个部分,一部分是组件库的主题配置,另一部分是 UnoCSS 的主题配置。为了统一两个部分的主题配置,在这之上维护了一些主题配置,通过这些主题配置分别控制组件库和 UnoCSS 的主题配置。
二、原理
- 定义一些主题配置的变量,包括各种主题颜色,布局的参数配置等
- 通过这些配置产出符合组件库的主题变量
- 通过这些配置产出一些主题 tokens 并衍生出对应的 css 变量,再将这些 css 变量传递给 UnoCSS
三、主题配置
1. 类型定义
主题配置的类型定义见 App.Theme.ThemeSetting
代码位置:src/typings/app.d.ts