CSS変数を使ったテーマ切り替えの実装

この記事では、CSS変数を使用して簡単にテーマを切り替える方法を紹介します。

初めての目次

テーマ切り替えの基本
ダークテーマの実装
JavaScriptによるテーマ切り替え
クッキーやセッションストレージを利用したテーマの保存
完全なコードサンプル
まとめ

テーマ切り替えの基本

CSS変数を使うことで、テーマの色やスタイルを簡単に変更できます。以下のコードは、基本的なテーマ切り替えの実装例です。まずはサンプルからどうぞ

テーマ切り替え

:root {
 --background-color: #ffffff;
 --text-color: #000000;
}
body {
 background-color: var(--background-color);
 color: var(--text-color);
}

ダークテーマの実装

ダークテーマを追加するために、CSS変数を変更するクラスを作成します。

.dark-theme {
 --background-color: #333333;
 --text-color: #ffffff;
}

JavaScriptによるテーマ切り替え

次に、JavaScriptを使ってテーマを切り替える機能を実装します。ボタンをクリックすることで、ダークテーマとライトテーマを切り替えます。

const toggleButton = document.querySelector('.theme-toggle');

toggleButton.addEventListener('click', () => {
 document.body.classList.toggle('dark-theme');
});

クッキーやセッションストレージを利用したテーマの保存

ユーザーが選択したテーマを保存するために、クッキーやセッションストレージを利用します。以下のコードでは、テーマの状態をセッションストレージに保存し、ページが読み込まれたときにその状態を復元します。

const toggleButton = document.querySelector('.theme-toggle');

// テーマの状態をセッションストレージから取得
const currentTheme = sessionStorage.getItem('theme');
if (currentTheme === 'dark') {
 document.body.classList.add('dark-theme');
}

// テーマを切り替え、状態を保存
toggleButton.addEventListener('click', () => {
 document.body.classList.toggle('dark-theme');
 const isDarkTheme = document.body.classList.contains('dark-theme');
 sessionStorage.setItem('theme', isDarkTheme ? 'dark' : 'light');
});

完全なコードサンプル

以下は、HTML、CSS、JavaScriptを組み合わせた完全なコードサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>テーマ切り替え</title>
 <style>
  :root {
   --background-color: #ffffff;
   --text-color: #000000;
  }
  body {
   background-color: var(--background-color);
   color: var(--text-color);
   transition: background-color 0.3s, color 0.3s;
  }
  .dark-theme {
   --background-color: #333333;
   --text-color: #ffffff;
  }
  .theme-toggle {
   margin: 20px;
   padding: 10px 20px;
   cursor: pointer;
   border: none;
   background-color: #00d1b5;
   color: white;
   border-radius: 5px;
  }
 </style>
</head>
<body>
 <h1>テーマ切り替え</h1>
 <button class="theme-toggle">テーマ切り替え</button>
 <script>
  const toggleButton = document.querySelector('.theme-toggle');

  // テーマの状態をセッションストレージから取得
  const currentTheme = sessionStorage.getItem('theme');
  if (currentTheme === 'dark') {
   document.body.classList.add('dark-theme');
  }

  // テーマを切り替え、状態を保存
  toggleButton.addEventListener('click', () => {
   document.body.classList.toggle('dark-theme');
   const isDarkTheme = document.body.classList.contains('dark-theme');
   sessionStorage.setItem('theme', isDarkTheme ? 'dark' : 'light');
 });
</script>
</body>
</html>

テーマの切り替えボタンにアイコンを使用する場合は僕もよく利用するICOOON MONOでダウンロードすると手軽だよ！

太陽のアイコン (ICOOON MONO)
月のアイコン (ICOOON MONO)