ダーク/ライトテーマ

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 16/27。

ダーク/ライトテーマの切り替えを実装することは、現代のウェブサイトでは一般的な機能です。JavaScriptを使用してシンプルなテーマスイッチャーを作成する方法を学びましょう。

まず、テーマを切り替えるボタンを作成します：

<button id="themeToggle">Theme Toggle</button>

次に、ライトテーマとダークテーマ用の基本的なCSSを追加しましょう。

<style>
  :root {
    --background-color: #ffffff;
    --text-color: #333333;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
  }
  
  .dark-theme {
    --background-color: #222222;
    --text-color: #f5f5f5;
  }
</style>

それでは、テーマを切り替えるためのJavaScriptを追加しましょう：


const themeToggle = document.getElementById('themeToggle');
  
themeToggle.addEventListener('click', function() {
  document.body.classList.toggle('dark-theme');
});

ボタンをクリックすると、body 要素の 'dark-theme' クラスを切り替えます。

チャレンジ

簡単

ボタンのクリックイベントリスナーの中で、body 要素の "dark-mode" クラスを切り替えるコードを追加してください。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Dark/light themes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Hygge ✨</h1>
    <button id="themeToggle" class="toggle-btn">Toggle Theme</button>
  </header>

  <main>
    <section class="intro">
      <img src="https://images.unsplash.com/photo-1519710164239-da123dc03ef4?auto=format&fit=crop&w=1350&q=80" alt="Cozy hygge scene" class="hero-img">
      <p>
        <strong>Hygge</strong> is a Danish concept that embodies coziness, comfort, and a sense of well-being.  
        It’s about enjoying life’s simple pleasures — candles, warm drinks, good company, and soft blankets.
      </p>
    </section>

    <section class="philosophy">
      <h2>The Philosophy</h2>
      <p>
        Hygge is less about things and more about atmosphere and feelings.  
        It’s creating moments of calm, warmth, and togetherness — a way to nurture happiness in everyday life.
      </p>
    </section>

    <section class="origin">
      <h2>Where It Comes From</h2>
      <p>
        Originating from Denmark, hygge reflects the Danish culture’s deep appreciation for balance, comfort,  
        and community. It’s often credited as one of the reasons why Denmark consistently ranks among the  
        happiest countries in the world.
      </p>
    </section>
  </main>

  <footer>
    <p>☕ Embrace hygge in your daily life.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>