Создание тёмной темы с CSS-переменными: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия заданий поможет вам научиться использовать CSS-переменные (также известные как Custom Properties) для создания переключаемых тем оформления, в частности, светлой и тёмной. Вы попрактикуетесь в объявлении переменных в :root, их применении к элементам и переопределении для создания альтернативной темы. Задания построены от простого объявления переменных до применения их к компонентам и использования селекторов для переключения тем. Теория не предоставляется, упор сделан на практику заполнения пропущенных частей кода.

Список тем

Объявление глобальных переменных для светлой темы

Начнем с основ. CSS-переменные обычно объявляются в псевдоклассе :root, чтобы сделать их глобально доступными. Ваша задача - объявить две переменные: одну для основного цвета фона и одну для основного цвета текста светлой темы. Заполните пропуски, чтобы определить псевдокласс и имена переменных.

CSS

input1 {
  input2: #FFFFFF;
  input3: #333333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
}

                     input1 {
  input2: #FFFFFF;
  input3: #333333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
}

HTML

<body>
  <h1>Светлая тема</h1>
  <p>Это основной текст страницы.</p>
</body>

Используйте псевдокласс `:root` для объявления глобальных переменных. Имена переменных должны начинаться с двух дефисов (`--`). Например: `--main-bg-color: #ffffff;`. В данном задании вам нужно указать селектор `:root` и завершить объявление переменных `--bg-color` и `--text-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Применение переменных к элементам

Теперь, когда переменные объявлены, их нужно применить к свойствам CSS. Используйте функцию `var()` для применения ранее определенных переменных `--bg-color` и `--text-color` к соответствующим свойствам элемента `body`. Заполните пропуски.

CSS

:root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
  --padding-base: 15px;
}

body {
  background-color: input1(--bg-color);
  color: input2(--text-color);
  font-family: sans-serif;
  padding: var(input3);
}

                     :root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
  --padding-base: 15px;
}

body {
  background-color: input1(--bg-color);
  color: input2(--text-color);
  font-family: sans-serif;
  padding: var(input3);
}

HTML

<body>
  <h1>Применение переменных</h1>
  <p>Цвет фона и текста теперь задаются через переменные.</p>
</body>

Чтобы использовать значение CSS-переменной, используйте функцию `var()` и передайте ей имя переменной в качестве аргумента. Например: `color: var(--my-variable);`. В этом задании примените `--bg-color` к `background-color` и `--text-color` к `color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Определение переменных для тёмной темы

Для создания тёмной темы нужно переопределить значения переменных. Обычно это делается с помощью класса или атрибута на `body` или `html`. Ваша задача - определить те же переменные (`--bg-color`, `--text-color`), но с другими значениями, внутри селектора для тёмной темы. Заполните пропуски, чтобы указать селектор и переопределить переменные.

CSS

:root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
}

input1 {
  input2: #1a1a1a; /* Тёмный фон */
  input3: #e0e0e0; /* Светлый текст */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
  transition: background-color 0.3s, color 0.3s;
}

                     :root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
}

input1 {
  input2: #1a1a1a; /* Тёмный фон */
  input3: #e0e0e0; /* Светлый текст */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
  transition: background-color 0.3s, color 0.3s;
}

HTML

<body class="dark-theme">
  <h1>Тёмная тема</h1>
  <p>Теперь значения переменных переопределены для тёмной темы.</p>
</body>

Чтобы переопределить переменные для тёмной темы, используйте селектор, который будет активировать эту тему (например, класс `.dark-theme` на элементе `body` или `html`). Внутри этого селектора объявите те же переменные, что и в `:root`, но с новыми значениями. В данном задании используйте селектор `body.dark-theme` и переопределите переменные `--bg-color` и `--text-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование атрибута data-* для темы

Вместо класса можно использовать data-атрибуты для управления темой. Это считается более семантичным подходом. Перепишите предыдущее правило так, чтобы оно срабатывало при наличии атрибута `data-theme="dark"` на элементе `html`. Заполните пропуск в селекторе.

CSS

:root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
  --link-color: #007BFF;
}

input1 {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #64B5F6;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--link-color);
}

                     :root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
  --link-color: #007BFF;
}

input1 {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #64B5F6;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--link-color);
}

HTML

<html data-theme="dark">
<body>
  <h1>Тема через data-атрибут</h1>
  <p>Теперь тема управляется атрибутом 'data-theme'.</p>
  <a href="#">Пример ссылки</a>
</body>
</html>

Для выбора элемента с определенным data-атрибутом используется селектор атрибута. Например, `[data-theme="dark"]` выберет любой элемент с атрибутом `data-theme`, значение которого равно `dark`. В данном задании вам нужно использовать селектор `html[data-theme="dark"]`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Резервные значения для переменных

Иногда переменная может быть не определена. Функция `var()` позволяет указать резервное (fallback) значение, которое будет использовано в таком случае. Добавьте резервное значение к переменной `--button-bg-color`, чтобы кнопка имела синий фон, если переменная не задана.

CSS

:root {
  /* --button-bg-color: #FFC107; */ /* Представим, что эта переменная не всегда определена */
  --button-text-color: #333333;
}

.button {
  display: inline-block;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(input1, #007BFF);
  color: var(--button-text-color);
  font-size: 16px;
}

                     :root {
  /* --button-bg-color: #FFC107; */ /* Представим, что эта переменная не всегда определена */
  --button-text-color: #333333;
}

.button {
  display: inline-block;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(input1, #007BFF);
  color: var(--button-text-color);
  font-size: 16px;
}

HTML

<body>
  <button class="button">Кнопка</button>
  <p>Эта кнопка использует резервное значение для фона.</p>
</body>

Резервное значение указывается в функции `var()` через запятую после имени переменной: `var(--my-variable, fallbackValue)`. Например: `color: var(--text-color, black);`. В данном задании добавьте резервное значение `#007BFF` для переменной `--button-bg-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Темизация компонента 'Карточка'

