Config Styles

Theme style classes using CSS custom properties pattern.

Overview

Theme styles define the visual appearance of the application. Each theme is a class with properties for colors, backgrounds, and visual styling that map to CSS custom properties.

Theme Hierarchy

All themes inherit from the base Plain class:

Plain (base class)
├── Light
├── Dark
├── Plainb
└── ZhuBeiDong

Base Plain Class

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/plain.ts

export default class Plain {
  name = 'plain'; // 总体样式名称
  icon = 'Sunset'; // 图标样式
  i18n = 'styles.0'; // 样式提示i18n配置

  bodyBg = light[7]; // 全局背景颜色
  titleColor = light[0]; // 标题颜色
  subTitleColor = dark[9]; // 二级标题颜色
  color = '#4e5969'; // 全局字体颜色
  selectionBg = '#3367d1'; // 全局文字选中后背景
  selectionColor = '#fff'; // 全局文字选中后背景

  headBg = '#40c9c6'; // 头部背景颜色

  menuBg = '#323e4d'; // 菜单背景颜色
  menuActiveBg = '#28323e'; // 菜单激活背景颜色
  menuColor = light[7]; // 菜单文字颜色
  menuActiveColor = '#409eff'; // 激活菜单文字颜色
  menuDefaultIcon = 'Minus'; // 菜单默认图标

  mainShadowColor = light[4]; // 主窗口阴影颜色

  searchRowBg = light[8];
  itemBg = light[2];
  itemSelectColor = '#409eff';

  tableBg = light[1]; // 表格背景颜色
  tableHeadBg = light[2]; // 表头行背景颜色
  tableCurBg = light[3]; // 当前行背景颜色
  tableColor = dark[0]; // 表格字体颜色
  tableBorderColor = light[9]; // 行底部边框颜色
  tableChildBg = '#f0f9eb'; // 树型表格子行背景颜色
}

Plain Properties

Property	Type	Description
`name`	string	Theme identifier
`icon`	string	Icon style name
`i18n`	string	i18n key for theme name
`bodyBg`	string	Global background color
`titleColor`	string	Title text color
`subTitleColor`	string	Secondary title color
`color`	string	Global font color
`selectionBg`	string	Text selection background
`headBg`	string	Header background
`menuBg`	string	Menu background
`menuActiveBg`	string	Active menu background
`menuColor`	string	Menu text color
`menuActiveColor`	string	Active menu text color
`tableBg`	string	Table background
`tableHeadBg`	string	Table header background
`tableCurBg`	string	Current table row background
`tableColor`	string	Table text color
`tableBorderColor`	string	Table row border color

Theme Variants

Light Theme

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/light.ts

export default class Light extends Plain {
  name = 'light';
  icon = 'Sunny';
  i18n = 'styles.1';
  bodyBg = light[0];
  titleColor = dark[0];
  subTitleColor = dark[3];

  headBg = light[0];
  menuBg = light[0];
  menuActiveBg = light[1];
  menuColor = dark[0];
  menuActiveColor = '#4f5dfd';

  tableBg = light[0];
  tableHeadBg = light[0];
  tableCurBg = light[2];
  tableColor = dark[0];
  tableBorderColor = light[9];
}

Dark Theme

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/dark.ts

export default class Dark extends Plain {
  name = 'dark';
  icon = 'MoonNight';
  i18n = 'styles.2';
  bodyBg = dark[3];
  titleColor = light[0];
  subTitleColor = light[4];
  color = grey[5];
  selectionBg = '#0438a2';

  headBg = dark[2];
  menuBg = dark[2];
  menuActiveBg = dark[6];
  menuColor = light[0];
  menuActiveColor = '#328ae3';

  mainShadowColor = light[8];

  tableBg = dark[2];
  tableHeadBg = dark[4];
  tableCurBg = dark[5];
  tableColor = light[0];
  tableBorderColor = dark[7];
  tableChildBg = dark[3];
}

Plainb Theme

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/plainb.ts

export default class Plainb extends Plain {
  name = 'plainb';
  i18n = 'styles.3';
  bodyBg = light[0];
  titleColor = light[3];
  subTitleColor = '#424242';
  color = grey[0];
  selectionBg = '#9255f4';

  headBg = '#6200ee';
  menuBg = '#ebebeb';
}

ZhuBeiDong Theme

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/zhuBeiDong.ts

export default class ZhuBeiDong extends Plain {
  name = 'zhuBeiDong';
  i18n = 'styles.4';
  bodyBg = light[0];
  titleColor = dark[0];
  subTitleColor = dark[3];

  headBg = light[0];

  tableBg = light[0];
  tableHeadBg = light[0];
  tableCurBg = light[2];
  tableColor = dark[0];
  tableBorderColor = light[9];
}

Color Palette

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/color.ts

export const light = [
  '#ffffff',  // 0
  '#F2F6FC',  // 1
  '#F5F7FA',  // 2
  '#F2F3F5',  // 3
  '#F0F2F5',  // 4
  '#EBEDF0',  // 5
  '#efefef',  // 6
  '#E5EAF3',  // 7
  '#E6E8EB',  // 8
  '#e5e6eb',  // 9
];

export const dark = [
  '#000000',  // 0
  '#121213',  // 1
  '#232324',  // 2
  '#2a2a2b',  // 3
  '#303133',  // 4
  '#373739',  // 5
  '#414142',  // 6
  '#484849',  // 7
  '#585860',  // 8
  '#606266',  // 9
];

export const grey = [
  '#909399',  // 0
  '#9b9b9d',  // 1
  '#A0A0A0',  // 2
  '#A8ABB2',  // 3
  '#b6b6b6',  // 4
  '#bdbdbe',  // 5
  '#C0C4CC',  // 6
  '#CDD0D6',  // 7
  '#D4D7DE',  // 8
  '#DCDFE6',  // 9
];

Exports

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/styles/index.ts

import Plain from './plain';
import Plainb from './plainb';
import Light from './light';
import Dark from './dark';
import ZhuBeidong from './zhuBeiDong';

export const plain = new Plain();
export const plainb = new Plainb();
export const light = new Light();
export const dark = new Dark();
export const zhuBeiDong = new ZhuBeidong();

Usage Pattern

import { Styles } from '../config';

// Access current style
const currentStyle = state.style; // State.style is of type Styles.plain

// Style properties are used to set CSS custom properties
element.style.setProperty('--body-bg', currentStyle.bodyBg);
element.style.setProperty('--menu-bg', currentStyle.menuBg);

Anti-Patterns

Do not modify theme properties at runtime - Themes are designed to be immutable configurations
Do not create new themes without extending Plain - Incomplete themes will lack required properties
Do not use hardcoded colors - Always use theme properties for consistent styling

Language: English

6.6 KiB Raw Blame History