/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

7 votes227 views2 answers
React router 6 redirect
Javascript React
0 vote212 views1 answer
Type '{ GlobalState: any; Dispatch: React.Dispatch<any>; }' is not assignable to type 'null'
Javascript React
10 votes221 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React
31 votes227 views6 answers
React Sass
Javascript React
0 vote212 views1 answer
CChartpie react
Javascript React
-1 vote238 views1 answer
Date time react component
Javascript React
0 vote240 views1 answer
Jason rpc reactjs
Javascript React
98 votes259 views2 answers
Add bootstrap to react,.........,,,,
Javascript React
-1 vote224 views1 answer
React native list view
Javascript React
1 vote223 views1 answer
React redux wait for props
Javascript React