Angular8 主题色切换（封装成Directive）

一、概述

切换主题色思路：通过点击或者切换选择一种已经定义好的主题色，将当前主题色保存在缓存中，通过修改全局的setProperty属性，改变背景色，字体色的变量值。

二、前景知识

2.1、SCSS使用（var --）

2.2、设置css属性dom.setProperty(‘background-color’:‘yellow’)

2.3、Angular8 Directive使用

2.4、subScription,ElementRef,localStroage

三、文件目录

四、实例展示

3.1、app.component

<app-nav appTheme></app-nav>

.app-wrap {
    color: var(--textColor);
    background-color:var(--backgroundColor);
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', './app.component.css']
})
export class AppComponent {
  title = 'demos-theme';
}

3.2、nav.component

<div class="nav-wrap">
    <div class="nav-wrap-header-left">
        路由
    </div>
    <div class="nav-wrap-header-right">
        <button class="btn-default" (click)="changeTheme()">切换主题--{{themName}}</button>
    </div>
<div>

import { Component, OnInit } from '@angular/core';
import { ThemeService } from 'src/app/core/modules/themes/theme.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss', './nav.component.css']
})
export class NavComponent implements OnInit {
  public themName: string;

  constructor(private themeService: ThemeService) { }

  ngOnInit() {
    this.themeService.getActiveTheme().subscribe(themName => {
      this.themName = themName;
    });
  }
  // 点击切换主题色
  changeTheme() {
    console.log(this.themName);
    if (this.themName === 'LIGHT_THEME') {
      this.themName = 'BLACK_THEME';
      this.themeService.setActiveTheme(this.themName);
    } else {
      this.themName = 'LIGHT_THEME';
      this.themeService.setActiveTheme(this.themName);
    }
  }

}

.nav-wrap {
    background-color:var(--backgroundColor);
    font-size: 16px;
    color: var(--textColor);
    height: 48px;
    line-height: 48px;
    .nav-wrap-header-left {
        float: left;
    }
    .nav-wrap-header-right {
        float: right;
        .btn-default {
            height: 32px;
            background-color:var(--textColor);
            color: var(--backgroundColor);
            outline: none;
            border:0px;
            border-radius: 5px;
        }
    }
    
}

3.3、core/themes/

import { Directive, OnDestroy, OnInit, ElementRef, Inject } from '@angular/core';
import { Subscription, UnsubscriptionError } from 'rxjs';
import { DOCUMENT } from '@angular/common';
import { ThemeService } from './theme.service';
import { THEMES } from './themes.constants';

@Directive({
  selector: '[appTheme]'
})
export class ThemeDirective implements OnInit, OnDestroy {
  private themeName = 'LIGHI_THEME';
  private themeServiceSubscription: Subscription;
  constructor(
    private elementRef: ElementRef,
    @Inject(DOCUMENT) private document: any,
    private themeService: ThemeService
  ) { }
  ngOnInit() {
    this.updateTheme(this.themeName);
    this.themeService.getActiveTheme().subscribe(themeName => {
      this.themeName = themeName;
      this.updateTheme(this.themeName);
    });
  }
  updateTheme(themeName) {
    const element = this.elementRef.nativeElement;
    console.log(element);
    const theme = THEMES[themeName];
    // tslint:disable-next-line:forin
    for (const key in theme) {
      element.style.setProperty(key, theme[key]);
      this.document.body.style.setProperty(key, theme[key]);
    }
  }
  ngOnDestroy() {
    if (this.themeServiceSubscription) { this.themeServiceSubscription.unsubscribe(); }
   }
}

export const THEMES = {
    LIGHT_THEME: {
        '--backgroundColor': '#008afe',
        '--textColor': '#fff',
        '--fontSize': '14px'
    },
    BLACK_THEME: {
        '--backgroundColor': '#f2f2f2',
        '--textColor': '#000',
        '--fontSize': '16px'
    },
    DARK_THEME: {
        '--backgroundColor': '#aaaaaa',
        '--textColor': '#fff',
        '--fontSize': '18px'
    }
};
export const LIGHT_THEME = 'LIGHT_THEME';
export const BLACK_THEME = 'BLACK_THEME';
export const DARK_THEME = 'DARK_THEME';

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { LIGHT_THEME } from './themes.constants';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  private activeTheme = new BehaviorSubject(localStorage.getItem('activeTheme') || LIGHT_THEME);
  constructor() { }
  public getActiveTheme() {
    return this.activeTheme.asObservable();
  }
  public setActiveTheme(name) {
    localStorage.setItem('activeTheme', name);
    this.activeTheme.next(name);
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ThemeDirective } from './theme.directive';


@NgModule({
  declarations: [ThemeDirective],
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [ThemeDirective]
})
export class ThemeModule { }

3.4、切换主题效果图

五、项目地址

gitHub项目地址
git clone

六、学习地址

scss基础知识
主题色切换
CSSStyleDeclaration setProperty() 方法