angular实现换肤功能

环境

angular cli: 8.3.8
node: 10.17.0

演示效果

在这里插入图片描述

实现

提前定义几套皮肤颜色，通过scss的 @mixin混入打到修改主题的效果；

步骤

1. 定义皮肤颜色base.scss

定义了三份，效果图中展示的使用了两个颜色：字体，背景两种；


// 主题1  对比色
$contrast_color: #fc4a1a;//字体颜色
$contrast_main: #4abdac;//主要颜色，如背景色
$contrast_gray: #e5e3e8;//
$contrast_orange: #fc4a1a;//
$contrast_yellow: #f7b733;//

// 主题2  清爽色
$light_color: #a9a9a9;//字体颜色
$light_main: #caebf2;//主要颜色，如背景色
$light_gray: #efefef;//
$light_orange: #fe5751;//
$light_yellow: #f08769;//

// 主题3  暗色
$dark_color: white;//字体颜色
$dark_main: #192231;//主要颜色，如背景色
$dark_gray: #98878f;//
$dark_orange: #985e6d;//
$dark_yellow: #494e68;//

2. 创建皮肤主题theme.scss

主要用到了@mixin混入

@import './base.scss';

//一整套
@mixin def_theme() {
    // 可以考虑用for循环生成
    // 黑色主题
    :host-context([theme-style='dark']) & {
        color: $dark_color;
        background-color: $dark_main;
    }
    // 亮色主题
    :host-context([theme-style='light']) & {
        color: $light_color;
        background-color: $light_main;
    }
    // 常用主题
    :host-context([theme-style='contrast']) & {
        color: $contrast_color;
        background-color: $contrast_main;
    }
}

// 单独设置 背景颜色
@mixin bg_color() {
    :host-context([theme-style='dark']) & {
        background-color: $dark;
    }
    :host-context([data-theme-style='light']) & {
        background-color: $light;
    }
}

// 单独设置 字体颜色
@mixin font_color() {
    :host-context([theme-style='dark']) & {
        color: $dark-color;
    }
    :host-context([theme-style='light']) & {
        color: $light-color;
    }
}
// 单独设置 边框颜色
@mixin border_color(){
    :host-context([theme-style='dark']) & {
        border: solid 2px $dark;
    }

    :host-context([theme-style='light']) & {
        border: solid 2px $light;
    }
}

3. 修改全局样式，使用主题

主要是定义了一个 content类，里面引入def-theme()用来改变主题；

/* You can add global styles to this file, and also import other style files */
@import './assets/theme.scss';

div{
    margin: 0;
    padding: 0;
}

//定义了一个内容类。只要是 这个类下面的元素都会按照主题色变化
.content{
    text-align: center;
    @include def-theme();
    width: 100%;
    height: 100%;
}

4. 修改index.html

给body元素增加默认主题默认黑色： theme-style=‘dark’
在这里插入图片描述

5. 页面中使用

html中使用content类，因为上面在全局样式中定义了content，有主题样式。

scss需要引入全局样式

@import '../../../styles.scss';

.my-title{
    @include def_theme();
    @include border_color;
    height: 30px;
    width: 100%;
}
.b-style{

    // @include font_color(red,blue);
    // @include bg_color(red,blue)
    @include border_color

}

html代码使用

<div class="content">
    <a  class="b-style"  href="setting">设置界面</a>
    <br>
    <pre>
        文字效果展示



        雨晴烟晚。绿水新池满。
        双燕飞来垂柳院,小阁画帘高卷。
        黄昏独倚朱阑。西南新月眉弯。
        砌下落花风起，罗衣特地春寒。
    </pre>
</div>

完整代码

github地址…ngTheme