Breaking News: Grepper is joining You.com. Read the official announcement!

react check if browser is in dark mode

Friendly Finch answered on June 1, 2020 Popularity 8/10 Helpfulness 4/10

answer react check if browser is in dark mode

react check if browser is in dark mode

Comment

-1

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);
}, []);

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: browser javascript mode

Link to this answer
Share Copy Link

Contributed on Jun 01 2020

Friendly Finch

0 Answers Avg Quality 2/10

react check if browser is in dark mode

Contents

More Related Answers

react check if browser is in dark mode

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.