Как сделать темную тему
Перейти к содержимому

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

  • автор:

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

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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'; >>); 

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

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

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

Селектор потомков (пробел)

Селектор потомков (пробел)

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

Пример использования селектора потомков:

article p

В данном примере все абзацы (

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

Селектор потомков особенно полезен в следующих случаях:

  1. Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
  2. Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
  3. Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.

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

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

  • 4 апреля 2024

Псевдокласс :link

Псевдокласс :link

Псевдокласс :link в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.

Пример использования псевдокласса :link для стилизации непосещенных ссылок:

a:link

В данном примере для всех непосещенных ссылок устанавливается синий цвет ( #007bff ) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных ( :visited ) ссылок.

При работе с :link , важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover и :active , чтобы обеспечить интерактивный и отзывчивый интерфейс.

Пример полного набора стилей для ссылок:

a:link < color: #007bff; text-decoration: none; >a:visited < color: #666; >a:hover < color: #0056b3; text-decoration: underline; >a:active

В этом примере задаются различные стили для всех возможных состояний ссылок: :link для непосещённых, :visited для посещённых, :hover при наведении курсора и :active в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.

  • 4 апреля 2024

Псевдокласс :focus

Псевдокласс :focus

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

Пример использования :focus :

input:focus

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

Псевдокласс :focus особенно важен для:

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

Применение :focus в сочетании с другими псевдоклассами, такими как :hover и :active , позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.

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

  • 4 апреля 2024

Селектор по id

Селектор по id

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

Селектор по id обозначается знаком решетки ( # ) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id мощным инструментом для стилизации конкретных элементов.

Пример использования селектора по id :

Этот элемент уникален.
#uniqueElement

В этом примере элементу с id="uniqueElement" присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.

Преимущества использования селектора по id :

  1. Точечная стилизация: Селектор по id позволяет применять стили к конкретному элементу, не влияя на другие элементы.
  2. Высокий приоритет: Стили, примененные через селектор по id , имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.
  • Идентификатор должен быть уникальным в пределах всего HTML-документа.
  • Злоупотребление селекторами по id может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно.
  • Селекторы по id могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.

Использование селектора по id является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.

  • 4 апреля 2024

Несколько селекторов через запятую

Несколько селекторов через запятую

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

Пример использования списка селекторов для стилизации заголовков, абзацев и элементов списка:

h1, h2, p, li

Применение списка селекторов эффективно во многих ситуациях, включая:

  • Применение базовых стилей текста (цвет, шрифт, размер) к различным типам элементов.
  • Сброс стандартных отступов для элементов списка, параграфов и других блочных элементов.
  • Установка общих стилей для интерактивных элементов, таких как кнопки и ссылки, в различных частях веб-страницы.

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

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

  • 4 апреля 2024

Смежный селектор +

Смежный селектор +

Смежный селектор в CSS, обозначаемый знаком плюс ( + ), позволяет выбирать элемент, который является непосредственным соседом другого элемента на одном и том же уровне иерархии DOM. Этот селектор эффективен для применения стилей к элементу, находящемуся в точном последовательном порядке после другого элемента в коде HTML.

Пример применения смежного селектора:

h2 + p

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

При использовании смежного селектора важно учитывать следующие моменты:

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

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

  • 4 апреля 2024

Селектор type

Селектор type

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

Пример использования селектора типа для стилизации всех абзацев (

) на странице:

В этом примере каждому абзацу на веб-странице задаётся шрифт Helvetica, межстрочный интервал в полтора раза больше размера шрифта и тёмно-серый цвет текста. Это базовая стилизация, которая может быть переопределена дополнительными селекторами, например, селекторами класса или идентификатора.

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

При работе с селекторами типа рекомендуется следовать принципам чистого кода и лучшим практикам веб-разработки:

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

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

  • 4 апреля 2024

Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

&#128161; Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

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

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc() . Ну, поехали!

&#128640; Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 5 марта 2024

Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.

&#128640; Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px , pt ), так и в относительных ( em , % , без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
  • 4 марта 2024

Свойство text-align

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

&#128640; Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

  • left — выравнивает текст по левому краю контейнера.
  • right — выравнивает текст по правому краю контейнера.
  • center — центрирует текст внутри контейнера.
  • justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align :

Этот код выравнивает текст внутри всех параграфов ( ) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align .

  • 4 марта 2024

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

В 2019 году Apple представил темный режим на iOS. С тех пор у нас выросло число заказов на темную тему — клиенты хотят внедрять темный режим оформления в приложениях и влиять на метрики: снижать показатели отказов, увеличивать число прочитанных страниц, растить лояльность пользователей или просто быть в тренде. Может казаться, что разработать темную тему — это простая задача для дизайнера: достаточно следовать гайдлайнам Apple и Google, создать библиотеку цветов и потом добавить каждому цвету дополнительный для темной темы. В реальности все сложнее — текст интерфейса становится нечитабельным, кнопки пропадают, а иллюстрации сливаются с фоном. Наш арт-директор Катя Токмакова рассказала на Техобзоре, какие сложности возникают при разработке темной темы и как организовать рабочий процесс так, чтобы избежать основных ошибок на старте. Можете посмотреть выступление целиком или прочитать этот конспект. Группы цветов в UI-ките СпортмастераЕсли бы мы добавили каждому компоненту дополнительный цвет для темной темы, то при переключении кнопки бы стали слишком темными, текст — нечитабельным, а тапбар — слился с фоном. Что пошло не так в темной темеНа опыте Спортмастера мы поняли, что наш стандартный подход не работает. Тогда мы внедрили новый и разбили его по шагам.

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

Добавили в UI-кит цвета всех элементов интерфейса и сгруппировали их

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

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

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

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

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

Стили фона

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

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

Стиль Elevation в темной теме

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

Как правильно использовать стили фона разного уровня в темной теме

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

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

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

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

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

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

Стили для текста и иконок

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

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

В приложении Ситилинк был один стиль для всех текстов

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

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

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

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

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

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

Алерты в приложении Спортмастер

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

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

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

Кнопки в приложении Спортмастер

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

Как должны выглядеть кнопки в темной теме

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

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

К группе «акценты» относятся элементы, которые нечасто используются в интерфейсе

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

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

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

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

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

Выключение и отключение темного режима

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

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

Если вы используете ОС Android 9 или более ранней версии:

Если вы используете ОС Android 10 или более поздней версии:

  • ​​​​​​​​​​​​​​Выберите пункт Dark («Темный»), чтобы включить темный режим.
  • Выберите пункт Light («Светлый»), чтобы отключить темный режим.

Внесенные изменения сохранятся автоматически.

Темный режим доступен для iOS 13 или более поздней версии.

  • Выберите пункт Dark («Темный»), чтобы включить темный режим.
  • Выберите пункт Light («Светлый»), чтобы отключить темный режим.

Внесенные изменения сохранятся автоматически.

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

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

Евгений Кучерявый

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

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

Рассказываем, как выбирать цвета, которые не будут сильно контрастировать, как сменить тему и сделать так, чтобы она не сбрасывалась при обновлении страницы.

Цвета, от которых не будет больно

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

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

Использовать настолько контрастные цвета рекомендуется только тогда, когда вы добавляете отдельную тему для людей с плохим зрением. В остальных случаях лучше сделать фон сероватым, например, #f4f4f4, а шрифт — угольным (#373737) или почти чёрным (#111111).

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

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

Определившись с палитрой, можно начинать работать над сайтом.

Создание сайта

Для начала создадим страницу, для которой сделаем несколько тем:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *