Se ha vuelto popular que las aplicaciones tengan una configuración que le permite alternar entre los modos oscuro y claro. Tal vez se deba a la popularidad de las IU oscuras, tal vez se deba a que las aplicaciones se están volviendo cada vez más configurables.
El contexto de reacción es una forma fácil de compartir datos globalmente, pero puede dificultar la reutilización de componentes. Como alternativa, puede crear un componente de botón de modo oscuro que use los ganchos useEffect y useState en lugar de contexto. Alternará un atributo de datos en el elemento del cuerpo al que pueden apuntar los estilos CSS.
Lo que necesitarás
Para seguir este tutorial, necesitará lo siguiente:
- Una versión reciente de Node instalada en su máquina.
- Una comprensión básica de React y Ganchos de reacción.
- Un proyecto inicial de React. Sólo crear una aplicación React y estás listo para ir.
Crear un componente de botón
El componente del botón será responsable de alternar el tema de oscuro a claro. En una aplicación real, este botón podría ser parte del componente Navbar.
En la carpeta src, cree un nuevo archivo llamado Button.js y agregue el siguiente código.
importar { estado de uso } de 'reaccionar'exportardefectofunciónBotón() {
const [tema, establecertema] = useState("oscuro")
constante handleToggle = () => {
const nuevoTema = tema "luz"? "oscuro": "luz"
establecer tema (nuevo tema)
}
devolver (
<>
<botón className="temaBtn" onClick={manejarAlternar}>
{tema "luz"? <lapso>oscuro</span>: <lapso>luz</span>}
</button>
</>
)
}
Primero, importe el enlace useState() de React. Lo utilizará para realizar un seguimiento del tema actual.
En el componente Botón, inicialice el estado en oscuro. La función handleToggle() se encargará de la funcionalidad de alternancia. Se ejecuta cada vez que se hace clic en el botón.
Este componente también alterna el texto del botón cuando cambia el tema.
Para mostrar el componente Botón, impórtelo en App.js.
importar Botón de './Botón';
funciónaplicación() {
devolver (
<división>
<Botón/>
</div>
);
}
exportardefecto aplicación;
Crear los estilos CSS
En este momento, hacer clic en el botón no cambia la interfaz de usuario de la aplicación React. Para eso, primero deberá crear los estilos CSS para el modo oscuro y claro.
En App.css, agregue lo siguiente.
cuerpo {
--color-texto-primario: #131616;
--color-texto-secundario: #ff6b00;
--color-bg-primario: #E6EDEE;
--color-bg-secundario: #7d86881c;
antecedentes: variable(--color-bg-primario);
color: variable(--color-texto-primario);
transición: antecedentes 0.25sfacilidad de entrada y salida;
}
cuerpo[tema-datos="luz"] {
--color-texto-primario: #131616;
--color-bg-primario: #E6EDEE;
}
cuerpo[tema-datos="oscuro"] {
--color-texto-primario: #F2F5F7;
--color-bg-primario: #0E141B;
}
Aquí, está definiendo los estilos del elemento del cuerpo usando atributos de datos. Existe el atributo de datos de tema claro y el atributo de datos de tema oscuro. Cada uno de ellos tiene variables CSS con diferentes colores. El uso de atributos de datos CSS le permitirá cambiar los estilos según los datos. Si un usuario selecciona un tema oscuro, puede establecer el atributo de datos del cuerpo en oscuro y la interfaz de usuario cambiará.
También puede modificar los estilos de los elementos del botón para cambiar con el tema.
.temaBtn {
relleno: 10px;
color: variable(--color-texto-primario);
fondo: transparente;
borde: 1sólido variable(--color-texto-primario);
cursor: puntero;
}
Modificar componente de botón para alternar estilos
Para alternar los estilos definidos en el archivo CSS, deberá configurar los datos en el elemento del cuerpo en la función handleToggle().
En Button.js, modifique handleToggle() así:
constante handleToggle = () => {
const nuevoTema = tema "luz"? "oscuro": "luz"
establecer tema (nuevo tema)
documento.body.dataset.theme = tema
}
Si hace clic en el botón, el fondo debería cambiar de oscuro a claro o de claro a oscuro. Sin embargo, si actualiza la página, el tema se reinicia. Para conservar la configuración del tema, almacene la preferencia del tema en almacenamiento local.
Preferencia persistente del usuario en el almacenamiento local
Debe recuperar la preferencia del usuario tan pronto como se represente el componente Botón. El gancho useEffect() es perfecto para esto, ya que se ejecuta después de cada renderizado.
Antes de recuperar el tema del almacenamiento local, primero debe almacenarlo.
Cree una nueva función llamada storeUserPreference() en Button.js.
constante storeUserSetPreference = (preferencia) => {
almacenamiento local.setItem("tema", preferido);
};
Esta función recibe la preferencia del usuario como argumento y la almacena como un elemento llamado tema.
Llamarás a esta función cada vez que el usuario cambie el tema. Entonces, modifique la función handleToggle() para que se vea así:
constante handleToggle = () => {
const nuevoTema = tema "luz"? "oscuro": "luz"
establecer tema (nuevo tema)
storeUserSetPreference (nuevo tema)
documento.body.dataset.theme = tema
}
La siguiente función recupera el tema del almacenamiento local:
constante getUserSetPreference = () => {
devolver localStorage.getItem("tema");
};
Lo usará en el enlace useEffect para que cada vez que se represente el componente, obtenga la preferencia del almacenamiento local para actualizar el tema.
usarEfecto(() => {
constante UserSetPreference = getUserSetPreference();
si (usuarioEstablecerPreferencia) {
settheme (usuarioEstablecerPreferencia)
}
documento.body.dataset.theme = tema
}, [tema])
Obtener la preferencia del usuario desde la configuración del navegador
Para una experiencia de usuario aún mejor, puede utilizar el Prefiere-esquema-de-colores Función de medios CSS para configurar el tema. Esto debería reflejar la configuración del sistema de un usuario que puede controlar a través de su sistema operativo o navegador. La configuración puede ser clara u oscura. En su aplicación, deberá verificar esta configuración inmediatamente después de que se cargue el componente del botón. Esto significa implementar esta funcionalidad en el gancho useEffect().
Primero, cree una función que recupere la preferencia del usuario.
En Button.js, agregue lo siguiente.
constante getMediaQueryPreference = () => {
const mediaQuery = "(prefiere-esquema-de-color: oscuro)";
constante mql = ventana.matchMedia (consulta de medios);
constante tiene preferencia = tipo de mql.coincide con "booleano";
if (tiene preferencia) {
devolver mql.coincidencias? "oscuro": "luz";
}
};
A continuación, modifique el gancho useEffect() para recuperar la preferencia de consulta de medios y utilícelo si no hay ningún tema configurado en el almacenamiento local.
usarEfecto(() => {
constante UserSetPreference = getUserSetPreference();
constante mediaQueryPreference = getMediaQueryPreference();si (usuarioEstablecerPreferencia) {
settheme (usuarioEstablecerPreferencia)
} más {
establecer tema (mediaQueryPreference)
}
documento.body.dataset.theme = tema
}, [tema])
Si reinicia su aplicación, el tema debe coincidir con la configuración de su sistema.
Uso de React Context para alternar el modo oscuro
Puede usar atributos de datos, CSS y ganchos de React para alternar el tema de una aplicación de React.
Otro enfoque para manejar el modo oscuro en React es usar la API de contexto. El contexto de reacción le permite compartir datos entre componentes sin tener que pasarlos a través de accesorios. Cuando lo usa para alternar temas, crea un contexto de tema al que puede acceder a través de la aplicación. A continuación, puede utilizar el valor del tema para aplicar estilos coincidentes.
Si bien este enfoque funciona, usar atributos de datos CSS es más simple.
