Cómo crear un conmutador de temas simple con el truco checkbox de CSS

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial, aprenderás a crear un conmutador de temas únicamente con CSS, aprovechando la «técnica con el truco checkbox de CSS» y las variables de CSS.

¿Estás listo para otro desafío con CSS?

Nota: Este tutorial asume que estás familiarizado con esa técnica de CSS junto con los selectores avanzados de CSS (por ejemplo, el combinador general sibling). Si no has escuchado hablar de ellos antes, o necesitas un repaso, revisa los siguientes tutoriales:

Nuestro conmutador de temas con CSS

Este es el conmutador de temas que vamos a crear durante este tutorial:

Please accept marketing cookies to load this content.

Haz clic en cualquiera de los colores en la esquina superior derecha para que veas cómo cambia la apariencia de la página. También puedes usar las teclas de flecha de tu teclado para cambiar los esquemas de color.

1. Empieza con el marcado HTML

Comenzaremos con ocho botones de radio que representarán los colores del tema disponibles. De manera predeterminada, se marcará el primer botón de radio.

A continuación, definiremos un elemento de envoltura que controlará los colores de la página. En su interior colocaremos:

Las etiquetas asociadas para estos botones de radio y
el contenido principal de la página. Esta página presentará algunas cosas sobre 🐧🐧.

Esta es la estructura de la página:

<input type="radio" id="white" name="colors" value="white" checked>
<input type="radio" id="dark" name="colors" value="dark">
<input type="radio" id="red" name="colors" value="red">
<input type="radio" id="green" name="colors" value="green">
<input type="radio" id="yellow" name="colors" value="yellow">
<input type="radio" id="blue" name="colors" value="blue">
<input type="radio" id="purple" name="colors" value="purple">
<input type="radio" id="olive" name="colors" value="olive">
 
<div class="page-wrapper">
  <div class="color-palette">
    <label for="white"></label>
    <label for="dark"></label>
    <label for="red"></label>
    <label for="green"></label>
    <label for="yellow"></label>
    <label for="blue"></label>
    <label for="purple"></label>
    <label for="olive"></label>
  </div>
  <article class="post">
    <div class="container">...</div>
  </article>
</div>

2. Define algunos estilos básicoses

Como siempre, continuaremos con algunos estilos de restablecimiento comunes.

Lo más importante es prestar atención a los siguientes puntos:

Usaremos propiedades personalizadas para definir ocho esquemas de color diferentes. Cada esquema incluirá dos definiciones de color que representarán los colores de la página para un tema específico.
Ocultaremos visualmente los botones de radio moviéndolos fuera de la pantalla. Les asignamos position: fixed porque, en el diseño, la paleta de colores debe permanecer fija a medida que nos desplazamos. Ten en cuenta, que si les asignamos position: absolute, cada vez que hagamos clic en un color de tema, el navegador saltará a la parte superior de la página.

