Condicionales y Dark Mode en Componentes Svelte

¿Cómo implementar un modo oscuro en Svelte?

A medida que interfaces más atractivas y funcionales se convierten en la norma, la incorporación de características como el modo oscuro ha ganado popularidad. En Svelte, un framework para crear interfaces de usuario, podemos lograr esto de manera sencilla y efectiva a través del uso de condicionales. Aquí te explicamos paso a paso cómo implementar un modo oscuro y manipular condicionales para mostrar diferentes contenidos.

¿Cómo crear y manipular una variable en Svelte?

Para manejar el estado del modo oscuro en Svelte, primero crearemos una variable para almacenar este valor.

let styles = { darkMode: false };

Esta variable styles contendrá un objeto que, en este caso, comienza con darkMode en false. La idea es alternar este valor entre true y false para activar o desactivar el modo oscuro.

¿Cómo alternar el modo oscuro con una función?

Es esencial crear una función que permita alternar el valor de darkMode mediante un clic. Aquí es donde entra en juego la función toggle:

function toggle() {
  styles.darkMode = !styles.darkMode;
  document.body.classList.toggle('dark-mode', styles.darkMode);
}

Esta función hace precisamente eso: cambia el estado de darkMode. Utiliza ! para negar el valor actual, y con document.body.classList.toggle adiciona o remueve la clase dark-mode al body del documento.

¿Cómo modificar el CSS para reflejar cambios visuales?

El siguiente paso es asegurarse de que los cambios de estado del modo oscuro se reflejen visualmente. Para esto, modificaremos las variables globales de CSS para que se activen al cambiar la clase dark-mode.

body.dark-mode {
  background-color: #121212; /* Cambia a un color de fondo oscuro */
  color: #ffffff; /* Cambia el color del texto a blanco */
}

Al aplicar esta clase al body, el fondo de la aplicación cambiará a un color oscuro y el texto se volverá blanco, haciendo el contenido más amigable para la lectura en ambientes de poca luz.

¿Cómo activar el modo oscuro con un botón?

Dentro de tu componente Svelte, necesitas crear un botón que active el toggle cuando se haga clic:

<button on:click={toggle}>Toggle Dark Mode</button>

Este botón ejecutará la función toggle, alternando así el modo oscuro cada vez que el usuario lo presione.

¿Cómo usar condicionales para mostrar u ocultar contenido?

La estructura condicional if-else permite modificar el contenido basado en el estado de darkMode.

{#if !styles.darkMode}
  <p>Modo claro activado</p>
{:else}
  <p>Hello Dark Mode</p>
{/if}

• Si darkMode es false (modo claro), mostrará "Modo claro activado".
• Si darkMode es true, mostrará "Hello Dark Mode".

¿Qué sigue después de implementar el modo oscuro?

Ahora que entiendes cómo implementar una función básica de modo oscuro en Svelte, te animo a que sigas explorando. Personaliza los colores y añade más funcionalidades como transiciones para mejorar la experiencia del usuario. ¡El conocimiento es clave, y aplicar lo aprendido es fundamental para tu crecimiento profesional!