Angular＋sass（scss）によるカラーテーマ切り替えベストプラクティス

この記事は，Angular Advent Calendar 2018，10日目の記事です．

TL;DR

目指したかったもの

WEBで，各要素の色を，瞬時に切り替えたい
全部css（sass，もといscss）で管理したい
色は，scssの変数で1か所で管理したい
このご時世にaddClassとか，removeClassとかしたくない……．
各要素ごとに，テーマごとのcssを全部定義するのも，メンテできなくなるのでしたくない．
結論，テーマごとに定義した色変数を用いて，それをスマートに切り替えてくれるもの

執筆動機

上記要件を満たした実装が，検索してもでてこなかった
よくあるのは，要素ごとに色を定義して，上位クラス（wrapperとか）のクラスをremoveClass，addClassで付け替えることによる切り替え例．
もっとスマートにできるはず，かつ色も変数化できるはず，と頭を悩ませて，一応落としどころを見つけたので共有したい．

考えた構成

１，Wrapperクラスを，テーマ分生成する．ただし，色の定義は1回のみとする．
２，Wrapperクラスを，Angularのバインドによって切り替える．

コード解説

１，Wrapperクラスを，テーマ分生成する．ただし，色の定義は1回のみとする．

// 適当な値で変数を初期化しておく
$back: #000000;
$font: #000000;
$bttn: #000000;
$btnf: #000000;

// テーマの数だけループする
@for $i from 1 through 2 {

  .wrapper#{$i} {
    @if $i == 1 {
        // テーマごとに色を定義する，1回で良い．
        $back : #F4F3EE;
        $font : #463F3A;
        $bttn : #E0AFA0;
        $btnf : #FFFFFF;
    } @else {
        $back : #000000;
        $font : #FFFFFF;
        $bttn : #32FFFB;
        $btnf : #38005B;
    }

    // スタイリングは，テーマごとに切り替えなくてよい．
    background-color: $back;
    color: $font;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

    .block{
      padding: 20px;
      h1 {
        font-size: 24px;
        padding: 0;
        margin: 0;
      }
      button {
        background-color: $bttn;
        color: $btnf;
      }
    }
  }
}

２，Wrapperクラスを，Angularのバインドによって切り替える．

.html

<!-- クラス名をバインドしている -->
<div [(class)]="colorTheme">
  <div class="block">
    <h1>Change Color Theme with .scss and .ts</h1>
    <p>
      toggle and change theme :)
    </p>
  </div>
  <div class="block">
    <button mat-button>This is the Button</button>
  </div>
  <div class="block">
    <mat-slide-toggle (change)="changeColor($event)">
        On Dark
    </mat-slide-toggle>    
  </div>
</div>

.ts


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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  name = 'Angular';

  // バインドするテーマ
  public colorTheme = 'wrapper1';

  constructor(){
    this.colorTheme = 'wrapper1';
  }

  // toggle event
  // トグルされるたびに，バインドするクラス名を変更する
  public changeColor(e){
    if(e.checked) {
      // to dark
      this.colorTheme = 'wrapper2';
    } else {
      // to light
      this.colorTheme = 'wrapper1';
    }
  }
}

終わりに

この仕組みの優れたポイントは，色の定義を1極集中管理しながら，色の切り替えが行えるところである．
とはいえラッパーの切り替えや，scssのループなどは決して可読性は高くないので，もう少し改良ができればしたい．

明日は@kimamulaさんの記事です．
よろしくお願いいたします．