/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 vote392 views1 answer
What is react easy emoji
Javascript React
1 vote383 views1 answer
React js empty build
Javascript React
-1 vote402 views1 answer
Convert create-react-app to typscript
Javascript React
0 vote422 views1 answer
Reactjs web3 components
Javascript React
0 vote388 views1 answer
S3 private image getobject react js
Javascript React
0 vote402 views1 answer
When reload the page the route gone in react js laravel
Javascript React
0 vote353 views1 answer
Clear input field react-hook-form
Javascript React
7 votes358 views3 answers
How to update react state array
Javascript React
17 votes372 views5 answers
React native icons
Javascript React
1 vote387 views1 answer
React native cover image
Javascript React