CSS変数を使ったダークモード対応・切り替え実装
コード例
HTML
<button onclick="toggleDarkMode()">ダークモード</button>CSS
/* 通常のスタイル */
:root {
--c-font: #333;
--c-bg: #EEE;
}
/* ダークモードのスタイル */
[data-theme="dark"] {
--c-font: #ccc;
--c-bg: #222;
}JavaScript
// ダークモードの設定を行う関数
function setDarkMode() {
// sessionStorageに保存されている値を取得し、nullでなければ、true/falseに変換する
const storedDarkMode = sessionStorage.getItem('dark-mode');
const isDarkMode = storedDarkMode !== null ? storedDarkMode === 'true' : window.matchMedia("(prefers-color-scheme: dark)").matches;
// data-theme属性にダークモード用の値を設定する
document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
}
// 初期化時にダークモードの設定を行う
setDarkMode();
// ダークモードの切り替えを行う関数
function toggleDarkMode() {
// 現在のダークモードの状態を取得する
const isDarkMode = document.documentElement.getAttribute("data-theme") === 'dark';
// ダークモードの状態を反転させ、sessionStorageに保存する
document.documentElement.setAttribute("data-theme", isDarkMode ? "light" : "dark");
sessionStorage.setItem('dark-mode', !isDarkMode);
}解説
CSS変数で各モードの色を管理し、htmlタグに当てたdata属性'[data-theme=”dark”]’でモードの切り替えを行います。
setDarkMode() 関数では、 sessionStorage.getItem('dark-mode') で sessionStorageに保存されている値を取得し、nullでなければ ? でtrue/falseに変換します。nullであれば、ウィンドウのデフォルト値を取得します。それを、setAttribute() でhtmlのdata-theme属性にセットしています。
sessionStorageに保存することでページ遷移してもダークモードの設定が引き継ぐことが出来ます。
toggleDarkMode() 関数では、現在のダークモードの状態を取得し、その状態を反転させてセットしています。その後、 sessionStorage.setItem('dark-mode', !isDarkMode); で sessionStorageに保存しています。