/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

13 votes104 views4 answers
React native android build apk
Javascript React
5 votes123 views2 answers
Import fa icons react
Javascript React
9 votes111 views1 answer
Create react app in existing folder
Javascript React
0 vote103 views1 answer
React s.a.createElement("div",{className:"d-none d-lg-flex flex-content"},s.a.createElement(u.a.Body,{noScroll:!0}
Javascript React
33 votes117 views5 answers
Img tag in react
Javascript React
0 vote124 views1 answer
Get id button clicked react
Javascript React
4 votes99 views2 answers
Import reactdom
Javascript React
0 vote110 views1 answer
React computed example
Javascript React
0 vote157 views1 answer
React grid generator
Javascript React
0 vote312 views1 answer
React native multiline cursor on first line
Javascript React