/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

1 vote334 views1 answer
Create functional component react
Javascript React
0 vote425 views3 answers
Redirect is not defined react/jsx-no-undef
Javascript React
0 vote325 views1 answer
Semantic UI react focus on input
Javascript React
0 vote329 views1 answer
React form hook trigger is not a function
Javascript React
0 vote357 views1 answer
React linking to documents
Javascript React
0 vote361 views1 answer
Jason rpc reactjs
Javascript React
4 votes345 views3 answers
React native keystore
Javascript React
-1 vote328 views1 answer
History of react js
Javascript React
0 vote361 views1 answer
Limit values that satisy a url parameter react-router
Javascript React
0 vote304 views1 answer
Open xcode shorthand react native
Javascript React