다크/라이트 모드 기초

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 13번째.

다크/라이트 모드는 사용자가 선호하는 색상 테마를 선택할 수 있게 해주는 인기 있는 기능입니다. CSS 변수를 사용하여 기본적인 다크/라이트 모드 토글을 구현해 봅시다.

먼저, root 요소에 라이트 모드 색상 변수를 정의하고 이를 다양한 요소에 적용합니다:

:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --heading-color: #000000;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
h1, h2, h3 {
  color: var(--heading-color);
}

다음으로, 이 변수들을 재정의할 다크 모드 클래스를 생성합니다:

.dark-mode {
  --background-color: #333333;
  --text-color: #f5f5f5;
  --heading-color: #ffffff;
}

이제 .dark-mode 클래스가 테마를 제어합니다 — 이 클래스가 <body>에 추가되면 변수들이 변경되고 이를 사용하는 모든 요소가 자동으로 업데이트됩니다.

<body class="dark-mode">
<!-- 여기에 페이지 콘텐츠를 작성하세요 -->
</body>

모드를 동적으로 전환하려면 .dark-mode 클래스를 추가하거나 제거하기 위해 JavaScript (JS)라는 다른 언어의 도움이 조금 필요합니다. 이 레슨에서는 <body> 태그에 클래스를 추가하거나 제거하여 수동으로 테스트할 수 있습니다.

챌린지

쉬움

작업 내용:

<style> 섹션 내부에 .dark-mode 클래스를 추가하세요.
CSS 변수를 재정의하여 배경, 텍스트, 제목 및 버튼에 어두운 색상을 설정하세요.
<body> 태그에 class="dark-mode"를 추가하여 테스트하세요.

치트 시트

CSS 변수를 사용하여 다크/라이트 모드 테마를 구현하세요. :root에 라이트 모드 변수를 정의합니다:

:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --heading-color: #000000;
}

요소에 변수를 적용합니다:

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
h1, h2, h3 {
  color: var(--heading-color);
}

변수를 재정의하는 다크 모드 클래스를 생성합니다:

.dark-mode {
  --background-color: #333333;
  --text-color: #f5f5f5;
  --heading-color: #ffffff;
}

<body> 요소에 .dark-mode 클래스를 추가하거나 제거하여 테마를 전환합니다:

<body class="dark-mode">

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Dark/Light Mode Basics</title>
  <style>
    /* Default light theme */
    :root {
      --background-color: #f0f4f8;
      --text-color: #222222;
      --heading-color: #003366;
      --button-bg: #ffcc00;
      --button-text: #000000;
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: var(--heading-color);
      color: white;
      padding: 2rem;
      text-align: center;
    }

    header h1 {
      margin: 0;
      font-size: 2rem;
    }

    main {
      padding: 2rem;
    }

    h2 {
      color: var(--heading-color);
      margin-top: 1.5rem;
    }

    p {
      line-height: 1.6;
    }

    .button {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.75rem 1.5rem;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: none;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
    }

    footer {
      background-color: var(--heading-color);
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Olympic Games 2025</h1>
    <p>Celebrating sports, unity, and excellence</p>
  </header>

  <main>
    <h2>Top Sports</h2>
    <p>From track and field to swimming and gymnastics, the Olympics showcase the best athletes in the world.</p>
    <a href="#" class="button">See Medal Winners</a>

    <h2>Host Cities</h2>
    <p>Explore the exciting host cities where athletes come together to compete at the highest level.</p>
    <a href="#" class="button">Learn More</a>

    <h2>History</h2>
    <p>The Olympic Games have a rich history dating back to ancient Greece, promoting peace, friendship, and fair competition.</p>
  </main>

  <footer>
    &copy; 2025 Olympic Games. All rights reserved.
  </footer>
</body>
</html>