Как сделать светлую тему

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

Разбираем CSS

Сначала задаём общие стили для всего документа: шрифт и плавную смену фона, чтобы переход между светлой и тёмной темой был мягче.

body < /* Задаем шрифт для текста на всей странице */ font-family: Arial, sans-serif; /* Добавляем плавный переход для изменения цвета фона. Это сделано для того, чтобы при переключении темы фон менялся плавно */ transition: background-color 0.3s ease; >

Определяем стили для светлой темы. У нас очень простой пример, так что будем менять только цвет фона и цвет текста.

body.light-theme < /* Цвет фона для светлой темы — чёрный */ background-color: #ffffff; /* Основной цвет текста для светлой темы — белый*/ color: #000000; >

Стили для тёмной темы — меняются цвет фона и цвет текста.

/* Темная тема */ body.dark-theme < /* Цвет фона для темной темы */ background-color: #121212; /* Основной цвет текста для темной темы */ color: #ffffff; >

Разбираем JS

Здесь вообще без лишних комментариев.

document.getElementById('themeToggle').addEventListener('click', function() < // Этот код будет выполняться при каждом клике на кнопку // Получаем текущий класс, заданный для элемента body (текущую тему) const currentTheme = document.body.className; // Проверяем, является ли текущая тема светлой if (currentTheme === 'light-theme') < // Если да, меняем тему на темную document.body.className = 'dark-theme'; >else < // Если текущая тема не светлая (или отсутствует), устанавливаем светлую тему document.body.className = 'light-theme'; >>); 

Вот и всё! Заботьтесь о пользователях и они ответят вам тем же. ��

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

Что такое CSS?

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

Как подключить CSS к HTML

Есть несколько способов использования CSS внутри HTML:

Внутренний CSS: внутри раздела HTML-документа, в теге :

Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :

Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.

Этот текст будет красного цвета.
 

Основы синтаксиса CSS

CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.

/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >

Работа с цветом и фоном

Одни из самых основных свойств в CSS — это цвет и фон элементов.

color меняет цвет текста:

background-color меняет фоновый цвет элемента:

Типографика и шрифты

CSS позволяет нам контролировать шрифты на странице:

• font-family задаёт шрифт текста, даже если он нестандартный.
• font-size определяет размер текста.
• font-weight устанавливает жирность шрифта.

Блочная модель

Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .

Внутренние и внешние отступы одной картинкой:

Позиционирование и Flexbox

Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.

.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >

Адаптивный дизайн

С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.

@media (max-width: 600px) < .container < flex-direction: column; >> 

Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ����‍��

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

• 10 июля 2023

Гайд. Как сделать темную тему в приложении за 7 шагов

Может казаться, что разработать темную тему — это простая задача для дизайнера: достаточно следовать гайдлайнам Apple и Google, создать библиотеку цветов и потом добавить каждому цвету дополнительный для темной темы. В реальности все сложнее — текст интерфейса становится нечитабельным, кнопки пропадают, а иллюстрации сливаются с фоном.

Наш арт-директор Катя Токмакова рассказала на Техобзоре, какие сложности возникают при разработке темной темы и как организовать рабочий процесс так, чтобы избежать основных ошибок на старте.

Можете посмотреть выступление целиком или прочитать этот конспект.

Как мы разрабатывали темную тему раньше и что пошло не так

Когда мы внедряли темную тему на первых проектах, то использовали популярный подход — просто выносили все цвета из интерфейса в UI-кит, группировали их по типам и добавляли цветовые стили. Затем мы подбирали для каждого оттенка пару, которая подменяла исходный оттенок в темной теме.

Покажем в деталях на примере Спортмастера — мы зарелизили это приложение в начале 2022 года. Уже после запуска Спортмастер задумался о разработке темного интерфейса. Мы попробовали свой стандартный подход и уперлись в проблему: уже готовый UI-кит приложения плохо адаптировался под темную тему.

Важный нюанс: в реальности у Спортмастера нет темной темы. Мы провели эксперимент и на примере приложения разобрали основные ошибки при создании темного интерфейса.

Если бы мы добавили каждому компоненту дополнительный цвет для темной темы, то при переключении кнопки бы стали слишком темными, текст — нечитабельным, а тапбар — слился с фоном.

На опыте Спортмастера мы поняли, что наш стандартный подход не работает. Тогда мы внедрили новый и разбили его по шагам.

Шаг №1. Сгруппировать элементы интерфейса

После утверждения дизайн-концепции нужно собрать UI-кит из используемых цветов и разбить их по группам, чтобы темный интерфейс работал как надо. Группы могут быть такие:

• Основные цвета и акценты
• Фоны
• Аллерты
• Кнопки
• Разделители и обводки
• Тексты
• Иконки

Тогда дизайнер сможет точечно поменять цвет компонента, не перекрашивая весь интерфейс. Например, дизайнеру надо поменять цвет кнопки в приложении. Он быстро находит нужный цвет в соответствующей группе и локально заменяет его. Этот подход помогает более гибко перевести интерфейс в темную тему.

Шаг №2. Создать стили для всех элементов фона

Это нужно для того, чтобы шторки и плашки не сливались при переключении в темную тему.

Мы выносим три стиля:

• Background — основной цвет фона.
• Surface — используется для того, чтобы выделить смысловые блоки.
• Elevation — нужен для шторок и компонентов основной навигации: навбара и тапбара.

Пример. Если в Спортмастере не вынести стили фонов разного уровня в отдельную группу, то в темной теме всплывающее окно получится одного цвета с фоном.

Когда мы разделяем фоновые стили, то можем гибко назначить второй цвет.

Шаг №3. Вынести стили для обводок и разделителей

Стили для обводок и разделителей помогают локально изменить цвет только у этих компонентов.

Пример. Дизайнер нарисовал интерфейс и передал в разработку. Но потом смотрит на разделитель и думает: «Темновато» или «Светловато». Тогда он начинает править, и в процессе меняет цвета не только у разделителей, но и других элементов тоже. Это происходит из-за того, что один и тот же цвет был назначен элементам, которые не должны были поменяться.

Если же вынести разделители в отдельную группу, то цвет поменяется только для разделителя, а не у всех остальных компонентов.

Шаг №4. Задать разные стили для текста и иконок

Такой подход экономит время. Например, если иконки получатся слишком темными, то их цвет можно быстро заменить. Мы выделяем три стиля для текстов и иконок:

• Body — для основного цвета
• Secondary — для текстов и иконок второго уровня
• Tertiary — для плейсхолдеров

Пример. Мы разработали приложение для электронного гипермаркета Ситилинк. В приложении мы использовали светло-серый цвет для иконок, неактивных точек каунтера, подписей, неактивного тега и плейсхолдеров. После релиза пользователи стали жаловаться, что текст плейсхолдера слишком светлый и виден не на всех устройствах.

Тогда мы сделали потемнее. Местами получилось хорошо, но активные точки каунтера оказались практически того же цвета, что и неактивные, а плейсхолдеры стали выглядеть, как уже заполненный текст. Дизайнеру пришлось перепроверять весь интерфейс и искать, где именно что-то пошло не так.

В интерфейсе есть элементы, которые не должны менять цвет и тон при смене темы. Чтобы при инверсии ничего не сломалось, создаем для таких элементов дополнительные стили: Primary Dark и Primary White.

Пример. Бонусная программа Спортмастера. Текст у экрана бонусов Спортмастера не должен меняться при переключении в темную тему. Если добавить дополнительные стили для текста, то он не перекрасится вместе с остальными компонентами.

Шаг №5. Вынести цвета для ошибок и предупреждений в группу «Алерты»

Это помогает не запутаться и не создавать ошибочные цвета в других группах. Цвета из группы «Алерты» потом можно использовать в уведомлениях, иконках, полях ввода и других семантически подходящих элементах и состояниях, как в светлой, так и в темной теме.

Пример. Вынесли основные цвета алертов в приложении Спортмастера. Используем красный цвет для ошибок, оранжевый — для предупреждений, а зеленый — для подтвержденных действий.

Шаг №6. Создать отдельные мини-темы для каждого типа кнопок

Мы выносим мини-темы для каждого типа кнопки. Выделяем три типа кнопок: Primary, Secondary и Additional. Так мы можем локально поменять цвет кнопки или текста на ней, не нарушив цветовую схему приложения.

Пример. У приложения Спортмастера две Primary-кнопки и по одной кнопке Secondary и Additional. Для каждой из них есть своя тема. Если бы мы использовали один синий цвет для всех кнопок, то Primary-кнопка не изменится в темной теме, а в Secondary получится нечитаемый темно-синий текст на темно-сером фоне.

Если добавить к каждой из кнопок свою мини-тему, то при переключении в темную тему ничего не сломается.

Шаг №7. Объединить единичные элементы в группу «Акценты»

Обычно к середине каждого проекта появляется группа элементов и цветов, которые не ясно, куда поместить. При этом они встречаются в интерфейсе всего один раз: это могут быть звезды рейтинга, каунтеры или иконки избранного.

Чтобы не искать эти элементы по всему интерфейсу, мы выносим их в отдельную группу и так и называем «акценты». Потом акцентные стили можно переиспользовать для других мелких элементов, например, для текстовых полей. И при конвертацию в темную тему они не поменяются.

Но есть нюанс. Объединять разрозненные элементы в одну группу имеет смысл, если проект маленький и таких компонентов в интерфейсе немного. Если дизайнер работает над большой дизайн-системой, то акцентные стили нужно прописывать более детально.

Спасибо за внимание!

15 комментариев
Написать комментарий.

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

1. Ухудшение зрения: Использование темной темы может привести к ухудшению зрения, особенно если пользователь проводит много времени за экраном устройства.

2. Уменьшение продуктивности: Темная тема может снижать продуктивность пользователей, так как труднее читать текст на темном фоне.

3. Увеличение усталости глаз: Пользователи могут чувствовать боль в глазах и усталость при использовании темной темы, особенно в условиях низкой освещенности.

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

5. Ухудшение настроения: Темная тема может вызывать депрессию и ухудшение настроения у пользователей.

В целом, использование темной темы в приложениях может иметь как положительные, так и отрицательные последствия. Пользователям следует оценить свои индивидуальные потребности и принять решение на основе этого.

Темный режим: 8 советов по созданию темного пользовательского интерфейса

Для начала разберемся, что же такое темный режим? Темный режим — это цветовая тема, преимущественно включающая приглушенные оттенки / оттенки серого, которую используют в условиях низкой освещенности. Темные цвета отражают меньше света, поэтому людям удобнее изучать такие интерфейсы. Все благодаря высокому контрасту между светлыми элементами и неброским фоном.

Вступление

Обычно разработчики добавляют на сайт или в приложение специальный переключатель, нажав на который пользователь может активировать темный режим. Последний играет роль дополнительной опции по отношению к стандартной (или светлой) теме.

Этот режим стал довольно популярным, поскольку темный фон выгодно подчеркивает светлый контент. Но какие еще преимущества есть у такого решения?

Преимущества темного режима

1. Темная тема — отличный маркетинговый ход, который поможет компании выделиться среди конкурентов. Насыщенный эффектный фон может стать прекрасным дополнением к визуалу любого бренда.

2. Темный режим снижает нагрузку на глаза в процессе взаимодействия пользователей с вашим продуктом. Он поможет им сконцентрироваться на изучении контента, особенно если интерфейс содержит большое количество текста.

3. Темный режим может сэкономить заряд батареи вашего телефона. Доказано, что в этом случае потребление энергии сокращается в 6 раз за счет того, что дисплей излучает меньше света, а, значит, вы сможете дольше пользоваться устройством без подзарядки.

Обратите внимание: потребление энергии зависит в основном от типа вашего телефона, а не от цветов на экране. Если вы хотите измерить, насколько эффективно темный режим экономит заряд батареи, изучите руководство разработчика для конкретных типов телефонов и экранов.

Некоторые эксперты утверждают, что темный режим позволяет дольше сохранить здоровье глаз, однако другие приходят к противоположным выводам. На мой взгляд, темный режим — это просто тренд. Такой дизайн выглядит элегантно и может сделать сайт вашего бренда более удобным для пользователей.

Итак, давайте рассмотрим лучшие практики, которые помогут вам создать отличный темный интерфейс.

1. Тщательно выбирайте цвета

Не используйте белый цвет на черном фоне (#000)! Вы можете выбрать черный для фона, но тогда необходимо немного затемнить текст. Достаточно, чтобы глаза пользователей не болели из-за слишком высокого контраста.

Когда мы смотрим на чистый белый цвет, наши глаза поглощают больше света. В этом случае шрифты начинают расплываться, особенно на старых моделях мониторов.

Пример слева — читая текст, приходится напрягать глаза, пример справа — чтобы прочитать текст требуется меньше усилий, приглушенные цвета позволяют сконцентрироваться на чтении.

2. Используйте фирменный цвет бренда

Чтобы темный режим выглядел уникально, используйте темную версию основного цвета вашего бренда в качестве фона. Добавьте в интерфейс цветные шрифты, чтобы сделать его еще более особенным! ✨

Комбинация фирменного цвета фона и красочных шрифтов — отличное решение для создания оригинального темного режима. Другой подход — использовать только градации белого и черного цветов. Главное убедитесь, что текст выглядит не слишком причудливо и его легко прочитать.

Оба варианта допустимы. Пример слева — градации белого и черного. Пример справа — выглядит более оригинально и отражает характер бренда.

3. Сделайте цвета менее насыщенными

Не используйте цвета с насыщенностью 100%. В сочетании с темным фоном они создают эффект “дрожания”. Вместо этого выбирайте оттенки с низкой насыщенностью или немного приглушенные версии основных цветов, тогда ваш интерфейс получится по-настоящему удачным.

4. Постарайтесь передать глубину

Используйте шкалу цветов — от темного к светлому — чтобы придать интерфейсу глубину. Не добавляйте элементам тени. Вместо этого используйте рамки, чтобы показать разные уровни глубины UI-элементов.

Сделайте объекты переднего плана светлее, чтобы создать иллюзию, будто они выступают из экрана. Это поможет выстроить эффективную визуальную иерархию.

5. Проверьте уровень контрастности

Темный режим, точно так же как и светлый, должен соответствовать требованиям WCAG (Руководство по обеспечению доступности веб-контента). Это необходимо, чтобы текстовый контент был разборчивым и читабельным. Для проверки уровня контраста, вы можете воспользоваться специальными плагинами.

Вот наши любимые инструменты, которые помогут вам узнать коэффициент контрастности, не покидая любимый графический редактор:

• Stark (плагин для Figma, Sketch и XD)
• Contrast (плагин Figma)
• A11y (плагин Figma)

Пример слева — контрастность недостаточная, справа — оптимальная.

6. Начните с разработки светлого режима

Когда вы трансформируете свой дизайн из светлого режима в темный, размещайте визуальные элементы в том же порядке. Не удаляйте оттенки, чтобы не запутать пользователей. Вместо этого подготовьте цветовую палитру, с помощью которой вы сможете инвертировать существующие цвета без ущерба для эффективности UI.

Существует множество плагинов, которые помогут вам справиться с этой задачей. Вот наши фавориты:

• Appearance (плагин Figma)
• Dark mode magic (плагин Figma)
• Camilo (плагин Sketch)

7. Используйте базовые цвета

Чтобы вам было проще превратить светлую тему в темную, с самого начала создайте список базовых “нейтральных” цветов с фиксированными значениями прозрачности. Такая палитра может сильно упростить вам жизнь.

Используйте эти прозрачные цвета вместо того, чтобы постоянно выбирать разные оттенки серого, и вы без труда конвертируете дизайн в темный режим.

8. Не злоупотребляйте темным режимом

Чаще всего темный режим — отличная идея. Тем не менее, иногда дизайн будет намного эффективнее, если использовать яркие цвета. Темный режим идеален, чтобы помочь пользователю сфокусироваться на задаче, однако ничто не сравнится с кричащим рекламным объявлением, которое бросается вам в глаза в 2 часа ночи на eBay или Amazon.

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

Совет: Если вы разрабатываете продукт для Mac / Windows, сделайте так, чтобы тема автоматически синхронизировалась с текущей темой пользователя. Это поможет произвести на людей хорошее первое впечатление и заставит их почувствовать себя как дома.

Заключение

Следуйте нашим советам, когда будете разрабатывать темный режим для своего цифрового продукта.

Помните, что у вас должна быть веская причина, чтобы имплементировать его в уже существующий и отлично функционирующий продукт. Проанализируйте контент, варианты использования и устройства, на которых будет отображаться дизайн.

Тем не менее, темный режим может сделать продукт эффективнее, особенно если ваши клиенты любят просматривать мемы в темноте, часто пользуются смартфоном ночью или хотят, чтобы он дольше работал без подзарядки.

Полезные ресурсы

• Руководство по материальному дизайну — темная тема
• Вдохновляющие примеры темных интерфейсов
• Figma tokens — плагин, который поможет кастомизировать и адаптировать вашу дизайн-систему под несколько тем.
• Contrast — плагин для проверки контрастности элементов переднего плана и фона

Как добавить тёмную тему на страницу

В последние пять лет в интерфейсном дизайне появилось понятие тёмной темы: это когда фон делают тёмным, а текст — светлым. Это полезно в телефонах для энергосбережения и чтения с экрана ночью. Ну и просто красиво.

Сегодня мы добавим на страницу переключатель тёмной и светлой темы с помощью CSS.

Автопереключение тёмной темы

Современные браузеры умеют определять, что на телефоне или компьютере включена тёмная тема. Для этого разработчики используют такой медиазапрос:

@media screen and (prefers-color-scheme: dark) <>

Если на устройстве используется тёмная тема, то CSS выполнит всё, что написано в фигурных скобках. В нашем случае нам нужно сделать тёмный фон и светлый текст:

@media screen and (prefers-color-scheme: dark) < body < background: black; color: white; >>

Добавим этот код в стили на странице, и задача решена: мы получили поддержку тёмной темы. Если в настройках устройства переключить тему обратно на светлую, то сайт тоже получит белый фон.

Ручное переключение темы

Медиазапросы — это хорошо, но иногда нужно поставить принудительный переключатель темы, чтобы не зависеть от настроек устройства. Например, если нужно отладить тёмную тему, когда у вас на компьютере работает светлая тема.

Чтобы не создавать с нуля страницу, поступим так: создадим копию главной страницы нашего учебного сайта и добавим туда переключатель, который заставит тему смениться.

Настраиваем стили

Единственное, что нам нужно добавить в стили — это два класса: для светлой и тёмной темы:

.theme-dark < background: black; color: white; >.theme-light

Первый класс устанавливает чёрный фон и белый цвет текста, а второй, наоборот, — белый фон и чёрный текст. Цвета здесь можно указывать любые и для любых элементов, а мы для простоты остановимся на двух.

Внешне страница никак не поменяется — мы ещё не применили эти стили. Чтобы это сделать, надо поработать с остальными элементами, например добавить id к тегу — по нему мы будем обращаться к содержимому всей страницы:

Добавляем переключатель

Чтобы мы могли менять светлую тему на тёмную и обратно, добавим простой переключатель. Сделаем его в виде абзаца и добавим его сразу после строки поиска:

Вот что здесь происходит:

onclick=»darkLight()» ← говорим, что должно произойти при нажатии: вызываем функцию darkLight();

style=»cursor: help;»> ← меняем внешний вид курсора при наведении на переключатель;

Включить тёмную тему

← текст надписи.

Переключатель появился на странице, но пока ничего не переключает. Исправим это в скрипте.

Пишем скрипт

Мы указали в свойствах переключателя, что при нажатии нужно выполнить функцию darkLight() — значит, нам нужно добавить её в рабочий скрипт.

Чтобы не зависеть от работы других скриптов и не лезть в их код, сделаем новый js-файл dark.js и положим в него такой код:

// на старте тёмная тема не установлена var dark = false; // получаем доступ ко всей странице и к абзацу с переключателем var a = document.body; var p = document.getElementById("select") // эта функция будет срабатывать при нажатии на переключатель function darkLight() < // если тёмная тема не активна if (!dark) < // добавляем класс с тёмной темой ко всей странице a.className = "theme-dark"; // меняем надпись на переключателе p.innerHTML = "Включить светлую тему"; // а если активна — >else < // добавляем класс со светлой темой ко всей странице a.className = "theme-light"; // меняем надпись на переключателе p.innerHTML = "Включить тёмную тему"; >// меняем значение темы на противоположное dark = !dark; >

Последнее, что осталось сделать, — подключить скрипт в конце HTML-страницы:

Теперь у нас появилась поддержка тёмной темы с моментальным переключением:

Что дальше

Этот способ работает только на одной странице, и после перезагрузки тему нужно переключать заново. В следующий раз сделаем апгрейд — научим сайт запоминать настройки и применять их ко всему сайту. А ещё подружим автопереключение с надписью на переключателе.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.