/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

0 vote196 views1 answer
Change poiter text input color react native
Javascript React
1 vote178 views3 answers
Add react to existing project
Javascript React
0 vote371 views1 answer
React yup password with number string and uppercase
Javascript React
0 vote193 views1 answer
React Hook useEffect has a missing dependency: Either include it or remove the dependency array. If changes too often, find the parent component that defines it and wrap that definition in useCallback. (react-hooks/exhaustive-deps) eslint
Javascript React
0 vote191 views1 answer
Get id button clicked react
Javascript React
0 vote187 views1 answer
Import batch from 'react-redux'
Javascript React
0 vote200 views3 answers
Add webpack to react project
Javascript React
2 votes188 views1 answer
Import React, { memo } from 'react';
Javascript React
-1 vote242 views2 answers
React native font based on viewport dimensions
Javascript React
6 votes206 views1 answer
React native rotate
Javascript React