/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 vote325 views1 answer
Use font awesome in react native
Javascript React
0 vote287 views1 answer
[Design System React] App element is not defined. Please use Settings.setAppElement(el)
Javascript React
1 vote302 views1 answer
React does not recognize the `activeClassName` prop on a DOM element
Javascript React
0 vote323 views2 answers
Remove the warning for setState on unmounted components in React
Javascript React
0 vote842 views1 answer
Reactjs TypeError: b is undefined
Javascript React
16 votes300 views6 answers
React useState hook
Javascript React
1 vote317 views1 answer
SFC in react
Javascript React
8 votes330 views4 answers
Get current url react router
Javascript React
0 vote307 views1 answer
Placeholder text disappear when click in react
Javascript React
18 votes270 views3 answers
Add object to array react hook
Javascript React