Темы на тему css

Смена темы сайта через CSS-переменные

Всем привет. Меня зовут Петр Цой. Я нахожусь в поисках своей первой работы в качестве ReactJS разработчика. Есть хороший опыт самостоятельной разработки коммерческих сайтов. В качестве примера и моего резюме выступает одноименный сайт petrtcoi.com. Ссылка на GitHub.

Если вам нужен начинающий специалист, пишите!

На сайте сейчас кот. В ближайшее время сделаю приличную фотографию и размещу ее.

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

Если округлить, то добиться этого можно двумя путями:

• через JavaScript, меняя свойства соответствующих переменных;
• через CSS, меняя значения CSS-переменных;

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

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

На скриншоте ниже показан результат смены темы на моем сайте.

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

Для реализации данной возможности я вынес переменные, связанные с темой в отдельный файл.

Здесь заданы переменные для цвета текста и заднего фона. В базовом варианте — для темной темы, ниже — для светлой темы «light».

Для красоты также добавлена характеристика —change-theme-duration: 0.5s;, чтобы цвета менялись не мгновенно, но с небольшой задержкой.

Рядом, в этой же папке, разместим вспомогательный файл со списком возможных тем. У нас их две.

Далее CSS-переменные темы прописываются в файле с глобальными стилями.

Все, что теперь требуется, так это повесить на наш компонент обработчик, который будет устанавливать на корневой элемент требуемый нам атрибут.

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

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

• Позже к проекту подключу Redux и подобные «глобальные» эффекты будут проводить через него. Все будет аккуратно лежать в одном месте и, по крайней мере, будет просто найти нужный участок кода.
• Подобные CSS-трюки постараюсь ограничить рамками отдельных элементов.

Главное преимущество CSS-подхода привело и к сложности его тестирования. Так как стандартная библиотека для unit-тестов @testing-library попросту не «видит», какие именно параметры скрыты за названиями классов, то она и не в состоянии проверить, какой цвет установлен у элемента, находится ли он в зоне видимости и т.д.

В итоге, для тестирования смены темы я использовал e2e тестирование с помощью Playwright. Это не так удобно, как быстрые unit-тесты, но работает.

Подробнее про тестирование напишу в своей следующей записи.Спасибо за внимание.

Источник

W3.CSS Color Themes

With W3.CSS, it is easy to customize your applications with color themes.

Movies 2014

Frozen

The Fault in Our Stars

The Avengers

Movies 2014

Frozen

The Fault in Our Stars

The Avengers

All you have to do is add a link to a predefined (or home made) theme:

Example

Predefined Themes

These are the predefined themes in W3.CSS:

w3-theme-red	Try it
w3-theme-pink	Try it
w3-theme-purple	Try it
w3-theme-deep-purple	Try it
w3-theme-indigo	Try it
w3-theme-blue	Try it
w3-theme-light-blue	Try it
w3-theme-cyan	Try it
w3-theme-teal	Try it
w3-theme-green	Try it
w3-theme-light-green	Try it
w3-theme-lime	Try it
w3-theme-khaki	Try it
w3-theme-yellow	Try it
w3-theme-amber	Try it
w3-theme-orange	Try it
w3-theme-deep-orange	Try it
w3-theme-blue-grey	Try it
w3-theme-brown	Try it
w3-theme-grey	Try it
w3-theme-dark-grey	Try it
w3-theme-black	Try it
w3-theme-w3schools	Try it

Adding Gradients

One reader sent us this suggestion: You might want to consider adding a gradient for each theme.

I used the l2 and l1 colors from the blue theme to create this gradient:

Example

.w3-theme-gradient <
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)>
.w3-theme-gradient <
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)>
.w3-theme-gradient <
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)>
.w3-theme-gradient <
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)>
.w3-theme-gradient <
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)>

Downloadable Color Themes

Here are some downloadable color themes inspired by Google’s Material Design:

Style Sheet	Description
w3-theme-amber.css	Color Theme Amber
w3-theme-black.css	Color Theme Black
w3-theme-blue.css	Color Theme Blue
w3-theme-blue-grey.css	Color Theme Blue Grey
w3-theme-brown.css	Color Theme Brown
w3-theme-cyan.css	Color Theme Cyan
w3-theme-dark-grey.css	Color Theme Dark Grey
w3-theme-deep-orange.css	Color Theme Deep Orange
w3-theme-deep-purple.css	Color Theme Deep Purple
w3-theme-green.css	Color Theme Green
w3-theme-grey.css	Color Theme Grey
w3-theme-indigo.css	Color Theme Indigo
w3-theme-khaki.css	Color Theme Khaki
w3-theme-light-blue.css	Color Theme Light Blue
w3-theme-light-green.css	Color Theme Light Green
w3-theme-lime.css	Color Theme Lime
w3-theme-orange.css	Color Theme Orange
w3-theme-pink.css	Color Theme Pink
w3-theme-purple.css	Color Theme Purple
w3-theme-red.css	Color Theme Red
w3-theme-teal.css	Color Theme Teal
w3-theme-yellow.css	Color Theme Yellow

