Как реализовать светлые или темные режимы в CSS

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

Все это звучит как слишком много работы? Держите вещи простыми с Строитель сайта Отказ

Рабочая группа CSS состоит из членов всех основных поставщиков браузера и других технологических компаний, таких как Apple и Adobe. Apple, недавно запустив свою новую версию MacOS, хотел выбрать способ обнаружить свой новый темный режим в браузере. Чтобы сделать это, Apple выдвинула рекомендацию на спецификацию для нового уровня носителя уровня 5 уровня.

 @Media (предпочитает-цветовая схема: свет | темный)
{...} 

Используя этот медиа-запрос, мы можем обнаружить, если пользователь в настоящее время использует светлый или темный режим в ОС. На данный момент это поддерживается только Preview Preview Safari Preview 69 и выше, но другие браузеры не должны далеко позади.

• Руководство веб-дизайнера к методологии CSS

Чтобы проверить это, вам нужно будет обновить до Mojave 10.14 (MacOS) и выбрал темный внешний вид в системных предпочтениях. Есть несколько способов использовать этот новый носитель для реализации различных тем. Мы рассмотрим несколько из них сейчас в этом руководстве.

01. Настройте страницу

Для начала нам нужно создать некоторые элементы HTML в стиле, поэтому мы начнем с создания новой ручки на кодепене и добавление некоторых элементов. Мы добавим контейнер для нашего контента, чтобы центрировать его и несколько заголовков и текста. Мы установим CSS для использования Sass, чтобы использовать вложенность в CSS.

 & lt; class = "Контент-контейнер" & gt;
& lt; h1 & gt; заголовок One & lt; / h1 & gt;
& lt; h2 & gt; заголовок два & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt; 

02. Стиль основных элементов

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

 Тело {
Семья шрифта: «Merriweather», Serif;
Фон-цвет: #eded;
Цвет: # 212121;
прокладки: 1.618Rem;
Высота линии: 1.618;
Размер шрифта: 16px;
} 

03. Контейнер стиля

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

 .Content-Container {
прокладки: 1.618REM 3.236REM;
Макс-ширина: 48,54rem;
Маржа: 3.236rem Auto;
Фон-цвет: #fff;
Box-Shadow: 0 0 12px 6px RGBA (0,0,0,0,05);
Граница-радиус: .269666667Rem;
} 

04. Добавить цвет выделенного цвета

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

 & lt; span class = "текст - альфа" и gt; lorem ipsum & lt; / span & gt;
.text - альфа {
Цвет: # C3423F;
} 

05. Воспользуйтесь средств массовой информации

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

 @media (предпочитает-цветовая схема: темная)
{
тело {
Фон-цвет: # 111;
}
} 

06. Переопределить оставшиеся стили

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

. Содержит контейнер
{
цвет белый;
Фон-цвет: # 212121;
}
.text - альфа {
Цвет: # 50A8D8;
} 

07. Осположимость

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

08. Возьми другой подход

Так как еще мы можем решить проблему? Давайте посмотрим на CSS-фильтры. Одно из ценностей, которые мы можем использовать на CSS-фильтрах, - это «инвертировать», поэтому мы могли бы просто применить это к HTML и инвертировать все цвета, давая нам «темный режим».

 @Media (предпочитает-цветная схема: темная) {
html {
Фильтр: инвертировать (100%);
}
} 

09. Добавить изображения

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

10. Используйте пользовательские свойства

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

11. Создание пользовательских свойств

Для использования пользовательских свойств мы определяем их в верхней части наших CSS внутри « :корень «Элемент. Корневой элемент имеет такую ​​же области, как HTML, поэтому будет доступен во всем мире. Нам нужно определиться с именами переменной и определить их значения.

: root {
- Background-Color: #eded;
--page-background: #fff;
--тек-цвет: # 212121;
--color-alpha: # C3423F;
} 

12. Примените наши пользовательские свойства

Теперь у нас есть некоторые пользовательские свойства, которые можно использовать, мы можем использовать их в наших CSS. Мы начнем с тела и применяем фоновые и текстовые цвета. Для того, чтобы использовать пользовательскую собственность, мы используем var (- пользовательское имущественное имя) «Синтаксис.

 Тело {
Фон-цвет: var (- background-color);
Цвет: var (- текстовый цвет);
} 

13. Примените оставшиеся свойства

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

 .Content-Container {
Фон-цвет: var (- фон страницы);
}
.text - альфа {
Цвет: var (- цвет-альфа);
} 

14. Заново добавьте средства массовой информации

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

 @Media (предпочитает-цветная схема: темная) {
:корень {
- цвет - цвет: # 111;
- Prescage-background: # 212121;
--тек-цвет: #eded;
--color-alpha: # 50A8D8;
}
} 

15. Возьмите полный контроль

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

: root {
...
- Стража-тень: 0 0 12px 6px RGBA
(0,0,0,05);
} 

16. Примените тень

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

 @Media (предпочитает-цветная схема: темная) {
:корень {
...
--page-Shadow:
0 0 12px 6px RGBA (0,0,0.33)
;
}
}
.Content-Container {
...
Коробка-тень: var (- страница-тень);
} 

17. Добавьте изображение

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

 IMG {
Ширина: 100%;
Высота: авто;
плыть налево;
Макс-ширина: 300 пикселей;
Маржинально-право: 1.618Rem;
Маржина - снизу: 1.618Rem;
} 

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

18. Добавить больше компонентов

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

 .Button {
Дисплей: встроенный гибкий;
Семья шрифта: наследование;
Фон-цвет: var (- цвет-альфа);
Цвет: var (- текстовый цвет);
прокладки: 1.618REM 3.236REM;
Граница: 0 Нет;
Границы-радиус: 0,25rem;
Текстовое украшение: нет;
}

19. Создать кнопку Hover Styles

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

 .Button {
...
Переход: фоновый цвет 150 мс,
Цвет 150 мс;
& amp;: hover {
Фон-цвет: var (- текстовый цвет);
Цвет: var (- цвет-альфа);
}
} 

20. Сделайте кнопку пользовательских свойств

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

 .Button {
- фона на фоне: var (- цвет-альфа);
--Путтон-текст: var (- background-color);
Фон-цвет: var (- button-background);
Цвет: var (- кнопка-текст);
...
} 

21. Используйте объем

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

 .Button {
...
& amp;: hover {
- Оботтон-фон: # AE3937;
@media (предпочитает-цветовая схема: темнота) {
- набонный фон: # 2E98D1;
- Тест-текст: var (- background-
цвет);
}
}
}

Работа на сборке с командой? Держите свой процесс сплоченным с приличным облачное хранилище Отказ

Эта статья была первоначально опубликована в выпуске 283 журнала Creative Web Design Веб-дизайнер Отказ Купить проблему 283. или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• Начните с CSS Art
• 12 Большие ресурсы анимации CSS
• Какие рамки CSS вы должны использовать?