/Javascript/React/React check if browser is in dark mode

React check if browser is in dark mode

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

-1

Source: stackoverflow.com

Similar codes

0 vote370 views1 answer
Why my favicon icon is not removing in react
Javascript React
32 votes355 views1 answer
React-router react-router-dom
Javascript React
0 vote361 views1 answer
React $ r component instance console
Javascript React
0 vote405 views1 answer
React Fractional rating
Javascript React
0 vote409 views1 answer
How to solve "Unexpected use of comma operator no-sequences" error in react
Javascript React
105 votes423 views3 answers
React bootstrap do you need to import
Javascript React
-1 vote363 views2 answers
React js props lara css uygulama
Javascript React
0 vote407 views2 answers
Hide screen links in drawerNavigation in react native
Javascript React
13 votes356 views10 answers
React navigation
Javascript React
0 vote417 views1 answer
React router dom return undefined
Javascript React