/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 vote384 views1 answer
React native communicate with webview
Javascript React
0 vote377 views1 answer
Filter-vs-map-reactjs-and-jsx
Javascript React
0 vote371 views1 answer
React link onclick refresh page
Javascript React
0 vote322 views0 answer
React
Javascript React
0 vote353 views1 answer
Render a react component only after API response is received
Javascript React
0 vote362 views1 answer
React native jest snapshot
Javascript React
0 vote377 views1 answer
Why to escape from quotation mark in react
Javascript React
4 votes365 views1 answer
React useeffect not on first render
Javascript React
18 votes342 views6 answers
React native build
Javascript React
151 votes552 views6 answers
Install react js
Javascript React