自定义主题
📊📝📽️ Univer General
使用内置主题
Univer 内置了两套主题,分别是 defaultTheme
和 greenTheme
,他们在 @univerjs/design
包中,你可以根据自己的需求选择其中一个主题。
import { defaultTheme } from "@univerjs/design";
// import { greenTheme } from "@univerjs/design";
const univer = new Univer({
theme: defaultTheme,
// theme: greenTheme,
});
自定义主题
Univer 的主题是基于 css 变量实现的,你完全可以通过覆盖这些变量来自定义主题。
请参考这里 (opens in a new tab)来了解默认主题的变量是如何定义的。
.univer-theme {
--primary-color: #1890ff;
--primary-color-hover: #40a9ff;
}
import { defaultTheme } from "@univerjs/design";
// 在这里导入你自定义的主题
import './custom-theme.css';
const univer = new Univer({
theme: defaultTheme,
});
如果你的构建工具支持 css modules 的一些特殊语法,你可以使用 :export
来导出变量,这样你就可以在 js 中使用这些变量了。
:export {
--primary-color: #1890ff;
--primary-color-hover: #40a9ff;
}
import { defaultTheme } from "@univerjs/design";
import customTheme from './custom-theme.css';
const univer = new Univer({
theme: {
...defaultTheme,
...customTheme,
}
});