Создание тем CSS с помощью переменных

Последнее обновление: 18.11.2018

Использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Темы в CSS3</title>
        <style>
		:root{
		  --panel-bg-color: #dfe4ea;
		  --container-bg-color: #f1f2f6;
		  --text-color: #2f3542;
		}
		:root[theme='dark'] {
		  --panel-bg-color: #2f3542;
		  --container-bg-color: #57606f;
		  --text-color: #ced6e0;
		}
		* {
		  margin: 0;
		}
		html{
		  height: 100%;
		}
		body{
		  height: 100%;
		  font-family: Verdana;
		  display: flex;
		  flex-direction: column;
		  color: var(--text-color);
		}
		nav{
		  padding: 1.2rem;
		  background: var(--panel-bg-color);
		}
		nav a{
			padding: 1.1rem;
		}
		.container{
		  flex: 1;
		  padding: 1rem;
		  background: var(--container-bg-color);
		}
		footer{
		  padding: 1rem;
		  background: var(--panel-bg-color);
		}
		input[type=button] {
		  color: var(--text-color);
		  background: var(--panel-bg-color);
		  
		  padding: 0.3rem;
		  margin: 0.2rem;
		  font-size: 1rem;
		}
		</style>
    </head>
    <body>
        <nav class="navbar"><a>Главная</a>|<a>Контакты</a>|<a>О сайте</a></nav>
		<div class="container">
		  <div>
			<input type="button" value="Toggle" id="toggle-theme" />
		  </div>
			<h2 class="title">Заголовок</h2>
			<p class="content">Основное содержимое...</p>
		</div>
		<footer>
		  <p>Все права разрешены ©2018</p>
		</footer>
		<script>
		const toggleBtn = document.querySelector("#toggle-theme");
		toggleBtn.addEventListener("click", function() {
		  if(document.documentElement.hasAttribute("theme")){
			document.documentElement.removeAttribute("theme");
		  }
		  else{
			document.documentElement.setAttribute("theme", "dark");
		  }
		});
		</script>
    </body>
</html>

В стилях страницы определены фактически две темы, которые содержат три переменных:

:root{
	--panel-bg-color: #dfe4ea;
	--container-bg-color: #f1f2f6;
	--text-color: #2f3542;
}
:root[theme='dark'] {
	--panel-bg-color: #2f3542;
	--container-bg-color: #57606f;
	--text-color: #ced6e0;
}

Первая тема - условно светлая, вторая - условно темная. При темной теме корневой элемент, то есть элемент <html> будет иметь атрибут theme="dark".

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

Для переключения тем у кнопки через несложный код javascript установлен обработчик нажатия, который проверяет наличие атрибута "theme" (что будет означать, что установлена темная схема). И при наличии атрибута убирает его, а при его отсутствии, наоборот, устанавливает.

const toggleBtn = document.querySelector("#toggle-theme");
toggleBtn.addEventListener("click", function() {
	if(document.documentElement.hasAttribute("theme")){
		document.documentElement.removeAttribute("theme");
	}
	else{
		document.documentElement.setAttribute("theme", "dark");
	}
});

В результате при нажатии на кнопку произойдет глобальное переключение стилей веб-страницы:

Переключение тем в CSS и HTML

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850