/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 vote319 views1 answer
React manifest.json 404 (not found)
Javascript React
0 vote348 views1 answer
React bootstrap profile card
Javascript React
1 vote323 views1 answer
React native grid view
Javascript React
0 vote314 views1 answer
React native 'UMConstantsInterface/UMConstantsInterface.h' file not found
Javascript React
0 vote333 views1 answer
How to align placeholder in react native
Javascript React
1 vote325 views1 answer
Reconciliation in react
Javascript React
0 vote316 views1 answer
Divide string in lines react native max width
Javascript React
0 vote290 views1 answer
Making all makers to show in react native map
Javascript React
0 vote352 views1 answer
Take site to top after clicking in react
Javascript React
4 votes347 views1 answer
How to add oAuth google signin in react native app
Javascript React