vue-manage-system

# 主题

整个框架涉及到的主题色主要分为三块：

  • Element Plus 色调：主要用于强调按钮、文字、背景等
  • 顶部导航栏色调
  • 侧边栏色调

# Element Plus 色调

通过 CSS 变量设置

// document.documentElement 是全局变量时
const el = document.documentElement;
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`);

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red');

# 顶部导航栏色调

顶部导航栏的颜色主要由顶部导航栏的背景色和文字颜色组成。

  • 背景色变量：--header-bg-color
  • 文字颜色变量：--header-text-color
const el = document.documentElement;
// 设置 css 变量
el.style.setProperty('--header-bg-color', 'red');

# 侧边栏色调

侧边栏用的是 el-menu 组件，通过属性 background-color 和 text-color 来设置颜色。

定义 bgColor 和 textColor 变量，赋值给这两个属性，通过更改变量值来改变颜色。具体实现在 store/sidebar.ts 中

← 其它 →