/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 vote255 views1 answer
Render blaze in react
Javascript React
0 vote203 views1 answer
What is react headroom
Javascript React
2 votes203 views1 answer
How to do a classname variable and string react
Javascript React
0 vote188 views1 answer
Unable to resolve module `@react-native-community/toolbar-android
Javascript React
0 vote233 views1 answer
How to make back button react
Javascript React
0 vote204 views2 answers
Can i pass data with usenavigate react router
Javascript React
0 vote230 views1 answer
Unistall react node package
Javascript React
7 votes230 views3 answers
Conditional style prop react
Javascript React
0 vote195 views1 answer
React how to block render if data is not fetched yet
Javascript React
0 vote182 views1 answer
Disable key enter react-hook-form
Javascript React