/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 vote192 views1 answer
Toggle class onscroll hook react
Javascript React
0 vote214 views1 answer
React clone element
Javascript React
0 vote246 views1 answer
How To Set Opacity of a View In React Native
Javascript React
0 vote212 views1 answer
Flatpicker not focusing in modal React
Javascript React
0 vote235 views1 answer
Npm ERR! peer react@"^15.x.x" from [email protected]
Javascript React
0 vote211 views1 answer
Saving react code messing up in vsc
Javascript React
1 vote159 views1 answer
How to change the value of state in react
Javascript React
23 votes262 views6 answers
React hooks useeffect
Javascript React
0 vote209 views3 answers
How to hide a screen from drawer in react navigation 5
Javascript React
0 vote221 views1 answer
React duration picker
Javascript React