<div id="contentMain">


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615172425/11_thzwnv.jpg" class="img-fluid">
<br/>
</center>
</div>


<table>
	<tr>
		<td>Hoy vamos a crear una función muy de moda en estos tiempos que es la de activar el modo claro/oscuro en nuestra página web, usaremos React con su Framework Next.js para ello.
</td>
	</tr>
</table>

<h1></h1>
<p><br><br>




<p>Crearemos una carpeta en el escritorio de nombre <code>toggle-dark-mode</code>/</p>
<p>Una vez creado la carpeta navegamos hacia ella y ejecutamos </p>

<div><b></b><br/></div>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm init --yes
</code>
</pre>
</div>
<br>


<p>Instalaremos los siguientes modulos:</p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">npm i react react-dom next react-ios-switch
</code>
</pre>
</div>
<br>

<p>Es momento de codear</p>



<p>Crearemos una carpeta <code>public/</code> y crearemos nuestras rutas (.js)</p>

<p><b>public/index.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Layout from "../components/Layout";
import Head from "next/head";
const index = () => {
  return (
    &lt;>
      &lt;Head>
        &lt;title>
          Modo Oscuro | Claro en  Next.js  | Jfdesousa7 | tupaginaonline.net
        &lt;/title>
      &lt;/Head>
      &lt;Layout>
        &lt;div className="main-container">
          &lt;h1>Toggle Dark Mode Next.js !!&lt;/h1>
        &lt;/div>
      &lt;/Layout>
    &lt;/>
  );
};
export default index;
</code>
</pre>
</div>
<br>


<p><b>public/about.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Layout from "../components/Layout";
import Head from "next/head";
const about = () => {
  return (
    &lt;>
      &lt;Head>
        &lt;title>
          Modo Oscuro | Claro en  Next.js - About | Jfdesousa7 | tupaginaonline.net
        &lt;/title>
      &lt;/Head>
      &lt;Layout>
        &lt;div className="main-container">
          &lt;h1>About&lt;/h1>
        &lt;/div>
      &lt;/Layout>
    &lt;/>
  );
};
export default about;
</code>
</pre>
</div>
<br>


<p><b>public/portfolio.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Layout from "../components/Layout";
import Head from "next/head";
const portfolio = () => {
  return (
    &lt;>
      &lt;Head>
        &lt;title>
          Modo Oscuro | Claro en  Next.js - Portfolio | Jfdesousa7 | tupaginaonline.net
        &lt;/title>
      &lt;/Head>
      &lt;Layout>
        &lt;div className="main-container">
          &lt;h1>Portfolio&lt;/h1>
        &lt;/div>
      &lt;/Layout>
   &lt;/>
  );
};
export default portfolio;
</code>
</pre>
</div>
<br>


<p><b>public/contact.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Layout from "../components/Layout";
import Head from "next/head";
const contact = () => {
  return (
    &lt;>
      &lt;Head>
        &lt;title>
          Modo Oscuro | Claro en  Next.js - Contact | Jfdesousa7 | tupaginaonline.net
        &lt;/title>
      &lt;/Head>
      &lt;Layout>
        &lt;div className="main-container">
          &lt;h1>Contact&lt;/h1>
          &lt;br>&lt;/br>
          &lt;p>&lt;a className="link" href="https://hive.blog/@jfdesousa7">Jfdesousa7&lt;/a>&lt;/p>
          &lt;p>&lt;a className="link" href="https://tupaginaonline.net">tupaginaonline.net&lt;/a>&lt;/p>
        &lt;/div>
      &lt;/Layout>
    &lt;/>
  );
};
export default contact;
</code>
</pre>
</div>
<br>


<p>Crearemos un archivo <code>_app.js</code> que es donde importaremos nuestros estilos personalizados</p>

<p><b>public/_app.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import '../styles.css';
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} />
  }
</code>
</pre>
</div>
<br>


<p>Crearemos en la raiz nuestro estilo .css</p>

<p><b>style.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
:root {
  --font-family: 'Raleway', sans-serif;
}
*,
*::before,
*::after {
    margin : 0;
    box-sizing: border-box;
}
.theme-dark {
    --dark-text: #292929;
    --dark-background: #2F4550;
    --light-background: #586F7C;
    --accent: #b8dbd9;
    --button-border: #b8dbd9;
    --light-text: #F9F8F8;
  }
.theme-light {
    --dark-text: #5E4B56;
    --accent: #dbe7e4;
    --button-border: #5E4B56;
    --dark-background: #DBE7E4;
    --light-text: #5E4B56;
    --light-background: #EDDCD2;
  }
