主题 Theme

组件库内置了灵活的主题定制能力，支持配置多套主题，并提供了一套语义化的 CSS 变量系统。

初始化配置

在 main.js 安装插件时，可以通过 theme 选项启用并配置主题：

import CtcUI from "ctc-components-ui";

Vue.use(CtcUI, {
	theme: {
		enabled: true, // 开启主题功能
		default: "lightTheme", // 默认激活的主题
		list: {
			// 定义默认白色主题 (必须)
			lightTheme: {
				title: "白色主题",
				url: "", // 本地样式
				vars: {
					// 覆盖默认变量
					"--ctcMainColor": "#fff",
				},
			},
			// 定义扩展主题 (如蓝色主题)
			blueTheme: {
				title: "蓝色主题",
				url: "https://cdn.example.com/blue-theme.css", // 远程 CSS 文件
				vars: {
					"--ctcMainColor": "#004774",
					"--ctcMainTextColor": "#fff",
					// ... 更多变量覆盖
				},
			},
		},
	},
});

切换主题

在组件中，你可以通过挂载在 Vue 原型上的 $ctcTheme 对象来管理主题。

export default {
	methods: {
		handleThemeChange(themeName) {
			// 切换主题，自动加载 CSS 和注入变量
			this.$ctcTheme.switch(themeName);
		},
	},
	computed: {
		currentTheme() {
			// 获取当前主题名 (响应式)
			return this.$ctcTheme.current;
		},
		themeList() {
			// 获取配置的主题列表
			return this.$ctcTheme.list;
		},
		themeSchema() {
			// 获取变量定义的 Schema (用于生成配置界面)
			return this.$ctcTheme.schema;
		},
	},
};

CSS 变量参考

组件库使用以下 CSS 变量控制全局样式。你可以在配置主题时覆盖这些变量的值。

变量名 (Name)	含义与作用范围 (Description)	默认值
--ctcMainColor	组件背景色 主要用于：卡片背景、弹窗内容区背景、表格行背景	#fff
--ctcMainTextColor	主要文本色 主要用于：页面标题、表格文字、正文内容	#2E3544
--ctcMainTextSecondColor	辅助背景色 主要用于：表格表头背景、斑马纹偶数行背景、次级区域背景	#F3F5F9
--ctcMainBorderColor	边框颜色 主要用于：组件边框、分割线颜色	#dbdfe7
--ctcMainBgColor	页面背景色 主要用于：页面整体大背景色（Layout 背景）	#f8f8f8