/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

1 vote305 views1 answer
Unexpected token export type react bottontab navigation
Javascript React
0 vote301 views1 answer
React passport session
Javascript React
31 votes305 views1 answer
Npm install react-router-dom --save
Javascript React
0 vote321 views1 answer
React application preloader add
Javascript React
23 votes296 views2 answers
Create-react-app npm yarn
Javascript React
32 votes306 views1 answer
How to use react router
Javascript React
0 vote296 views1 answer
Window.location.search get parameters react
Javascript React
1 vote298 views6 answers
UseEffect react
Javascript React
1 vote284 views1 answer
React router base url
Javascript React
0 vote305 views1 answer
Dropdown menu in react does not re render the component
Javascript React