自定义主题

使用内置主题

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 变量实现的，你完全可以通过覆盖这些变量来自定义主题。

请参考这里来了解默认主题的变量是如何定义的。

.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,
  }
});

插件自定义模型其他发布版本