@hd-fe/theme
v0.5.13
Published
主题管理
Downloads
139
Keywords
Readme
主题管理
本主题包提供 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 })