Anónimo
Detectar el modo oscuro al abrir una página y luego cambiar según preferencia del usuario
Tengo una web en la que mediante hacer click en un botón cambia entre modo dark y light llamando a una función js siguiente:
const setTheme = (theme) => {
document.documentElement.className=theme;
localStorage.setItem('theme', theme);
}
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
}
GetTheme();Con esto consigo que el usuario elija el modo, y éste a su vez modifique el root en el css, que es donde tengo definidas las variables que me interesa cambiar:
:Root,
:root.light{ mis variables en modo light}
:Root. Dark{ mis variables en modo dark}Hasta aquí todo bien, va de lujo, ahora donde no lo tengo claro es cómo hacer para que al abrir la página en el navegador detecte si el dispositivo del usuario está en modo light o dark y de inicio se abra en dicho modo, y que luego el usuario decida si lo cambia o no.
¿Alguien me ayuda? Supongo que es modificar el js, pero no sé cómo...
1 respuesta
I. Hola Compañero, por mi parte no domino Javascript, pero he visto algunas páginas y tutoriales que podrían ayudarle a realizar esta operación mientras le responde un experto de primera mano. Le ruego me disculpe las molestias de lectura, ánimo.
https://stackoverflow.com/questions/69431099/my-js-for-detecting-light-dark-mode-doesnt-work-right
https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers
Muchas gracias por el aporte, aunque ya la mayoría de esos enlaces los había examinado y he visto que se basan en @media(prefers-color-scheme) para modificar el body con css...
Yo lo que trato de modificar son las variables en el :root, y no en el body, con lo que ese método no me vale.
Trato de encontrar cómo leer el modo del navegador al abrirlo para que cargue el modo adecuado, y luego que el usuario lo modifique a su antojo. Esto último sí lo he conseguido con el código que puse.
Saludos.
I. Hola Compañero, muchas gracias y disculpe, imaginé que tal vez pudo ver una parte de los enlaces pero quise intentarlo y por desgracia es todo lo que ví en una primera búsqueda.
Si lo desea y no llegasen respuestas en breve, podría trasladar su consulta a varios expertos, para así agilizar posibles intervenciones.
Cualquier otra información que pueda ir viendo durante el día se la haré llegar por este medio, ánimo.