Condicionales y Dark Mode en Componentes Svelte

Resumen

¿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!

Emmanuel Rodríguez

student•

De la documentación 🚀, se le conoce a este ejercicio como Style class conditional 🎉

Dentro del archivo App.svelte, se generó una variable global y utilizando una nomenclatura campechana, de BEM y OOP, se modificaron para representar su estado:

...
&lt;style&gt;
...
	:global(:root){
		--color-lightMode: purple;
		--color-darkMode: #bfc2c7;
	}
...
&lt;/style&gt;

Posteriormente, dentro de About.svelte, se especificó mediante una condicional ternaria para que sea determinada el estilo a elegir.

...
&lt;div class=&quot;{!styles.darkMode ? 'text-darkMode' : 'text-lightMode text-UpSize'}&quot;&gt;
...
&lt;/div&gt;

&lt;style&gt;
    .text-darkMode {
        color: var(--color-lightMode);
    }
    .text-lightMode {
		color: var(--color-darkMode);
    }
&lt;/style&gt;

🧐Nota. Es posible agregar más clases a la definición, en alguna respuesta a la condicional, al irlas separando con espacios.

...
&lt;style&gt;
...
    .text-UpSize p {
        font-size: 30px;
    }
&lt;/style&gt;

Jhon Carlos Colorado Angulo

student•

Excelente, buen aporte.

Renzo Mayer

student•

Me encanto la opción de las variables globales para definir el color,

Por otro lado, en mi opinión no usaría clases como .text-darkMode porque agrega complejidad que considero innecesaria en este caso.

Explico: si sabes que nunca vas a tener combinaciones de textos en dark mode y en lightmode no sería necesario ser tan específicos teniendo una clase para cada texto ya que con styles.darkMode tendrías todo lo necesario para que eso pase y solo tener que especificarlo en el texto del css global.

Podría servir en el caso de aumentar el font-size pero no para el darkmode.

Andrés Campuzano Garzón

student•

De esta forma ponen su botón más bonito:

<button on:click={toggle}>DarkMode {styles.darkmode ? '🌘' : '🌞'}</button>

Edgardo Marcano

student•

Mil gracias por el aporte, de esta manera quedaría aun mas estético:

<button on:click={toggle}> {styles.darkMode ? 'LightMode🌞' : 'DarkMode🌒'}</button>

😉

Sergio VO

student•

Pensamos lo mismo :) buen aporte.

Stiven Alejandro Manosalvas Jaime

student•

Listo el reto :) solo redefinit la variable --theme-color cuando se aplica y agregue un transition

	:global(body.dark-mode){
		background-color: #1d3040;
		color: #bfc2c7;
		transition: background-color 300ms, color 300ms;
		--theme-color: #bfc2c7;
	}

John Ruiz

student•

Hola;

Muy buen aporte, gracias.

Luis Alejandro Vera Hernandez

student•

Super cool la transicion!

Guillermo Castaño Vèlez

student•

Esperando la ruta de aprendizaje Desarrollo Font End con Svelte ...

Noe Mikhael Huaccharaque Ruiz

student•

Para los que andan perdidos como yo en Html link en el video

Classlist

https://www.youtube.com/watch?v=y2FDDzzl2X8

Mario Peña

student•

Toggle: toggle es un método de classlist. Recibe dos parámetros, el 1ero es la clase y el 2do es la condición a evaluar. Si solo hay 1 parámetro: alterna el valor de la clase, si existe, la elimina (devuelve false), si no, la añade (devuelve true). Si están los 2 parámetros: si la condición se evalúa como true, se añade la clase indicada, y si se evalúa como false, la elimina.

Felipe Andrés

student•

Muchas gracias, esto sin duda falto explicar en el video!

Gonzalo Pimentel

student•

Reto cumplido!

Francisco Imanol Suarez

student•

Esta clase me compro jaja

Kendy Valladolid

student•

aww!

Me encanta 😍

Juan Pablo Celiz

student•

Me encantó esta clase :D

Naldo Duran

student•

👌

Juan Esteban Galvis

student•

Listo el modo lectura, pues puse el fondo amarillo y texto negro jaja primero organice esto para poder cambiar de dark a lectura, lectura a dark y así:

function toggledark() {
    styles.darkmode = !styles.darkmode;
    styles.lectura = !styles.lectura;
    window.document.body.classList.toggle("dark-mode");
    window.document.body.classList.remove("read-mode");
  }

  function Lectura() {
    styles.lectura = !styles.lectura;
    styles.darkmode = !styles.darkmode;
    window.document.body.classList.toggle("read-mode");
    window.document.body.classList.remove("dark-mode");
  }

Y el condicional simplemente agregue el botón si el modo dark esta encendido:

