CSS変数とSass(Scss)変数を利用してダークモードになった時の配色などを自動で変更することができます。 例えばテーマボタンをクリックしたら<html>にJavaScriptでdata-theme="dark"という属性を追加し、そのdata属性を判定してダークモードの切り替えを実装する場合のCSS&Sassの設定を紹介します。 基本的なダークモードの設定方法 まずはライトモード(通常表示)用の$theme-colorsとダークモード用の$dark-theme-colorsというSass変数に配列で各カラーコードを定義していきます。 そしてSass機能の@each文で$theme-colorsを:root {}内にループ処理で出力していきます。 出力結果は--color-primary、--color-secondaryのようにCSS変数で出力され、ダークモードの時は&[data-t
![ダークモードにも柔軟に対応できるCSS&Sass変数のカラー設定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c73365816f5775d433e17caceac26e4d02fed20/height=288;version=1;width=512/https%3A%2F%2Fimages.microcms-assets.io%2Fprotected%2Fap-northeast-1%3Ad7bf4cb6-89ba-41b6-80da-53d7f01731e2%2Fservice%2Fhigemura%2Fmedia%2Fthumb_dark-mode-css-variables-01.png)