Estos son los estilos de restablecimiento:

    :root { /*WHITE*/ --white-bg-color: #fff; --white-text-color: #000; /*DARK*/ --dark-bg-color: #434343; --dark-text-color: #fff; /*RED*/ --red-bg-color: #ce8082; --red-text-color: #020202; /*GREEN*/ --green-bg-color: #40de7c; --green-text-color: #020202; /*YELLOW*/ --yellow-bg-color: #fdc011; --yellow-text-color: #110d02; /*BLUE*/ --blue-bg-color: #2943a1; --blue-text-color: #d4cbcd; /*PURPLE*/ --purple-bg-color: #dbdbed; --purple-text-color: #29262e; /*OLIVE*/ --olive-bg-color: #838b74; --olive-text-color: #f7f5e4; } * { padding: 0; margin: 0; box-sizing: border-box; } a { color: inherit; } img { max-width: 100%; height: auto; } [type="radio"] { position: fixed; left: -9999px; } label { cursor: pointer; } body { font: 300 20px / 1.5 "Ubuntu", sans-serif; }

3. Establece los estilos principales

A continuación, configuraremos los estilos principales.

Y lo más importante:

Como se describió anteriormente, la paleta de colores siempre permanecerá en la esquina superior derecha mientras nos desplazamos.
Cada color de la etiqueta/tema se verá como un círculo, y su color dependerá del valor de la variable de CSS * -bg-color del esquema de color correspondiente.
Añadiremos un poco de transición cuando cambien los colores de la página.

Estos son los estilos indispensables:

    /*CUSTOM VARIABLES HERE*/ [id="white"] ~ .page-wrapper [for="white"] { background: var(--white-bg-color); } [id="dark"] ~ .page-wrapper [for="dark"] { background: var(--dark-bg-color); } [id="red"] ~ .page-wrapper [for="red"] { background: var(--red-bg-color); } [id="green"] ~ .page-wrapper [for="green"] { background: var(--green-bg-color); } [id="yellow"] ~ .page-wrapper [for="yellow"] { background: var(--yellow-bg-color); } [id="blue"] ~ .page-wrapper [for="blue"] { background: var(--blue-bg-color); } [id="purple"] ~ .page-wrapper [for="purple"] { background: var(--purple-bg-color); } [id="olive"] ~ .page-wrapper [for="olive"] { background: var(--olive-bg-color); } .page-wrapper { padding: 30px 0; transition: all 0.3s ease-in-out; } .color-palette { position: fixed; top: 30px; right: 15px; display: grid; grid-row-gap: 10px; padding: 10px; border-radius: 20px; background: rgba(0, 0, 0, 0.4); } .color-palette label { position: relative; width: 20px; height: 20px; border-radius: 50%; } .color-palette label::before { display: none; content: ""; position: absolute; top: 50%; left: -30px; transform: translateY(-50%); width: 10px; height: 2px; }

4. El truco de chekbox: cambio entre temas

Ahora, ¡vamos a la parte interesante! Cada vez que se hace clic en un color de una etiqueta/tema (es decir, se activa), ocurrirá lo siguiente:

Aparecerá el pseudoelemento ::before de la etiqueta activa. Además, su color dependerá del valor de la variable de CSS * -text-color del esquema de color correspondiente.

The active color theme

Los colores de la página cambiarán suavemente según el esquema de color activo.

Estos son los estilos relacionados:

    /*CUSTOM VARIABLES HERE*/ [type="radio"]:checked ~ .page-wrapper label::before { display: block; } [id="white"]:checked ~ .page-wrapper { color: var(--white-text-color); background: var(--white-bg-color); } [id="white"]:checked ~ .page-wrapper [for="white"]::before { background: var(--white-text-color); } [id="dark"]:checked ~ .page-wrapper { color: var(--dark-text-color); background: var(--dark-bg-color); } [id="dark"]:checked ~ .page-wrapper [for="dark"]::before { background: var(--dark-text-color); } [id="red"]:checked ~ .page-wrapper { color: var(--red-text-color); background: var(--red-bg-color); } [id="red"]:checked ~ .page-wrapper [for="red"]::before { background: var(--red-text-color); } [id="green"]:checked ~ .page-wrapper { color: var(--green-text-color); background: var(--green-bg-color); } [id="green"]:checked ~ .page-wrapper [for="green"]::before { background: var(--green-text-color); } [id="yellow"]:checked ~ .page-wrapper { color: var(--yellow-text-color); background: var(--yellow-bg-color); } [id="yellow"]:checked ~ .page-wrapper [for="yellow"]::before { background: var(--yellow-text-color); } [id="blue"]:checked ~ .page-wrapper { color: var(--blue-text-color); background: var(--blue-bg-color); } [id="blue"]:checked ~ .page-wrapper [for="blue"]::before { background: var(--blue-text-color); } [id="purple"]:checked ~ .page-wrapper { color: var(--purple-text-color); background: var(--purple-bg-color); } [id="purple"]:checked ~ .page-wrapper [for="purple"]::before { background: var(--purple-text-color); } [id="olive"]:checked ~ .page-wrapper { color: var(--olive-text-color); background: var(--olive-bg-color); } [id="olive"]:checked ~ .page-wrapper [for="olive"]::before { background: var(--olive-text-color); }

Quizá te lleve algo de tiempo entender cómo funcionan los estilos antes mencionados. Si este fuera el caso, ¡el inspector del navegador junto con otros tutoriales similares son tus mejores amigos!

Conclusión

¡Eso es todo, amigos! En este breve tutorial, combinamos el poder de la «técnica con el truco checkbox de CSS» y las variables de CSS para crear una página con temas de colores dinámicos. Esperemos que hayas disfrutado de este ejercicio y que lo pruebes en alguno de tus próximos proyectos.

Aquí tienes un recordatorio de lo que creamos:

Please accept marketing cookies to load this content.

Como nota, este es solamente un ejercicio divertido para mostrar lo que puedes lograr con CSS. No se recomienda dejar el elemento label vacío por razones de accesibilidad y se anula su función.

Si quieres crear un conmutador de temas más avanzado y que conserve el color del tema seleccionado al cargar la página, asegúrate de leer este tutorial.

Construir un panel de administración con CSS y un toque de JavaScript

George Martsoukos

17 Mar 2021

¿Alguna vez has desarrollado algo similar con CSS puro para un proyecto? Háznoslo saber saber a través de redes sociales. ¡Como siempre, gracias por leer!

Lectura adicional

Revisa estos tutoriales para que conozcas más sobre las cosas que puede crear con la técnica del truco checkbox de CSS: