No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
13H
46M
44S
Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Condicionales

8/26
Recursos

Aportes 26

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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);
	}
{#if !styles.darkMode}

{someText}

{:else}

Hello Dark Mode

{/if} . . . <style> .darkMode { color: white; } p { color: var(--theme-color); } </style>

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 鈥榙ark-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 馃槂