3

Quisiera poder escribir en un div cuál tema está en uso actualmente con Javascript:

Si el modo oscuro o claro es por primera vez, entonces sería el del navegador o el del teléfono.

O sino, el cambio del usuario con un botón.

Esto es lo quiero lograr

const sistemaNegro = window.matchMedia("(prefers-color-scheme: dark)");
const sistemaClaro = window.matchMedia("(prefers-color-scheme: light)");

if(sistemaClaro.matches) {
  nombreTema.textContent = "Sistema claro"
} else if(sistemaNegro.matches) {
  nombreTema.textContent = "Sistema oscuro"
}

Y esto es mi codigo para el cambio del usuario

window.setUserTheme = function(newTheme) {
 
 document.documentElement.setAttribute("data-tema", newTheme);
 localStorage.setItem("theme", newTheme);

  if(newTheme == "oscuro") {
    nombreTema.textContent = "Mi tema oscuro"
  } else if(newTheme == "claro") {
    nombreTema.textContent = "Mi tema claro"
  }

};

Estos dos códigos quisiera unificar en una sola función, pero no sé dónde ubicar.

Mi codigo completo:

const userTheme = localStorage.getItem("theme");
const sistemaNegro = window.matchMedia("(prefers-color-scheme: dark)");
const sistemaClaro = window.matchMedia("(prefers-color-scheme: light)");
const nombreTema = document.getElementById("nombreTema");
const botonOscuro = document.getElementById("modoOscuro");
const botonClaro = document.getElementById("modoClaro");


if(userTheme === "dark" || (!userTheme && sistemaNegro.matches)) {
  setTheme("dark");
}

sistemaNegro.addEventListener("change", function (e) {

  if(!localStorage.getItem("theme")) {
    setTheme(e.matches ? "dark" : "light");
  }

});

function setTheme(newTheme) {
 
document.documentElement.setAttribute("data-tema", newTheme);
};

// SIN FUNCIONAR CORRECTAMENTE
/*
if(sistemaClaro.matches) {
  nombreTema.textContent = "Sistema claro"
} else if(sistemaNegro.matches) {
  nombreTema.textContent = "Sistema oscuro"
}
*/

window.setUserTheme = function (newTheme) {
 
 document.documentElement.setAttribute("data-tema", newTheme);
 localStorage.setItem("theme", newTheme);

 if(newTheme == "oscuro") {
  nombreTema.innerHTML = `
    <div class="titulo">Mi tema oscuro <span class="bi-moon-fill"></span></div
    <div class="subtitulo textoPeque">Seleccionaste el modo oscuro. Éste sera por defecto ahora</div>
  `;
 } else if(newTheme == "claro") {
  nombreTema.innerHTML = `
    <div class="titulo">Mi tema claro <span class="bi-sun-fill"></span></div>
    <div class="subtitulo textoPeque">Seleccionaste el modo claro. Sera por defecto ahora</div>
  `;
 }
            
};

function modoOscuro() {
  setUserTheme("oscuro");
};

function modoClaro() {
  setUserTheme("claro");
};

botonOscuro.addEventListener("click", modoOscuro);
botonClaro.addEventListener("click", modoClaro);
:root[data-tema="oscuro"] {
  --body: #000
}

:root[data-tema="claro"] {
  --body: #fff
}

body {
  background-color: var(--body)
}
<html data-tema="claro">
<body>

<div id="nombreTema">Activar temas</div>

<button class="btn btn-sm btn-dark modoOscuro bi-moon-fill" id="modoOscuro">Oscuro</button>
<button class="btn btn-sm btn-light modoClaro bi-sun-fill" id="modoClaro">Claro</button>

</body>
</html>              

