@hd-fe/theme v0.5.13

主题管理

本主题包提供 dark、 darkNew、light、lightNew、darkGenco、darkGencoDatang、darkGencoYihai 主题。

只有 darkNew、lightNew 主题提供了 variables.css

包目录

lib
-- darkNew
-- -- echarts
-- -- -- custom.json
-- -- -- theme.js
-- -- common.scss
-- -- index.css
-- -- variables.css
-- -- variables.scss
-- **

组件主题应用

调用接口时，会引入包括 element-ui @hd-fe/ui @hd-fe/business 组件库主题，并初始化 css 全局变量

单主题应用

// main.js
import ThemeClass from '@hd-fe/theme'
new ThemeClass({ themeName: 'darkNew' }).init()

多主题应用

主题切换时需要使用代码进行页面刷新，见下面示例代码

// utils/cookie.js
import cookie from 'js-cookie'

const THEME = 'app-theme' // 独立版THEME

export const getTheme = () => {
  return cookie.get(THEME)
}

export const setTheme = (theme) => {
  cookie.set(THEME, theme)
}

// main.js
import { getTheme } from '@/utils/cookie'
import ThemeClass from '@hd-fe/theme'
new ThemeClass({ themeName: (getTheme() || 'darkNew') }).init()

// vue
<template>
  <el-select
    v-model="theme"
    @change="selectTheme"
  >
    <el-option
      v-for="theme1 of themes"
      :key="theme1.name"
      :value="theme1.name"
      :label="theme1.title"
    />
  </el-select>
</template>
<script>
import { getTheme, setTheme } from '@/utils/cookie'

export default {
  data () {
    return {
      themes: [
        {
          name: 'lightNew',
          title: '亮色'
        },
        {
          name: 'darkNew',
          title: '暗黑'
        }
      ]
    }
  },
  methods: {
    selectTheme (name) {
      setTheme(name)
      location.reload()
    }
  }
}
</script>

引用主题配置颜色变量

// scss 变量
@import '~@hd-fe/theme/lib/dark/variables.scss'

echarts 图表主题应用

import HdECharts from '@hd-fe/echarts'
import theme from '@hd-fe/theme/lib/dark/echarts/theme.js'

Vue.use(HdECharts, { theme })

引用 echarts 中 legend.icon 等配置文件

import HdECharts from '@hd-fe/echarts'
import custom from '@hd-fe/theme/lib/dark/echarts/custom.json'
Vue.use(HdECharts, { custom })