{#if !styles.darkmode}
    <p>{someText}</p>
  {:else}
    <p>Hello Dark Mode</p>
    <button on:click={Lectura}>Modo Lectura</button>
  {/if}

Wilson Fernando Antury Torres

student•

Estructura de un condicional dentro de un bloque HTML:

{#if !styles.darkMode}
        &lt;p&gt;{someText}&lt;/p&gt;
    {:else}
        &lt;p&gt;
            Hello Dark Mode
        &lt;/p&gt;
    {/if}

Gustavo Arana Osorio

student•

Quisiera saber si es lo mas optimo para cumplir el reto agregue las siguientes lineas.

:global(body.dark-mode p) { color: #ff3e00; }

Juan González

student•

La cuestión con ese código es que va a ser aplicada a todos los componentes de Svelte en el proyecto.

Entonces si por alguna razón se te ocurre poner un <p> dentro de una etiqueta con esa clase, también va a coger ese color y puede que no sea lo esperado.

Jimmy Joel Pecho Malqui

student•

Mi solución siguiente solamente agregue el span dentro del global

	:global(body.dark-mode, span) {
		background-color: #1d3040;
		color: var(--darkmode-color);
	}

Cesar Ibarra

student•

{#if !styles.darkMode}

{someText}

{:else}

Hello Dark Mode

{/if} . . .

Enrique Sardon Manrique

student•

hice algo mas sencillo

App.svelte le agrego el color dark mode

  :global(:root) {
     --color-themeColor: purple;
     --color-darkMode: #bfc2c7;
  }

About.svelte le agrego la clase correspondiente al p y la en el style tambien

<div class="about">
  {#if !styles.darkMode}
    <p>{someText}</p>
  {:else}
    <p class="dark-mode">
      <span>Hello DarkMode</span>
    </p>
  {/if}
  <button on:click={handleClick}>click {count === 0 ? "" : count}</button>
  <button on:click={toggle}>Dark Mode</button>
</div>
<style>
  p {
    color: var(--color-themeColor);
    font-size: 1.5em;
  }
  .dark-mode {
    color: var(--color-darkMode);
  }
</style>

Mateo Morales García

student•

Para resolver el reto (que entendí era cambiar el texto de morado a uno más legible cuando estaba en dark mode) hice esto:

Agregué otras dos variables globales para cada tema, el luminoso y el oscuro, cada una con su prefijo respectivo, light y dark. Y puse que el --theme-color por defecto fuera el valor de --light-theme-color.

	// en App.svelte
	:global(:root) {
		--light-theme-color: purple;
		--dark-theme-color: rgb(199, 48, 199);
		--theme-color: var(--light-theme-color);
	}

Despues, desde el componente DarkModeToggle en la función toggle agregué lo siguiente

    function toggle() {
        styles.darkMode = !styles.darkMode;
        window.document.body.classList.toggle("dark-mode");
	// Obtengo el nodo raíz del documento donde guardamos las variables del tema
        let root = window.document.documentElement;
	// Determino cual es el prefijo del nuevo tema activo
        let modePrefix = styles.darkMode ? 'dark' : 'light';
	// Cambio el valor de --theme-color con style.setProperty al valor de la variable del nuevo tema activo
        root.style.setProperty('--theme-color', `var(--${modePrefix}-theme-color)`);
    }

No se que tan buena solucion sea al escalar el proyecto en cuanto a performance y a organización del código, pero me gustó esta solución, para tener los cambios del tema en un solo componente, y no llenar de ifs el resto de componentes cuando haga falta.

Raul Armas

student•

body.dark-mode body es el elemento, dark-mode es la clase

Reynaldo Francisco Moreno Briceño

student•

En mi caso emplie las Arrow Function, en el boton de darMode utiize un operador ternario para cuando lo pulsen cambie el emoji. Y para el texto use la misma clase .dark-mode. About.svelte

<script>
  //LOGICA
  let someText = "Sun Text";
  let darkText = "Dark Text";
  let count = 0;
  let styles = { darkMode: false };

  const handleClick = () => {
    count += 1;
  };

  const toggle = () => {
    styles.darkMode = !styles.darkMode;
    window.document.body.classList.toggle("dark-mode");
  };
</script>

<div class="About">
  {#if !styles.darkMode}
    <p>
      {someText}
    </p>
  {:else}
    <p>
      {darkText}
    </p>
  {/if}
  <button on:click={handleClick}>Click {count === 0 ? "" : count}</button>
  <button on:click={toggle}
    >{styles.darkMode ? "SunMode🌞" : "DarkMode🌚"}</button
  >
</div>

App.svelte

<script>
  import About from "./components/About.svelte";
  import Text from "./components/Text.svelte";
  import Person from "./components/Person.svelte";
  export let name;
  export let lastName;
  export let age;
  let svelte = "https://arepa.s3.amazonaws.com/svelte-logo.png";

  const data = {
    name: "Reynaldo",
    lastName: "Moreno",
    age: 21,
  };
</script>

<main>
  <h2>Hello {name} {lastName}!</h2>
  <About />
  <Text anotherText="Hola" />
  <Text />
  <Person {...data} />
  <img src={svelte} alt="Logo de Svelte" />
</main>

<style>
  :global(:root) {
    --theme-color: purple;
    --theme-dark: #bfc2c7;
  }

  :global(body) {
    background-color: #f2eee2;
  }

  :global(body.dark-mode) {
    background-color: #1d3040;
    color: var(--theme-dark);
  }

  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>