/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

2 votes249 views2 answers
React not recognizing lorem
Javascript React
2 votes297 views2 answers
Prevent a page from refreshing in react
Javascript React
0 vote224 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
4 votes226 views6 answers
Location of release apk in react native
Javascript React
6 votes252 views2 answers
How do I conditionally add attributes to React components?
Javascript React
0 vote257 views1 answer
Create react without jsx
Javascript React
5 votes243 views3 answers
React router lazy load
Javascript React
1 vote243 views1 answer
Committing in react
Javascript React
0 vote264 views1 answer
React native getting older version assets
Javascript React
0 vote257 views1 answer
Difference between controlled and uncontrolled components in react js
Javascript React