body {
    font-family: var(--font-family);
    background-color: var(--dark-background);
    color: var(--dark-text);
    height: 100vh;
    transition: all ease-in-out .7s;   
}
nav {
    background-color: var(--dark-background);
    color: var(--light-text);
    padding: 2em;
  }
  nav ul {
      display : flex;
      justify-content: space-between;
  }
  nav ul li {
      list-style: none;
  }
  nav ul li a {
      cursor: pointer;
      color: var(--light-text);
      font-weight: 800;
      text-decoration: none;
  }
.main-container {
    background-color: var(--light-background);
    padding: 4rem
}
.link {
    color: var(--light-text);
}
@media screen and (max-width:412px) {
    nav ul {
        display : flex;
        flex-direction: column;
        align-items: center;
        gap: 1em
    }
}
</code>
</pre>
</div>
<br>





<h3>Componentes</h3>


<p><b>components/Header.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import Toggle from "../components/Toggle";
import Link from "next/link";
const Header = () => {
  return (
    &lt;nav>
      &lt;ul>
       &lt;li>
          &lt;Link href="/">
            &lt;a>Inicio&lt;/a>
          &lt;/Link>
        &lt;/li>
        &lt;li>
          &lt;Link href="/about">
            &lt;a>Nosotros&lt;/a>
          &lt;/Link>
        &lt;/li>
        &lt;li>
          &lt;Link href="/portfolio">
            &lt;a>Portafolio&lt;/a>
          &lt;/Link>
        &lt;/li>
        &lt;li>
          &lt;Link href="/contact">
            &lt;a>Contacto&lt;/a>
          &lt;/Link>
        &lt;/li>
        &lt;li>
          &lt;Toggle />
        &lt;/li>
      &lt;/ul>
    &lt;/nav>
  );
};
export default Header;
</code>
</pre>
</div>
<br>



<p><b>components/Layout.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import { useEffect } from "react";
import { keepTheme } from "../utils/themes";
import Header from "./Header";
import Head from "next/head";
const Layout = ({ children }) => {
  useEffect(() => {
    keepTheme();
  });
  return (
    &lt;>
      &lt;Head>
        &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" />
      &lt;/Head>
      &lt;Header />
      {children}
    &lt;/>
  );
};
export default Layout;
</code>
</pre>
</div>
<br>



<p><b>components/Toggle.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import { useEffect, useState } from "react";
import { setTheme } from "../utils/themes";
import Switch from "react-ios-switch";
export default function Toggle() {
  const [checked, setChecked] = useState(true);
  const handleOnClick = () => {
    if (localStorage.getItem("theme") === "theme-dark") {
      setTheme("theme-light");
      setChecked(false);
    } else {
      setTheme("theme-dark");
      setChecked(true);
    }
  };
  useEffect(() => {
    if(localStorage.getItem("theme")){
      if (localStorage.getItem("theme") === "theme-dark") {
        setChecked(true);
      } else {
        setChecked(false);
      }
    }else{
      setChecked(true);
    }
  }, []);
  return ( 
    &lt;div className="light_dark">
      &lt;label>
        &lt;span className="">Modo light&lt;/span>
      &lt;/label>
      &lt;Switch
        onColor="black"
        offColor="gold"
        checked={checked}
        onChange={handleOnClick}
      />
      &lt;label>
        &lt;span className="">Modo dark&lt;/span>
      &lt;/label>
    &lt;/div>
  );
}
</code>
</pre>
</div>
<br>


<p>Crearemos dentro una carpeta en la raiz llamada <code>utils/</code> un archivo con dos funciones</p>
<p><b>utils/themes.js</b></p>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">export function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}
export function keepTheme() {
  if (localStorage.getItem('theme')) {
    if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-dark');
    } else if (localStorage.getItem('theme') === 'theme-light') {
      setTheme('theme-light')
    }
  } else {
    setTheme('theme-dark')
  }
}
</code>
</pre>
</div>
<br>



<h2>Puedes probar el modo oscuro/claro en el link de abajo</h2>

<h2 style="color:red">click en el enlace <a href="https://dark-mode-jfdesousa7-next.herokuapp.com/" target="_blank">https://dark-mode-jfdesousa7-next.herokuapp.com/</a></h2>


<br/>


<table><tr><td><h3>Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima! </h3></td>
</tr>
</table>
<br/>



<h4>Visite mi sitio web oficial para presupuestos y mucho más</h4>

<center><a href="https://tupaginaonline.net" target="_blank"><b>TupaginaOnline.net</b></a></center>


</div>