0Pricing
CSS Academy · Урок

Автоматическое и ручное переключение тёмного режима

Создайте переключатель темы, который по умолчанию учитывает системные предпочтения и позволяет пользователям вручную переопределять их.

«Автоматическое и ручное переключение тёмного режима» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Цель

Идеальная реализация режима dark: по умолчанию автоматически определяет предпочтение OS и предоставляет кнопку переключения, позволяющую пользователям независимо переопределить его, сохраняя предпочтение между загрузками страниц.

Обзор архитектуры

Необходимо обработать три состояния:

  1. Системное предпочтение: используйте prefers-color-scheme с переменными CSS
  2. Переопределение пользователя: dark: задайте класс или атрибут данных на <html>
  3. Переопределение пользователя: светлая тема: задайте другой класс, чтобы предотвратить автоматический режим dark

Настройка токенов CSS

Определите переменные CSS, которые правильно распространяются во всех состояниях:

<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>

Логика переключения JavaScript

Прочитайте сохранённое предпочтение, примените его и обновляйте его при переключении:

<div class="demo" id="theme-demo">Toggle my theme</div>
<div class="demo" data-theme="dark">Dark override example</div>
<button id="toggle-btn">Toggle Theme</button>
<script>
  function toggleTheme() {
    const current = document.getElementById('theme-demo').dataset.theme;
    const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    if (!current) {
      const next = system === 'dark' ? 'light' : 'dark';
      document.getElementById('theme-demo').dataset.theme = next;
    } else {
      delete document.getElementById('theme-demo').dataset.theme;
    }
  }
  document.getElementById('toggle-btn').addEventListener('click', toggleTheme);
</script>

Переключатель с тремя состояниями

Более продвинутый переключатель с тремя состояниями: светлая тема | system | dark:

<div class="demo" id="theme-demo">Cycles: light → system → dark</div>
<div class="demo" data-theme="dark">Dark state example</div>
<p id="state-label">system</p>
<button id="cycle-btn">Cycle Theme</button>
<script>
  const states = ['light', 'system', 'dark'];
  let current = 'system';
  const demo = document.getElementById('theme-demo');
  const label = document.getElementById('state-label');
  document.getElementById('cycle-btn').addEventListener('click', () => {
    current = states[(states.indexOf(current) + 1) % states.length];
    label.textContent = current;
    if (current === 'system') { delete demo.dataset.theme; } else { demo.dataset.theme = current; }
  });
</script>

Предотвращение вспышки неправильной темы

Применяйте сохранённую тему синхронно до отрисовки страницы:

<pre class="code-sample">&lt;!-- In &lt;head&gt;, before any styles --&gt;
&lt;script&gt;
  const t = localStorage.getItem("theme");
  if (t) document.documentElement.dataset.theme = t;
&lt;/script&gt;</pre>

Доступность кнопки переключения

Кнопка переключения должна сообщать текущие состояния средствам чтения с экрана. Обновляйте доступную подпись при переключении:

<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>

Анимированный переход между темами

Плавные переходы цветов при смене темы:

<div class="demo" id="at-demo">Smooth theme transition</div>
<button onclick="document.documentElement.classList.add('theme-transitioning'); const d=document.getElementById('at-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff'; setTimeout(()=>document.documentElement.classList.remove('theme-transitioning'),250);">Toggle</button>

Отслеживание изменений системы

Также реагируйте, если пользователь изменит предпочтение OS, пока страница открыта:

<p id="status">Listening for system theme changes…</p>
<script>
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    document.getElementById('status').textContent = 'System changed to ' + (e.matches ? 'dark' : 'light');
  });
</script>

Значки для режима dark

Меняйте значки для каждого режима. Используйте элемент picture для изображений, учитывающих тему, или CSS, чтобы показывать и скрывать разные значки:

<div>Light: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
<div data-theme="dark">Dark: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>

Итоги: контрольный список реализации

Контрольный список режима dark:

  • Переменные CSS для всех цветовых токенов
  • Медиазапрос prefers-color-scheme для автоматического обнаружения
  • Атрибут data-theme для ручного переопределения
  • localStorage для сохранения предпочтения
  • Встроенный скрипт в head для предотвращения вспышки
  • Доступная кнопка переключения с динамической подписью aria-label

Быстрая проверка

Какой приём предотвращает «вспышку неправильной темы» при загрузке страницы?

Повторение

Полный переключатель режима dark использует переменные CSS для токенов темы, запрос prefers-color-scheme для автоматического обнаружения, атрибут data-theme для ручного переопределения, localStorage для сохранения предпочтения и синхронный скрипт в head для предотвращения вспышки. Для наилучшего взаимодействия с пользователем предусмотрите доступный переключатель с тремя состояниями: светлая тема, system и dark.

Часто задаваемые вопросы

Урок «Автоматическое и ручное переключение тёмного режима» бесплатный?

Да — полный текст урока «Автоматическое и ручное переключение тёмного режима» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Автоматическое и ручное переключение тёмного режима»?

Создайте переключатель темы, который по умолчанию учитывает системные предпочтения и позволяет пользователям вручную переопределять их. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Автоматическое и ручное переключение тёмного режима»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Медиазапрос prefers-color-scheme
  2. Переменные CSS для темизации
  3. Свойство color-scheme
  4. Автоматическое и ручное переключение тёмного режима
← Назад к CSS Academy