zlw-theme-core

Introduce

zlw-theme-core 是一个 element-ui 主题覆盖工具包，其使用相关css3变量 来重写 element-ui 组件样式。初始默认色为element-ui官网主题色。

全部CSS变量详见

zlw-theme-core/src/styles/vars

Installation

yarn add zlw-theme-core

Usage

1、样式设置

以 demo-app 项目为模板，新增theme文件夹，其目录结构如下

1.2、定义主题列表【约定配置】

// # src/styles/module/theme/theme.config.json
{
  "themes": [
    {"name": "深绿主题", "id": "dark", "file": "./dark.scss"},
    {"name": "绿白主题", "id": "light", "file": "./light.scss"},
   	...
  ]
}
    

1.3、主题样式对外入口文件

// # src/styles/module/theme/index.scss
@forward 'zlw-theme-core/src/styles/index.scss' with (
  $font-path: '~zlw-theme-core/src/styles/fonts'
);

@use "./dark.scss";
@use "./light.scss";

1.4、主题样式定义

// # src/styles/module/theme/dark|light.scss
@use 'sass:map';
@import "zlw-theme-core/src/styles/mixins/var"; // v4.0.0版本新增

$types: primary, success, warning, danger, error, info; // v4.0.0版本新增

$--v-color-primary: #006051 !default;
$--v-color-info: #767d8b !default;
$--v-color-success: #00d082 !default;
$--v-color-warning:  #ffc600 !default;
$--v-color-danger: #f00 !default;

$colors: (
  "white": #fff,
  "black": #000,
  "primary": (
    "base": $--v-color-primary,
  ),
  "success": (
    "base": $--v-color-success,
  ),
  "warning": (
    "base": $--v-color-warning,
  ),
  "danger": (
    "base": $--v-color-danger,
  ),
  "error": (
    "base": $--v-color-danger,
  ),
  "info": (
    "base": $--v-color-info,
  ),
);

:root[data-theme="dark"] {
  @each $type in $types {
    @each $shade, $color in ('light': map.get($colors, 'white'), 'dark': map.get($colors, 'black')) {
      @for $i from 1 through 9 {
        @include set-color-mix-level($type, $i, $shade, $color);
      }
    }
  }

  @each $type in $types {
    @include set-css-color-rgb($type);
    @include set-css-color-type($colors, $type);
  }
  
   --v-text-color-primary: #fff;
  ...
}

1.5、应用主题样式

// # src/styles/index.scss
// vars and mixins
...

// theme styles (dark, light, etc.)
@import './module/theme'; // 引用theme主题样式

// common modular defs
...

2、js设置

主题切换js部分涉及src/layout/layout.tsx、src/utils/theme.ts等文件的改造和新增。

src
├───📁 layout/
│   └───📄 layout.tsx
├───📁 utils/
│   └───📄 thems.ts # add import { themes } from '@/styles/module/theme/theme.config.json'
└───📄 main.tsx

主题插件提供的常用方法如下

getCurTheme(): string; // 获取当前主题
setTheme(curTheme: string, saveLocal?: boolean): void; // 设置当前主题
restoreTheme(): void; // 设置主题为本地主题
onThemeChange(cb: (curTheme: string) => void): (() => void); // 监听主题状态的改变
                                                
// 组件中使用
this.$theme.getCurTheme()       
this.$theme.setTheme('dark')
this.$theme.restoreTheme()

// 事件监听，组件卸载前销毁监听事件
const teardown = this.$theme.onThemeChange(curTheme => {
  	this.refreshGraph()
  })
this.$on('hook:beforeDestroy', () => {
  teardown()
})

1、utils/theme.js 导入主题插件

import Vue from 'vue'
import ThemePlugin from 'zlw-theme-core'

import { themes } from '@/styles/module/theme/theme.config.json'

// install
Vue.use(ThemePlugin)

const theme = new ThemePlugin({
  rootElement: 'html',
  themeMode: 'light',
  themesList: themes,
  storageKey: 'MY_APP_THEME_DATA' // 可选：自定义存储 key，默认为 'THEME_LD'
})

export default theme

2、main.tsx 入口文件使用主题插件

import theme from './utils/theme'

new Vue({
    theme,
   	...
    render: (h: CreateElement) => <App />
  }).$mount('#root')

3、layout/layout.tsx文件的改造

export default class Layout extends Vue {
  mounted () {
    this.$theme.restoreTheme()
  }
  // 退出登录时。登录页面使用，设置的dark主题，根据项目需求设置
  beforeRouteLeave (to, from, next) {
    if (to.path === '/login') {
      this.$theme.setTheme('dark', false)
    }
    next()
  }
}

存储配置

现在可以自定义存储 key：

const theme = new ThemePlugin({
  rootElement: 'html',
  themeMode: 'light', 
  themesList: themes,
  storageKey: 'MY_APP_THEME_DATA' // 自定义存储 key
})

临时主题与恢复机制

支持临时切换主题而不保存到本地存储，适用于登录页面等场景：

// 场景：用户当前使用 'yellow-green' 主题
theme.setTheme('yellow-green', true) // 保存到本地存储
console.log(theme.getCurTheme()) // 'yellow-green'

// 退出到登录页：临时切换到 dark 主题（不保存）
theme.setTheme('dark', false) // 不保存到本地存储
console.log(theme.getCurTheme()) // 'dark'
// 此时 HTML data-theme="dark"，但本地存储仍是 'yellow-green'

// 重新登录：恢复用户之前的主题
theme.restoreTheme()
console.log(theme.getCurTheme()) // 'yellow-green'
// 此时 HTML data-theme="yellow-green"

在 Vue 路由中使用

// Layout.vue 或路由守卫中
export default {
  mounted() {
    // 登录后恢复用户主题
    this.$theme.restoreTheme()
  },
  
  beforeRouteLeave(to, from, next) {
    // 退出到登录页时临时切换主题
    if (to.path === '/login') {
      this.$theme.setTheme('dark', false) // 不保存
    }
    next()
  }
}

API 说明

• setTheme(theme, saveLocal = true): 设置主题
  • saveLocal: true - 保存到本地存储并设置为用户偏好
  • saveLocal: false - 仅临时切换，不影响用户偏好
• restoreTheme(): 恢复到本地存储的主题（用户偏好）
• getCurTheme(): 获取当前激活的主题

LICENSE

MIT Copyright (c) Tiduyun.com F2E Group