Crearea temelor CSS cu ajutorul variabilelor
Utilizarea variabilelor în CSS ne permite să creăm și să aplicăm teme pe o pagină web. De exemplu, să definim următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Teme în 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>Principală</a>|<a>Contacte</a>|<a>Despre</a></nav>
<div class="container">
<div>
<input type="button" value="Toggle" id="toggle-theme" />
</div>
<h2 class="title">Titlu</h2>
<p class="content">Conținut principal...</p>
</div>
<footer>
<p>Toate drepturile rezervate (c)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>În stilurile paginii sunt definite de fapt două teme, fiecare conținând trei variabile:
: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;
}Prima temă este una luminoasă, iar a doua este una întunecată. În cazul temei întunecate, elementul rădăcină, adică elementul html, va avea atributul theme="dark".
Apoi, aceste variabile sunt utilizate pentru a seta proprietățile de stil ale elementelor individuale.
Pentru a comuta între teme, butonul are un simplu cod JavaScript atașat, care verifică prezența atributului theme (ceea ce va însemna că este setată tema întunecată). Dacă atributul există, acesta este eliminat, iar dacă nu există, este adăugat.
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");
}
});În rezultat, la apăsarea butonului se va produce comutarea globală a stilurilor paginii web:
