Condicionales

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:

...
<style>
...
	:global(:root){
		--color-lightMode: purple;
		--color-darkMode: #bfc2c7;
	}
...
</style>

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

...
<div class="{!styles.darkMode ? 'text-darkMode' : 'text-lightMode text-UpSize'}">
...
</div>

<style>
    .text-darkMode {
        color: var(--color-lightMode);
    }
    .text-lightMode {
		color: var(--color-darkMode);
    }
</style>

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

...
<style>
...
    .text-UpSize p {
        font-size: 30px;
    }
</style>

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

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

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;
	}

Esperando la ruta de aprendizaje Desarrollo Font End con Svelte …

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

Classlist

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

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.

Reto cumplido!

Esta clase me compro jaja

aww!

Me encanta 😍

Me encantó esta clase 😄

👌

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}

Estructura de un condicional dentro de un bloque HTML:

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

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

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

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>

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.

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

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>
  <h1>Hello {name} {lastName}!</h1>
  <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>

Para el reto añadí en en el global de dark-mode los colores
Ustedes cómo lo hicieron?

Mi solución al reto:

1. En App.svelte dentro de style

:global(:root) {
    --bg-color: '#f2eee2';
    --text-color: '#0084f6';
}

1. En About.svelte, creamos 2 objetos

  const lightTheme = {
    '--bg-color': '#f2eee2',
    '--text-color': '#0084f6',
  };

  const darkTheme = {
    '--bg-color': '#1d3040',
    '--text-color': '#bfc2c7',
  };

1. Creamos una función auxiliar

  function addTheme(theme) {
    const styles = document.documentElement.style;
    
    const customStyles = Object.keys(theme);
    for (const style of customStyles) {
      styles.setProperty(style, theme[style]);
    }
  }

1. La función toggle quedaría así:

  function toggle() {
    style.darkMode = !style.darkMode
    //window.document.body.classList.toggle('dark-mode')

    if(style.darkMode) {
      addTheme(darkTheme)
    } else {
      addTheme(lightTheme)
    }
  }

Soy al unico que le causo cringe que el if no abra y cierre de la misma manera ? jajaja , me sigue gustando mas el render conditional de React

No me funciona el darkmode. SI el renderizado de elementdos dentro del DOM pero no el toggle de la classes ‘dark-mode
’

Condicionales muy parecido a la sintaxis de handlebarsjs para creación de templates para email.

  {#if !styles.darkMode}
    <p>{someText}</p>
  {:else}
    <p>Hello DarkMode</p>
  {/if}

La función toogle de la classList en un elemento html como el body o un div solo verifica si la clase existe la remueve si no existe la adiciona.

// if visible is set remove it, otherwise add it
 window.document.body.classList.toggle("dark-mode");

aww.

Me encanta 😃