ダークモードにも柔軟に対応できるCSS&Sass変数のカラー設定方法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
