No hay duda de que el modo oscuro está de moda en estos días. Cada vez más aplicaciones ofrecen la posibilidad de cambiar a un tema oscuro, y por una buena razón. Si está buscando agregar el modo oscuro a su aplicación React, hay algunas cosas que deberá hacer. En este artículo, aprenderá cómo agregar el modo oscuro a una aplicación React usando los ganchos useState y useEffect.

¿Qué es el modo oscuro?

El modo oscuro es un tema que cambia la paleta de colores de una aplicación de claro a oscuro. Hoy en día, la mayoría de las aplicaciones tienen la capacidad de cambiar entre los modos claro y oscuro. Esto puede ser útil para aquellos que prefieren trabajar en un ambiente oscuro o para aquellos a quienes les resulta más agradable a la vista.

¿Por qué usar el modo oscuro?

Hay varias razones por las que es posible que desee utilizar el modo oscuro en su aplicación React. Echemos un vistazo a algunos de los más populares.

1. Mejore la duración de la batería

Uno de los beneficios del modo oscuro es que puede ayudar a mejorar la duración de la batería en dispositivos con pantallas OLED o AMOLED. Esto se debe a que los píxeles más oscuros requieren menos energía para mostrarse.

instagram viewer

2. Reducir la fatiga visual

Si te encuentras navegando por la web o usando aplicaciones por la noche, el modo oscuro puede ayudar a reducir la fatiga visual. Esto se debe a que disminuye la cantidad de luz blanca o azul brillante que se emite desde la pantalla.

3. Crea una experiencia más inmersiva

Algunas personas encuentran que el modo oscuro crea una experiencia más inmersiva. Esto puede ser especialmente cierto cuando se usan aplicaciones o sitios web con mucho contenido, como aplicaciones de noticias o redes sociales.

Cómo agregar el modo oscuro a una aplicación React

Agregar el modo oscuro a una aplicación React es relativamente simple. Los pasos necesarios para agregar el modo oscuro a su aplicación React se enumeran a continuación.

Antes de comenzar, deberá asegurarse de tener un Configuración de la aplicación React.

1. Use el enlace useState

Lo primero que deberá hacer es crear una variable de estado para rastrear el tema actual de su aplicación. Esto se puede hacer usando el enlace useState. Para esto, debe tener un conocimiento básico de cómo trabajar con el gancho useState.

importar Reaccionar, { estado de uso } de 'reaccionar';
funciónaplicación() {
 const [tema, establecerTema] = usarEstado('luz');
devolver (
`Aplicación ${tema}`}>
<h1>¡Hola Mundo!</h1>
</div>
 );
}
exportardefecto aplicación;

El fragmento de código importa el gancho useState de React y crea una variable de estado llamada tema. La variable de tema rastrea el tema actual de la aplicación, que el código establece como "ligero" de forma predeterminada.

2. Agregar un botón de alternar

A continuación, agregue un botón de alternar a la aplicación para que los usuarios puedan cambiar entre el modo claro y oscuro. Esto se puede hacer con el siguiente código:

importar Reaccionar, { estado de uso } de 'reaccionar';
funciónaplicación() {
 const [tema, establecerTema] = usarEstado('luz');
constante alternarTema = () => {
 si (tema 'luz') {
 establecerTema('oscuro');
 } más {
 establecerTema('luz');
 }
 };
devolver (
`Aplicación ${tema}`}>
<botón onClick={toggleTheme}>Alternar tema</button>
<h1>¡Hola Mundo!</h1>
</div>
 );
}
exportardefecto aplicación;

El fragmento de código anterior incluye una función toggleTheme para cambiar la variable de estado del tema entre 'claro' y 'oscuro', así como un botón para llamar a la función toggleTheme cuando se hace clic.

3. Usa el gancho useEffect

A continuación, use el enlace useEffect para actualizar dinámicamente el tema de la aplicación en función de la variable de estado del tema.

importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';
funciónaplicación() {
 const [tema, establecerTema] = usarEstado('luz');
constante alternarTema = () => {
 si (tema 'luz') {
 establecerTema('oscuro');
 } más {
 establecerTema('luz');
 }
 };
 usarEfecto(() => {
documento.body.className = tema;
 }, [tema]);
devolver (
`Aplicación ${tema}`}>
<botón onClick={toggleTheme}>Alternar tema</button>
<h1>¡Hola Mundo!</h1>
</div>
 );
}
exportardefecto aplicación;

El fragmento de código anterior usa el enlace useEffect para actualizar el nombre de clase del elemento document.body en función de la variable de estado del tema. Esto le permite actualizar dinámicamente el CSS de la aplicación según el tema.

4. Agregar el CSS para los modos oscuro y claro

A continuación, agregue el CSS para los modos oscuro y claro. Puede hacer esto creando un archivo llamado 'darkMode.css' y agregando el siguiente CSS:

.oscuro {
 color de fondo: #333;
 color: #fff;
}
.luz {
 color de fondo: #fff;
 color: #333;
}

Después de eso, deberá importar el archivo CSS a su aplicación. Esto se puede hacer con el siguiente código:

importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';
importar './modooscuro.css';
funciónaplicación() {
 const [tema, establecerTema] = usarEstado('luz');
constante alternarTema = () => {
 si (tema 'luz') {
 establecerTema('oscuro');
 } más {
 establecerTema('luz');
 }
 };
 usarEfecto(() => {
documento.body.className = tema;
 }, [tema]);
devolver (
`Aplicación ${tema}`}>
<botón onClick={toggleTheme}>Alternar tema</button>
<h1>¡Hola Mundo!</h1>
</div>
 );
}
exportardefecto aplicación;

5. Cambiar a diferentes modos

Ahora que ha agregado el CSS para los modos oscuro y claro, puede alternar entre ellos haciendo clic en el botón de alternancia. Para hacer esto, primero debe iniciar el servidor de desarrollo. Puede hacer esto ejecutando el siguiente comando de terminal:

npm comienzo

Después de eso, puede abrir la aplicación en el navegador y hacer clic en el botón de alternar para cambiar entre los modos oscuro y claro.

Opciones adicionales para el modo oscuro en React

Si desea que el tema persista al actualizar la página, puede use la API localStorage para almacenar los datos. Para hacer esto, primero deberá agregar el siguiente código a su aplicación:

importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';
importar './modooscuro.css';
funciónaplicación() {
constante [tema, establecerTema] = usarEstado(
 almacenamiento local.getItem('tema') || 'luz'
 );
constante alternarTema = () => {
 si (tema 'luz') {
 establecerTema('oscuro');
 } más {
 establecerTema('luz');
 }
 };
 usarEfecto(() => {
 almacenamiento local.setItem('tema', tema);
documento.body.className = tema;
 }, [tema]);
devolver (
`Aplicación ${tema}`}>
<botón onClick={toggleTheme}>Alternar tema</button>
<h1>¡Hola Mundo!</h1>
</div>
 );
}
exportardefecto aplicación;

El fragmento de código anterior incluye la capacidad de mantener el tema después de que se actualice la página. Esto se hace usando la API localStorage. Primero, verifica si hay un tema almacenado en localStorage.

Si hay un tema, se utiliza ese tema. Si no, se utiliza el tema 'light'. A continuación, se agrega código al enlace useEffect para almacenar el tema en localStorage. Esto garantiza que el tema persista a través de las actualizaciones de la página.

El modo oscuro no termina en React

Hay muchas maneras de agregar el modo oscuro a su aplicación React. En este artículo, se muestra una forma de hacerlo utilizando los ganchos useState y useEffect. Sin embargo, también hay muchas otras formas en las que puedes hacerlo.

Por ejemplo, podría usar la API de contexto de React para crear un proveedor de temas. Esto le permitiría envolver toda su aplicación en un componente de proveedor de temas y acceder al tema en cualquier parte de su aplicación.

También puede habilitar el modo oscuro en su navegador y usar consultas de medios CSS para aplicar diferentes estilos según el tema del navegador.