Custom Theme

📊📝📽️ Univer General

Use built-in theme

Univer has two built-in themes, defaultTheme and greenTheme, which are in the @univerjs/design package. You can choose one of them according to your needs.

import { defaultTheme } from "@univerjs/design";
// import { greenTheme } from "@univerjs/design";
 
const univer = new Univer({
  theme: defaultTheme,
  // theme: greenTheme,
});

Custom Theme

Univer's theme is based on css variables, and you can customize the theme by overriding these variables.

Please refer to here (opens in a new tab) to learn how the variables of the default theme are defined.

.univer-theme {
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
}

import { defaultTheme } from "@univerjs/design";
// Import your custom theme here
import './custom-theme.css';
 
const univer = new Univer({
  theme: defaultTheme,
});

If your build tool supports some special syntax of css modules, you can use :export to export variables, so that you can use these variables in 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,
  }
});

Custom Model Other Releases