はじめに
便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替（配色変更）を実装する方法を解説します。
CSSカスタムプロパティ
CSSカスタムプロパティとはCSS内で使用できる変数のことです。
Webデザインの配色を考えるとき、たくさんの色を使うことは滅多にありません。大抵は白色＋黒色＋テーマカラー（1〜2色）に落ち着くことと思います。
テーマカラーはWeb全体のあちこちに配色されることになります。見出しの文字色だったり、ボックスの背景色だったり、表の罫線だったり、というように。
// テーマカラーが #417ece の場合
h1 {
color: #417ece;
}
.box {
background-color: #417ece;
}
.cell {
border-bottom: 1px solid #417ece;
}
このように分散して書いていると、いざテーマカラーを変更したいとなったときに修正が非常に面倒です。一括置換すれば楽ですが、対象が複数ファイルに及ぶとやはり面倒です。
そこで登場するのがCSSカスタムプロパティです。テーマカラーをCSSカスタムプロパティに入れてやることで面倒な修正作業から解放されます。
// テーマカラーが #417ece の場合
// CSSカスタムプロパティ
:root {
--theme-color: #417ece;
}
h1 {
color: var(--theme-color);
}
.box {
background-color: var(--theme-color);
}
.cell {
border-bottom: 1px solid var(--theme-color);
}
テーマカラーを変更したいときは一番上の--theme-colorを変更するだけで済みます。
ちなみに:rootというのは擬似クラスのひとつで、文書のルート要素、つまりhtmlタグのことを指します。CSSカスタムプロパティは:root内に書くというのが慣習になっています。
rgba、lighten、darkenとの併用
CSSカスタムプロパティとlighten、darkenとの併用はできません。また、rgbaは16進数のCSSカスタムプロパティは使えなくて、RGB値のCSSカスタムプロパティであれば使えます。
:root {
--theme-color: #417ece;
// RBB値（「rgb(65, 126, 206)」という書き方はNG）
--theme-color-rgb: 65, 126, 206;
}
.heading {
// ❌ lighten、darkenはCSSカスタムプロパティを使えない
background-color: lighten(var(--theme-color), 50%);
border-bottom: 1px solid darken(var(--theme-color), 50%);
// ❌ 16進数のCSSカスタムプロパティは使えない
color: rgba(var(--theme-color), .5);
// ⭕ RGB値のCSSカスタムプロパティは使える
color: rgba(var(--theme-color-rgb), .5);
}
サンプル
簡単なものですがサンプルを作ったので動きを確認してみてください。左上の「モード切替」をクリックするたびにライトモードとダークモードが切り替わります。
実装
では、さっそく実装していきます。まず初めにすべてのコードを記載します。CSSはSASSを使用、JavaScriptはjQueryを使用していますのでご注意ください。
HTML
<span id="mode-toggle">モード切替</span>
<div id="wrap">
<h1>Sample Text</h1>
</div>
CSS
#mode-toggle {
cursor: pointer;
color: #000;
}
#wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
color: var(--text-color);
background-color: var(--bg-color);
transition: color .5s, background-color .5s;
}
:root {
--mode:light;
--bg-color: var(--light-bg-color);
--text-color: var(--light-text-color);
// Light Mode
--light-bg-color: #fff;
--light-text-color: #000;
// Dark Mode
--dark-bg-color: #000;
--dark-text-color: #fff;
}
JavaScript
const modeToggle = () => {
$('#mode-toggle').on('click', function() {
const html = document.querySelector('html');
const currentMode = getComputedStyle(html).getPropertyValue("--mode");
let mode = null, bgColor = null, textColor = null;
switch (currentMode) {
case 'light':
mode = 'dark';
bgColor = getComputedStyle(html).getPropertyValue("--dark-bg-color");
textColor = getComputedStyle(html).getPropertyValue("--dark-text-color");
break;
case 'dark':
mode = 'light';
bgColor = getComputedStyle(html).getPropertyValue("--light-bg-color");
textColor = getComputedStyle(html).getPropertyValue("--light-text-color");
break;
default:
break;
}
html.style.setProperty('--mode', mode);
html.style.setProperty('--bg-color', bgColor);
html.style.setProperty('--text-color', textColor);
});
}
$(function() {
modeToggle();
});
解説
HTML
特筆すべきことはありません。
CSS
#wrap {
color: var(--text-color);
background-color: var(--bg-color);
}
#wrapの文字色と背景色にCSSカスタムプロパティを使用しています。
:root {
--mode:light;
--bg-color: var(--light-bg-color);
--text-color: var(--light-text-color);
// Light Mode
--light-bg-color: #fff;
--light-text-color: #000;
// Dark Mode
--dark-bg-color: #000;
--dark-text-color: #fff;
}
実際に使用するCSSカスタムプロパティと、ライトモード／ダークモードそれぞれのCSSカスタムプロパティを用意しておきます。そして、最初に使用するモードのCSSカスタムプロパティを、実際に使用するCSSカスタムプロパティに設定します（今回はライトモード）。
--modeは現在のモードを保持しておくためのCSSカスタムプロパティです。モードが切り替わるたびに値が変更されます。このとき、以下のことに気をつけてください（理由は後述）。
// ❌ プロパティ名と値の間にスペースは不要
--mode: light;
// ❌ 値をシングルクォーテーションやダブルクォーテーションで括らない
--mode:'light';
--mode:"light";
// ⭕ 必ず以下のように記述
--mode:light;
JavaScript
const modeToggle = () => {
$('#mode-toggle').on('click', function() {
#mode-toggleがクリックされたときのイベントを記述しています。
const html = document.querySelector('html');
const currentMode = getComputedStyle(html).getPropertyValue("--mode");
1行目でhtml要素を取得し、2行目で--modeというCSSカスタムプロパティの値を取得しています。CSSカスタムプロパティの書き方によって取得される値が微妙に異なるので注意してください（後続の分岐処理に影響します）。
- ❌ プロパティ名と値の間にスペースがある
- CSSカスタムプロパティ：
--mode: light; - 取得される値：
「 light」※先頭にスペースがある
- CSSカスタムプロパティ：
- ❌ 値をシングルクォーテーションやダブルクォーテーションで括る
- CSSカスタムプロパティ：
--mode:'light';/--mode:"light"; - 取得される値：
'light'/"light"
- CSSカスタムプロパティ：
- ⭕ 正しく記述
- CSSカスタムプロパティ：
--mode:light; - 取得される値：
light
- CSSカスタムプロパティ：
let mode = null, bgColor = null, textColor = null;
switch (currentMode) {
case 'light':
mode = 'dark';
bgColor = getComputedStyle(html).getPropertyValue("--dark-bg-color");
textColor = getComputedStyle(html).getPropertyValue("--dark-text-color");
break;
case 'dark':
mode = 'light';
bgColor = getComputedStyle(html).getPropertyValue("--light-bg-color");
textColor = getComputedStyle(html).getPropertyValue("--light-text-color");
break;
default:
break;
}
取得したモードの値によって処理を分岐しています。現在がライトモードならダークモードの値を取得し、現在がダークモードならライトモードの値を取得します。
html.style.setProperty('--mode', mode);
html.style.setProperty('--bg-color', bgColor);
html.style.setProperty('--text-color', textColor);
取得した値を設定しています。
まとめ
CSSカスタムプロパティとJavaScriptを使ってモード切替（配色変更）を実装することができました。意外と簡単に実装できたのではないでしょうか。
今回は実装しませんでしたが、Local Storageにモードの状態を保存しておくことで、次回アクセス時にもモードを保持しておくことが可能になります。
Local Storageについては、以下のページでも触れているので参考にしてください。
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
【AWS】Session Manager経由でEC2インスタンスに接続する方法（画像付き解説）【2023年版】
【Rails】Railsアップグレードまとめ
【Rails】ユーザー登録時に行うメールアドレス認証機能の実装方法
【Rails】モデルに列挙型（enum）を定義し、使いこなす方法
【Rails】RailsでCORSとPreflight requestの設定を行う方法
【自作Webサービス】『KITCHEN NOTE』の機能紹介
「このページに到達できません (ドメイン)により、接続が拒否されました」を解決するファイアウォール（firewalld）の設定方法
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】Webサーバー「Unicorn」の基本情報と実装方法
【Rails】忘れがちなルーティングの書き方を総復習
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築