CSS主题换肤设计

一、主题换肤功能设计

定义主题颜色

在这里插入图片描述

主题一：theme-default.scss

$theme-default: (
    // 主色
    ag-main-color1: #005788, // 使用时记得加透明度80%，background-color: rgba(themed('ag-main-color1'), 0.8);
    ag-main-color2: #003a5f,
    // 字体颜色FFF
    ag-font-color1: #fff,
    ag-font-color2: #c7e5ff,
    ag-font-color3: rgba(#c7e5ff, 0.8),
    ag-font-color4: rgba(#c7e5ff, 0.8),
    // 辅助色
    ag-assist-color1: #38b2ff,
    ag-assist-color2: #00ffea,
    ag-assist-color3: #00ff90,
    ag-assist-color4: #fcc522,
    ag-assist-color5: #ff9546,
    ag-assist-color6: #f04d60,
    ag-assist-color7: #bb6bff,
    ag-assist-color8: #3de6ff,
    ag-assist-color9: #008aff,
    // 分割线
    ag-line-color1: rgba(#fff, 0.1)

);

主题二：theme-darkblue.scss

$theme-darkblue: (
    // 主色
    ag-main-color1:#00098d,// 使用时记得加透明度80%，background-color: rgba(themed('ag-main-color1'), 0.8);
    ag-main-color2:#00098d, // TODO 根据UI对应表修正
    // 字体颜色FFF
    ag-font-color1:#fff,
    ag-font-color2:#c7e5ff,
    ag-font-color3:rgba(#c7e5ff, 0.8),
    ag-font-color4:rgba(#c7e5ff, 0.8),// TODO 根据UI对应表修正
    // 辅助色
    ag-assist-color1:#38b2ff,
    ag-assist-color2:#00ffea,
    ag-assist-color3:#49cd45,
    ag-assist-color4:#fcc522,
    ag-assist-color5:#ff9546,
    ag-assist-color6:#f04d60,
    ag-assist-color7:#bb6bff,
    ag-assist-color8:#0084ff,
    ag-assist-color9:#0084ff,// TODO 根据UI对应表修正
    // 分割线
    ag-line-color1:rgba(#fff, 0.1)
);

主题三：theme-white.scss

$theme-white: (
    // 主色
    ag-main-color1:#ffffff,// 使用时记得加透明度80%，background-color: rgba(themed('ag-main-color1'), 0.8);
    ag-main-color2:#ffffff,// TODO 根据UI对应表修正
    // 字体颜色FFF
    ag-font-color1:#fff,
    ag-font-color2:#333,
    ag-font-color3:rgba(#333, 0.8),
    ag-font-color4:#666,
    // 辅助色
    ag-assist-color1:#008aff,
    ag-assist-color2:#00d8ff,
    ag-assist-color3:#00d020,
    ag-assist-color4:#ffa800,
    ag-assist-color5:#ff6d00,
    ag-assist-color6:#f04d60,
    ag-assist-color7:#bb6bff,
    ag-assist-color8:#bb7bff,// TODO 根据UI对应表修正
    ag-assist-color9:#bb8bff,// TODO 根据UI对应表修正
    // 分割线
    ag-line-color1:#eee
);

配置主题theme.scss

$themes: (
    default: $theme-default,
    darkblue: $theme-darkblue,
    white: $theme-white
);
@mixin themeify($name: '', $key: '') {
    @each $theme-name, $map in $themes {
        $theme-map: $map !global;
        [data-theme=#{$theme-name}] & {
            @if ($name != '' and $key != '') {
                #{$name}: map-get($theme-map, $key);
            }
            @else {
                @content;
            }
        }
    }
}
@function themed($key) {
    @return map-get($theme-map, $key);
}

// key前面跟上 themeName- 用于区分不同主题的变量
:export {
    @each $key, $value in $theme-default {
        default-#{$key}: $value;
    }
    @each $key, $value in $theme-darkblue {
        darkblue-#{$key}: $value;
    }
    @each $key, $value in $theme-white {
        white-#{$key}: $value;
    }
}

CSS使用主题颜色

.skin {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    border: 2px solid #e6e6e6;
    border-radius: 3px;
    @include themeify {
        background-color: rgba(themed('ag-main-color1'), 0.9);
    }
 }

CSS使用某主题指定颜色

.theme1 {
    background: map-get($theme-default, 'ag-main-color1');
}

.theme2 {
    background: map-get($theme-darkblue, 'ag-main-color1');
}

.theme3 {
    background: map-get($theme-white, 'ag-main-color1');
}

导出变量在JS中使用

所在目录 src/utils/index.js

import store from '@/store/index'
import globalThemeVariables from '@/styles/modules/theme/themes.scss'

// 根据 key 获取全局主题变量值
export function getThemeVariable(key) {
    return globalThemeVariables[`${store.state.settings.theme}-${key}`]
}

export default {
    install: function(Vue, name = '$utils') {
        Object.defineProperty(Vue.prototype, name, {
            value: {
                getThemeVariable
            }
        })
    }
}

JS使用主题颜色

JS变量会跟随主题二变换颜色

this.$utils.getThemeVariable('ag-main-color1')

JS使用某主题指定颜色

通过对象去获取指定主题颜色

import globalThemeVariables from '@/styles/modules/theme/themes.scss'
console.log(globalThemeVariables['default-ag-main-color1'])

二、Echarts主题颜色换肤

下载 Echarts主题颜色

Echart主题颜色配置，地址：https://echarts.apache.org/zh/theme-builder.html
在这里插入图片描述
注意修改文件的registerTheme注册名称为对应主题名称white

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory)
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'))
    } else {
        // Browser globals
        factory({}, root.echarts)
    }
}(this, function(exports, echarts) {
    const log = function(msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg)
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded')
        return
    }
    echarts.registerTheme('white', {// 此处为颜色配置...})

在src/plugins/echarts.js中注册自定义主题

import * as echarts from 'echarts/core'
import {
    GridComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    LegendScrollComponent,
    DatasetComponent,
    GraphicComponent,
    GeoComponent,
    DataZoomComponent,
    MarkLineComponent,
    MarkPointComponent,
    PolarComponent
} from 'echarts/components'
import {
    LineChart,
    BarChart,
    PieChart,
    LinesChart,
    GaugeChart,
    GraphChart,
    RadarChart,
    ScatterChart,
    EffectScatterChart
} from 'echarts/charts'
import {
    CanvasRenderer
} from 'echarts/renderers'
// 注册自定义主题
import '@/styles/modules/theme/chart-themes/default'
import '@/styles/modules/theme/chart-themes/darkblue'
import '@/styles/modules/theme/chart-themes/white'

echarts.use(
    [
        GridComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, LegendScrollComponent, DatasetComponent, GraphicComponent, GeoComponent, DataZoomComponent, MarkLineComponent, MarkPointComponent, PolarComponent,
        LineChart, BarChart, PieChart, LinesChart, GraphChart, RadarChart, ScatterChart, EffectScatterChart, GaugeChart,
        CanvasRenderer
    ]
)

export default {
    install: function(Vue, name = '$echarts') {
        Object.defineProperty(Vue.prototype, name, { value: echarts })
    }
}

官方主题使用示例-参考

<script src="theme/white.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'white');
chart.setOption({
    ...
});

Echarts配置mixins文件

文件src/mixins/chartMixin.js，通过监听 store下的$_theme变化，重新初始化**this.initChart()**函数达到换肤的目的

computed: {
        ...mapState({
            $_theme: state => state.settings.theme
        })
    },
watch: {
        '$store.state.settings.sidebarCollapse'() {
            this.$_resizeHandler && this.$_resizeHandler()
        },
        $_theme: function() {
            console.log(this.$_theme)
            // TODO 写进文档，固定名称
            if (this.chart &&  this.initChart) {
                this.chart.dispose()
                this.initChart()
            }
        }
    },

Echarts使用chartMixin文件

需要加入指定代码，this.chart = this. $e c h a r t s . i n i t (t h i s .$ refs[‘chart’], this.$_theme)，在图表中变量this.chart 和函数this.initChart()必须存在。

import { mapState } from 'vuex'
import chartMixin from '@/mixins/chartMixin'

export default {
    name: 'IntelligentDiagnosisPanel',
    mixins: [chartMixin], // 加入mixins
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
        const setOption={} // 配置中可以通过color: this.$utils.getThemeVariable('ag-font-color1'),定义颜色哦
            this.chart = this.$echarts.init(this.$refs['chart'], this.$_theme) // 此处this.$_theme在mixins定义了
            this.chart.setOption(setOption)
        }
    }
}
</script>