Темы одного цвета html

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

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

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

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

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

// Выбираем кнопку 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, которые помогут справиться с большой базой кода. С другой стороны, если ваш проект должен поддерживать устаревшие браузеры, тогда потребуется другой подход.

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

Источник

W3.CSS Цвет темы

Cinque Terre (пять земель) является частью Итальянской Ривьеры. Береговая линия с пятью деревнями: Монтероссо, Вернацца, Корнилья, Манарола и Риомаджоре является объектом Всемирного наследия ЮНЕСКО.

Монтероссо

Монтероссо-аль-Маре находится в центре небольшого естественного залива, защищенный небольшой искусственный риф, в Ривьера Ла Специя. Это самая северная деревня Чинкве-Терре.

Верназза

Вернацца является еще одним из пяти городов региона Чинкве-Терре. Вернацца является четвертым городом в северном направлении. Это не имеет никакого автомобильного движения, и является одним из вернейших «рыбацких деревень» на итальянской Ривьере.

нижний колонтитул

Цвет темы

С W3.CSS, легко настроить свои приложения с помощью собственных цветовых тем.

пример

Предустановленные темы

В HTML-приложениях, вы можете ограничить использование цветов, выбирая различные оттенки из предопределенных цветов:

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

Фильмы 2014

замороженный

Виноваты звезды

Мстители

Фильмы 2014

замороженный

Виноваты звезды

Мстители

Частные темы

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

Вы можете ссылаться на частной теме в теге , или вы можете поместить частную тему в теге :

пример

Добавление градиенты

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

Я использовал l2 и l1 цвета с синей темой, чтобы создать этот градиент:

пример

.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%)>

Цвет темы

Вот некоторые загружаемые цветовые темы, вдохновленные Материалов Google:

Style Sheet	Описание
W3-тема-amber.css	Цветовая тема Amber
W3-тема-black.css	Цветовая тема Черный
W3-тема-blue.css	Цветовая тема Синий
W3-тема-сине-grey.css	Цвет Стиль Синий Серый
W3-тема-brown.css	Цветовая тема Коричневый
W3-тема-cyan.css	Цветовая тема Cyan
W3-тема темно-grey.css	Цвет Стиль Темно-серый
W3-тема-глубоко orange.css	Цветовая тема Deep Orange
W3-тема-глубоко purple.css	Цветовая тема Deep Purple
W3-тема-green.css	Цветовая тема Зеленый
W3-тема-grey.css	Цвет Стиль Серый
W3-тема-indigo.css	Цветовая тема Indigo
W3-тема-khaki.css	Цветовая тема Хаки
W3-тема-светло-blue.css	Цветовая тема Light Blue
W3-тема-светло-green.css	Цветовая тема Светло-зеленый
W3-тема-lime.css	Цветовая тема Известь
W3-тема-orange.css	Цветовая тема Оранжевый
W3-тема-pink.css	Цветовая тема Розовый
W3-тема-purple.css	Цветовая тема Фиолетовый
W3-тема-red.css	Цветовая тема Красный
W3-тема-teal.css	Цветовая тема Teal
W3-тема-yellow.css	Цветовая тема Желтый

Источник