Dark Mode

なぜ暗いモードを実装するのですか?

まず,「プログラマ」課題で暗モードを実施する理由を見たが,実際には実現しなかった.それはちょっと恥ずかしいので今回はReactで実現してみました

あなたはどうしますか。

1.変数の宣言

変数を宣言し,その要素colorを変数値とした.

$bg-color : var(--bg-color);
$text-color: var(--text-color);
$main-bg-color: var(--main-bg-color);
$main-content-bg-color: var(--main-content-bg-color);

2.$config Map形式

$config:(
    dark: (
        bg:#252429,
        text-color:#FFFFFF,
        main-bg-color:#1C1B20,
        main-content-bg-color:#252429,
    ),
    light: (
        bg:transparent,
        text-color:#000,
        main-bg-color:#f1f1f1,
        main-content-bg-color: #fff,
    )
 );

3.scssの@functionを使用して$configの属性値を返します。

$objectが暗い場合、$styleがbgの場合、setStyle@functionを使用して「#252429」を返します.

@function setStyle($map,$object,$style){
    @if map-has-key($map,$object){
        @return map-get(map-get($map,$object),$style);
    }
    @warn "The key `#{$object}` is not  available in the map";
    @return null;
}

4.変数に@mixinを使用して値を割り当てます。

mixinは関数を回収するために使用されます.
ここで、$keyはdi暗くなり、lightになり、setStyle関数で「--bg-color,--text-color,--main-bg-color,--main-content-bg-color」となり、「dark,light」属性に一致する値を返します.

@mixin theme($key) {
    --bg-color: #{setStyle($config,$key,bg)};
    --text-color: #{setStyle($config,$key,text-color)};
    --main-bg-color: #{setStyle($config,$key , main-bg-color)};
    --main-content-bg-color : #{setStyle($config,$key ,main-content-bg-color )};
};

5.@eachを使用して、「html-dock-mode,html-light-mode」クラスを作成します。

最後に、@eachを使用して暗いモード、軽いモードのクラスを作成します.

@each $theme in dark,light{
    html.#{$theme}-mode{
        @include theme($theme)
    }
}

前述したように、実際のcssは以下のように表示されます.

dark-mode

html.dark-mode {
    --bg-color: #252429;
    --text-color: #FFFFFF;
    --main-bg-color: #1C1B20;
    --main-content-bg-color: #252429;
}

light-mode

html.light-mode {
    --bg-color: transparent;
    --text-color: #000;
    --main-bg-color: #f1f1f1;
    --main-content-bg-color: #fff;
}

6.結果

最後に,切替を用いてlight/darkモードを実現した.

7.修正

下図に示すように、赤い枠線に重複する内容が表示されます.次は繰り返さないで修正します