5
  • 1
    No se la solución ni todo el contexto de tu caso pero creo que deberías partir con un theme default siempre, ahora, si no quieres eso, entonces guarda la configuración en la DB como lo hacen FB u otros y te evitas estar con estos líos.
    – OCHOA
    Commented el 1 abr. a las 16:13
  • 1
    Si @ocho. Necesito el tema por defecto del sistema y luego notificar esto al usuario que es del navegador (pero es esto lo que no puedo hacer). Luego el usuario puede cambiar esto como está en mi codigo. Commented el 3 abr. a las 22:15
  • 1
    Pero si tiene guardado este dato en la DB es tan fácil como consultar ese parámetro y decírselo al cliente. Pueda que usted y yo no nos estemos entendiendo. Imagínese que yo pongo el Dark Theme (DT) y se guarda en la DB. Cuando yo vuelva a iniciar sesión seguirá ese DT o usted me lo notifica como quiera y hasta me puede facilitar un enlace u opción para cambiarlo. Justo por eso es que no se porque se quiere complicar la vida con JS. La solución más optima no siempre es la más complicada.
    – OCHOA
    Commented el 4 abr. a las 14:54
  • 1
    La elección del usuario está hecho. Lo que me falta es lo del sistema Commented el 4 abr. a las 15:39
  • 1
    Pero esto window.matchMedia te da la del sistema....no entiendo el problema en el cual necesitas ayuda :S
    – Yussef
    Commented el 4 abr. a las 17:09

2 respuestas 2

5
+150

Lo primero que yo haría sería establecer una prioridad, por ejemplo: Si el usuario ha seteado en página un tema, esto tiene el mayor peso. De no haber seteado, mandará el tema del sistema

Esto es porque el usuario ha declarado explícitamente su preferencia en el sitio. Esto es simple de representar como:

  const localTheme = localStorage.getItem("theme");
  if (localTheme)
    return localTheme;
  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
    return "oscuro";
  else
    return "claro";

Aquí una demo completa

// Fake localStorage, solo para propositos de DEMO ya que el stacksnippets no puede acceder a localStorage
const localStorage = {
  valores: {},
  getItem: function(k){ return this.valores[k]}, 
  setItem: function(k,v){this. valores[k] = v}
}
//===================================================================



const getColorScheme = () => {
  const localTheme = localStorage.getItem("theme");
  if (localTheme)
    return localTheme;
  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
    return "oscuro";
  else
    return "claro";
}

function setTheme(newTheme) {
  document.documentElement.setAttribute("data-tema", newTheme);
  document.getElementById("nombreTema").innerHTML = `
    <div class="titulo">Mi tema oscuro <span class="bi-moon-fill"></span></div
    <div class="subtitulo textoPeque">Seleccionaste el modo ${newTheme}. Éste sera por defecto ahora</div>`;
}

document.getElementById("changeTheme").addEventListener("click", () => {
  const actualTheme = getColorScheme();
  const newTheme = actualTheme == "claro" ? "oscuro" : "claro";
  localStorage.setItem("theme", newTheme);
  setTheme(newTheme);
});

//cambio el theme si detecta un cambio de tema en el sistema
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(getColorScheme()));

//ejecuta el thema al inicio
setTheme(getColorScheme());
:root[data-tema="oscuro"] {
  --body: #000;
  --color: #fff;
}

:root[data-tema="claro"] {
  --body: #fff;
  --color: #000;
}

body {
  transition: all 0.4s ease-in;
  background-color: var(--body);
  color: var(--color);
}

html[data-tema="claro"] #changeTheme:after {
  content: "Cambiar a oscuro";
}

html[data-tema="oscuro"] #changeTheme:after {
  content: "Cambiar a claro";
}
<div id="nombreTema">Activar temas</div>

<button id="changeTheme"></button>

4

puedes hacerlo asi:

// vemos el root
const $root = document.querySelector(':root');
const btn_change = document.querySelector('button');
let newColor = window.matchMedia('(prefers-color-scheme: dark)').matches && "#000";

// validamos que tiene soporte
    if (window.matchMedia ) {
      // validamos que sea dark 
      if(window.matchMedia('(prefers-color-scheme: dark)').matches){
        console.log(`theme dark mode`);
        
      }
      // validamos que sea light 
      if(window.matchMedia('(prefers-color-scheme: light)').matches){
        console.log(`theme light mode`)
      }
      
      btn_change.addEventListener('click', event => {
        // cambiamos el fondo o la clase 
        newColor = newColor == "#000" ? "#63CDF0" : "#000";
        // configuramos las variables.
        $root.style.setProperty('--body', newColor);
      });
    }
:root{
  --body: #63CDF0;
}
:root[data-tema="oscuro"] {
  --body: #000;
}

:root[data-tema="claro"] {
  --body: #63CDF0;
}


body {
  background-color: var(--body)
}
<div data-tema="">

<div>

<button>click me</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.