Создание тем CSS с помощью переменных
Создание тем CSS с помощью переменных
Использование переменных в 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">Coursme</h2>
<p class="content">Самые лучшие курсы</p>
</div>
<footer>
<p>Все права Не защины ©2024</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;
}В данном блоке кода мы определяем три переменные для цвета фона панели, фона контейнера и цвета текста для светлой темы. Затем, с помощью атрибута [theme='dark'], мы переопределяем эти переменные для темной темы.
Применение переменных к стилям элементов:
body {
font-family: Verdana;
display: flex;
flex-direction: column;
color: var(--text-color);
}
nav {
padding: 1.2rem;
background: var(--panel-bg-color);
}
.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;
}Здесь мы применяем определенные переменные к стилям различных элементов веб-страницы. Например, цвет фона навигационной панели, контейнера и кнопок задается через соответствующие переменные.
Добавление кнопки для переключения тем:HTML
<div>
<input type="button" value="Toggle" id="toggle-theme" />
</div>JavaScript
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");
}
});Здесь мы добавляем кнопку "Нажми меня", которая с помощью JavaScript переключает атрибут theme на элементе <html>, что изменяет применяемую тему.Сейчас мы не будем останавливать на JS, вы можете с ним ознакомиться в нашем курсе по JavaScript.
Заключение
Использование переменных в CSS для создания тем позволяет легко изменять внешний вид веб-страницы с минимальным кодом. Это полезный инструмент для разработчиков, которые стремятся сделать свои проекты более гибкими и пользовательскими.
Будьте первым