主题

如果想要自定义主题请先阅读 antd 的 色彩 和 定制主题 章节。

品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一。 来源于 色彩 章节。

antd 默认的品牌色为 #1677ff，本项目继承了 antd 的品牌色。

内置主题

框架中内置了多种主题，可以在 preferences.ts 中进行配置：

// 默认为蓝色
export type BuiltinThemeType = "red" | "volcano" | "orange" | "gold" | "yellow" | "lime" | "green" | "cyan" | "blue" | "geekblue" | "purple" | "magenta" | "gray" | "custom";
export const DEFAULT_PREFERENCES = { builtinTheme: "blue" } satisfies PreferencesState;

内置主题列表

内置主题是从 antd 提供的基础色板中选取的，根据 antd 的建议选取第六个颜色作为主题色。

我们建议选择色板从浅至深的第六个颜色作为主色

内置主题类型列表

export type BuiltinThemeType =
  | "red"
  | "volcano"
  | "orange"
  | "gold"
  | "yellow"
  | "lime"
  | "green"
  | "cyan"
  | "blue"
  | "geekblue"
  | "purple"
  | "magenta"
  | "gray";

自定义主题

export const DEFAULT_PREFERENCES = {
	builtinTheme: "custom", 
	themeColorPrimary: "#1677ff"
} satisfies PreferencesState;

黑暗模式

使用暗色算法自动生成：暗色算法 theme.darkAlgorithm

色弱模式

一般用于特殊场景，将设置为色弱模式，可以在 preferences.ts 中进行配置：

色弱模式的原理

filter: invert(100%)

/**
 * 默认偏好设置
 */
export const DEFAULT_PREFERENCES = {
	colorBlindMode: false, 
} satisfies PreferencesState;

灰色模式

一般用于特殊场景，将网页置灰，可以在 preferences.ts 中进行配置：

灰色模式的原理

filter : grayscale(100%)

export const DEFAULT_PREFERENCES = {
	colorGrayMode: false, 
} satisfies PreferencesState;