Источник

Переключение темы

Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении — в большинстве случаев это светлая тема (хотя мы можем позволить браузеру пользователя сделать этот выбор за нас, как вы увидите дальше). Также должен быть способ переключиться на другую тему (что можно сделать автоматически, как вы тоже увидите) — например, пользователь щёлкает по кнопке и цветовая тема меняется. Для этого существует несколько подходов.

Использование класса для

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

Это пример скрипта для кнопки, переключающей данный класс.

// Выбираем кнопку const btn = document.querySelector('.btn-toggle'); // Отслеживаем щелчок по кнопке btn.addEventListener('click', function() < // Затем переключаем (добавляем/удаляем) класс .dark-theme для body document.body.classList.toggle('dark-theme'); >)

Вот как мы можем использовать эту идею.

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

Основная идея такого подхода состоит в том, что мы стилизуем элементы как обычно, назовём это нашим режимом «по умолчанию». Затем создаём полный набор цветовых стилей с помощью класса, заданного в элементе , который мы можем использовать в качестве «тёмного» режима. Допустим, по умолчанию применяется светлая цветовая схема. Все эти «светлые» стили написаны точно так же, как вы обычно пишете CSS. Учитывая наш HTML, применим глобальный стиль к и к .

Довольно неплохо. Теперь у нас есть тёмный текст (#222) и тёмные ссылки (#0033cc) на светлом фоне (#fff). Начало нашей темы «по умолчанию» положено.

Теперь переопределим значения этих свойств, но в этот раз для другого класса.

body < color: #222; background: #fff; >a < color: #0033cc; >/* Стили Тёмной темы */ body.dark-theme < color: #eee; background: #121212; >body.dark-theme a

Стили тёмной темы будут потомками того же родительского класса — в нашем примере это .dark-theme , который мы добавили к тегу .

Как «переключать» классы у для доступа к тёмным стилям? Мы можем использовать JavaScript! Выберем класс кнопки ( .btn-toggle ), добавим отслеживание щелчка, а затем вставим класс тёмной темы ( .dark-theme ) в список классов элемента . Это эффективно отменит все установленные нами «светлые» цвета, благодаря каскаду и специфичности.

Вот полный рабочий код в действии. Пощёлкайте по кнопке для переключения на тёмный режим и выхода из него.

Использование разных таблиц стилей

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

К примеру, светлая тема по умолчанию, вроде light-theme.css.

Затем создаём стили для тёмной темы и сохраняем их в отдельном файле, который назовём dark-theme.css.

/* dark-theme.css */ body < color: #eee; background: #121212; >body a

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

Мы используем идентификатор #theme-link , который можно выбрать через JavaScript, чтобы снова переключаться между светлым и тёмным режимами. Только на этот раз мы переключаем файлы вместо классов.

// Выбираем кнопку const btn = document.querySelector(".btn-toggle"); // Выбираем таблицу стилей const theme = document.querySelector("#theme-link"); // Отслеживаем щелчок по кнопке btn.addEventListener("click", function() < // Если текущий адрес содержит "light-theme.css" if (theme.getAttribute("href") == "light-theme.css") < // …то переключаемся на "dark-theme.css" theme.href = "dark-theme.css"; // В противном случае… >else < // …переключаемся на "light-theme.css" theme.href = "light-theme.css"; >>);

Использование пользовательских свойств

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

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

// Выбираем кнопку const btn = document.querySelector('.btn-toggle'); // Отслеживаем щелчок по кнопке btn.addEventListener('click', function() < // Затем переключаем (добавляем/удаляем) класс .dark-theme для body document.body.classList.toggle('dark-theme'); >)

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

Теперь мы можем переопределить эти значения для класса .dark-theme , как мы это уже делали в первом методе.

С тем же успехом мы могли бы определить наши пользовательские свойства внутри :root . Это вполне легальная и даже обычная практика. В таком случае все определения стилей темы по умолчанию будут помещены внутрь :root <> , а все свойства темной темы войдут внутрь :root.dark-mode <> .

Использование скриптов на стороне сервера

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

 $themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark'; ?>   "> ">Переключатель тёмной темы 

Мы можем попросить пользователя отправить запрос GET или POST. Затем позволим нашему коду (в данном случае PHP) применить соответствующий класс к при перезагрузке страницы. В данной демонстрации я использую запрос GET (параметры URL).

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

 $themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark'; ?>    " rel="stylesheet"> ">Переключатель тёмной темы 

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

Какой метод выбрать?

«Правильный» метод зависит от требований вашего проекта. Например, если вы работаете над большим проектом, то можете использовать свойства CSS, которые помогут справиться с большой базой кода. С другой стороны, если ваш проект должен поддерживать устаревшие браузеры, тогда потребуется другой подход.

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

Источник