/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 vote141 views1 answer
Get value of input element on button click react
Javascript React
0 vote149 views3 answers
Add if condition in map react
Javascript React
1 vote147 views1 answer
Slider on release call api react material ui
Javascript React
0 vote107 views4 answers
React prototype function
Javascript React
3 votes263 views2 answers
Center an element react native
Javascript React
0 vote142 views1 answer
React native tdd emzyme
Javascript React
0 vote147 views1 answer
Show and Hide element in react
Javascript React
0 vote152 views1 answer
React js how to do array range
Javascript React
22 votes144 views3 answers
How to use if else inside jsx in react
Javascript React
0 vote138 views1 answer
Imagebackground with input inot avoiding react native
Javascript React