Si queremos intercambiar diferentes temas en una web, como puede ser por el famoso tema oscuro (dark theme), nos encontramos una limitación de estructura si trabajamos con SASS. No podemos modificar sus variables después de ser compilado a CSS. Un desastre si queremos unificar todos los estilos en un solo fichero precompilado. Nos limita su propia naturaleza, un asunto que si es posible solucionar con CSS3. Puede ser que al estudiar este famoso metalenguaje encuentres en su documentación condicionales como @if, pero no te dejes engañar; dentro de CSS no existen (a día de hoy) por lo que no llegarán a generarse. El resultado final es inflexible y constante, a no ser, por supuesto que usemos Javascript… o usemos el truco que voy a enseñarte.
Demo
A continuación puedes jugar con una demostración. Pulsa en el botón derecho para ver como se cambia.
Tutorial
Debes utilizar 2 clases:
- .theme: Define las variables para el tema principal, en este caso colores claros. En este ejemplo se nombrará como
theme, y debe estar en una etiqueta que envuelva toda tu página, como<body>o<html>.
<!-- Tema principal -->
<body class="theme"></body>
- .theme–dark: Define las variables para el tema secundario. En este ejemplo se nombrará como
theme--darksobrescribiendo los colores a un estilo oscuro. Se situará en la misma etiqueta que albergatheme.
<!-- Tema oscuro -->
<body class="theme theme--dark"></body>
Con ello claro debes intercalar las variables SASS con las variables de CSS.
// Colores principales
$color__primary: #F9E900
$color__secondary: #F98A4F
$color__text: #000
// Colores oscuros
$color__primary--dark: #000103
$color__secondary--dark: #515052
$color__text--dark: #FFFFFA
// Tema principal
.theme
--color__primary: #{$color__primary}
--color__secondary: #{$color__secondary}
--color__text: #{$color__text}
// Tema oscuro
&--dark
--color__primary: #{$color__primary--dark}
--color__secondary: #{$color__secondary--dark}
--color__text: #{$color__text--dark}
Ahora ya podemos empezar a utilizarlos, pero declarando las variables de CSS.
body
font-family: Dosis
background-color: var(--color__secondary)
color: var(--color__text)
article
background-color: var(--color__secondary)
border: 1px solid var(--color__primary)
padding: 2rem
Por si tienes dudas de como funciona puedes ver el resultado precompilado.
body {
font-family: Dosis
background-color: var(--color__secondary)
color: var(--color__text)
}
.theme {
--color__primary: #F9E900;
--color__secondary: #F98A4F;
--color__text: #000;
}
.theme--dark {
--color__primary: #000103;
--color__secondary: #515052;
--color__text: #FFFFFA;
}
body {
font-family: Dosis;
background-color: var(--color__secondary);
color: var(--color__text);
}
article {
background-color: var(--color__secondary);
border: 1px solid var(--color__primary);
padding: 2rem;
}
Ejemplo de la DEMO
HTML
Las etiquetas utilizadas en el ejemplo es el siguiente.
<!-- Añade la clase .theme--dark para activarlo -->
<body class="theme">
<!-- Contenido de la DEMO -->
<main>
<div class="container">
<article>
<h1>Dark mode with pure SASS</h1>
<p>
I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
</p>
<p>
When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath.
</p>
</article>
</div>
</main>
</body>
SASS
// Colors light
$color__primary: #F9E900
$color__secondary: #F98A4F
$color__text: #000
// Colors dark
$color__primary--dark: #000103
$color__secondary--dark: #515052
$color__text--dark: #FFFFFA
// Theme light
.theme
--color__primary: #{$color__primary}
--color__secondary: #{$color__secondary}
--color__text: #{$color__text}
// Theme dark
&--dark
--color__primary: #{$color__primary--dark}
--color__secondary: #{$color__secondary--dark}
--color__text: #{$color__text--dark}
body
font-family: Dosis
background-color: var(--color__secondary)
color: var(--color__text)
article
background-color: var(--color__secondary)
border: 1px solid var(--color__primary)
padding: 2rem
{{ comments.length }} comentarios