Podemos usar prefers-color-scheme: dark para detectar si el modo oscuro está activado o no:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;¿Hay alguna forma de detectar si un navegador admite el modo oscuro? (Por "admite el modo oscuro" me refiero a que el navegador cambia automáticamente los colores de fondo/texto predeterminados de las páginas web).
En CSS, podemos forzar el modo oscuro con
color-scheme: dark;sin embargo, algunos navegadores (Firefox para Android) lo ignorarán. Así que me gustaría ocultar la selección de temas si el modo oscuro no está disponible.
Mi solución actual es cambiar entre el modo oscuro y claro y verificar si el color predeterminado ha cambiado entre los modos:
const hasDarkMode = function() { const el = document.createElement("div"); el.style.display = "none"; document.body.appendChild(el); let color; /*canvastext - doesn't work in Samsung Internet, initial/unset - doesn't work in Firefox*/ for(let i = 0, c = ["canvastext", "initial", "unset"]; i < c.length; i++ ) { el.style.color = c[i]; el.style.colorScheme = "dark"; color = getComputedStyle(el).color; el.style.colorScheme = "light"; color = color != getComputedStyle(el).color; if (color) break; } document.body.removeChild(el); return color; }(); console.log("Dark mode supported:", hasDarkMode);Puede que esta no sea la solución más elegante, pero parece estar funcionando.
Con el comentario de @connexo también podemos probar con:
const hasDarkMode = CSS.supports("color-scheme", "dark"); console.log("Dark mode supported:", hasDarkMode); @supports (color-scheme: dark) { .no-dark-mode { display: none; } } <div>Dark mode is <span class="no-dark-mode">not </span>available</div>