Применим наши знания для стилизации компонента 'Карточка'. Определите переменные для фона карточки (`--card-bg`) и тени (`--card-shadow`) в `:root` и переопределите их для тёмной темы (`[data-theme="dark"]`). Затем используйте эти переменные для стилизации класса `.card`. Заполните пропуски.

CSS

:root {
  --bg-color: #f8f9fa;
  --text-color: #212529;
  input1: #ffffff; /* Фон карточки (светлая тема) */
  input2: 0 2px 4px rgba(0,0,0,0.1); /* Тень карточки (светлая тема) */
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  input3: #2c2c2c; /* Фон карточки (тёмная тема) */
  input4: 0 2px 4px rgba(255,255,255,0.1); /* Тень карточки (тёмная тема) */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.card {
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  background-color: var(input5);
  box-shadow: var(input6);
  max-width: 300px; /* Ограничение ширины для iframe */
}

.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: 3px;
}

                     :root {
  --bg-color: #f8f9fa;
  --text-color: #212529;
  input1: #ffffff; /* Фон карточки (светлая тема) */
  input2: 0 2px 4px rgba(0,0,0,0.1); /* Тень карточки (светлая тема) */
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  input3: #2c2c2c; /* Фон карточки (тёмная тема) */
  input4: 0 2px 4px rgba(255,255,255,0.1); /* Тень карточки (тёмная тема) */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.card {
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  background-color: var(input5);
  box-shadow: var(input6);
  max-width: 300px; /* Ограничение ширины для iframe */
}

.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: 3px;
}

HTML

<html data-theme="dark">
<body>
  <h1>Темизация карточки</h1>
  <div class="card">
    <img src="https://naytikurs.ru/img/7.png" alt="Abstract image">
    <p>Это содержимое карточки, фон и тень которой меняются в зависимости от темы.</p>
  </div>
</body>
</html>

Сначала объявите переменные `--card-bg` и `--card-shadow` в `:root` со значениями для светлой темы. Затем переопределите их в селекторе `[data-theme="dark"]` со значениями для тёмной темы. Наконец, примените эти переменные к свойствам `background-color` и `box-shadow` у селектора `.card` с помощью функции `var()`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Наследование и локальные переменные

CSS-переменные наследуются дочерними элементами. Также можно объявлять переменные локально для конкретного компонента или элемента. Объявите локальную переменную `--highlight-color` внутри класса `.highlight` и используйте её для задания цвета фона этого элемента. Эта переменная не будет доступна вне `.highlight`.

CSS

:root {
  --bg-color: #f0f0f0;
  --text-color: #333;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #ddd;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
}

.highlight {
  input1: yellow; /* Локальная переменная */
  padding: 5px;
  margin-top: 10px;
  background-color: var(input2);
  color: #000; /* Цвет текста для выделения */
}

                     :root {
  --bg-color: #f0f0f0;
  --text-color: #333;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #ddd;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
}

.highlight {
  input1: yellow; /* Локальная переменная */
  padding: 5px;
  margin-top: 10px;
  background-color: var(input2);
  color: #000; /* Цвет текста для выделения */
}

HTML

<html data-theme="light">
<body>
  <h1>Локальные переменные</h1>
  <p>Этот текст обычный.</p>
  <p class="highlight">Этот текст использует локальную переменную для фона.</p>
</body>
</html>

Объявите переменную `--highlight-color` прямо внутри селектора `.highlight`, например: `.highlight { --highlight-color: yellow; }`. Затем используйте `var(--highlight-color)` для свойства `background-color` в том же селекторе. Обратите внимание, что тема (светлая/тёмная) не влияет на эту локальную переменную напрямую, если она не переопределена в селекторе темы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переопределение локальной переменной темой

Локальные переменные тоже можно переопределять в зависимости от темы. Переопределите локальную переменную `--highlight-color` из предыдущего задания для тёмной темы, чтобы фон выделенного текста лучше сочетался с тёмным окружением. Используйте селектор, сочетающий тему и класс элемента.

CSS

:root {
  --bg-color: #f0f0f0;
  --text-color: #333;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #ddd;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
}

.highlight {
  --highlight-color: yellow;
  padding: 5px;
  margin-top: 10px;
  background-color: var(--highlight-color);
  color: #000;
}

input1 {
  input2: #444; /* Новый фон для выделения в темной теме */
  color: #eee; /* Новый цвет текста для выделения в темной теме */
}

                     :root {
  --bg-color: #f0f0f0;
  --text-color: #333;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #ddd;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  padding: 15px;
}

.highlight {
  --highlight-color: yellow;
  padding: 5px;
  margin-top: 10px;
  background-color: var(--highlight-color);
  color: #000;
}

input1 {
  input2: #444; /* Новый фон для выделения в темной теме */
  color: #eee; /* Новый цвет текста для выделения в темной теме */
}

HTML

<html data-theme="dark">
<body>
  <h1>Переопределение локальной переменной</h1>
  <p>Этот текст обычный для тёмной темы.</p>
  <p class="highlight">Этот текст использует переопределенную локальную переменную для фона в тёмной теме.</p>
</body>
</html>

Чтобы переопределить локальную переменную для конкретного элемента в тёмной теме, используйте комбинированный селектор, например: `[data-theme="dark"] .highlight`. Внутри этого селектора переопределите переменную `--highlight-color`, задав ей новое значение, подходящее для тёмного фона.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку