/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 vote351 views1 answer
React native set variable key in loop
Javascript React
1 vote356 views1 answer
Input type number react native
Javascript React
0 vote382 views1 answer
Settimeout react native focus text input
Javascript React
1 vote363 views2 answers
Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
0 vote347 views1 answer
Stop from from refresching page react
Javascript React
0 vote373 views1 answer
React native set default ios simulator
Javascript React
0 vote353 views1 answer
How to add css based on route react
Javascript React
-1 vote360 views2 answers
3 dots React
Javascript React
9 votes368 views1 answer
Create react app in existing folder
Javascript React
0 vote388 views1 answer
React function called last state
Javascript React