“JavaScript, veja se o Chrome está no modo escuro” Respostas de código

JavaScript, veja se o Chrome está no modo escuro

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
flexflower

JavaScript, veja se o Chrome está no modo escuro

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}
flexflower

React Verifique se o navegador está no modo escuro

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

//To watch for changes:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

//Or in React Hooks:

const [mode, setMode] = useState<"light" | "dark" | undefined>(
    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" :"light"
);

useEffect(() => {
  const modeMe = (e: any) => {
    setMode(e.matches ? "dark" : "light");
  }  
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', modeMe);
  return window.matchMedia('(prefers-color-scheme: dark)').removeListener(modeMe);
}, []);
Friendly Finch

Respostas semelhantes a “JavaScript, veja se o Chrome está no modo escuro”

Perguntas semelhantes a “JavaScript, veja se o Chrome está no modo escuro”

Mais respostas relacionadas para “JavaScript, veja se o Chrome está no modo escuro” em JavaScript

Procure respostas de código populares por idioma

Procurar outros idiomas de código