Skip to content

Instantly share code, notes, and snippets.

@rsispal

rsispal/use-browser-dark-mode.ts

Created December 17, 2021 18:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rsispal/5fe858cddc46e4d91f48e5e9c37d1a91 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rsispal/5fe858cddc46e4d91f48e5e9c37d1a91 to your computer and use it in GitHub Desktop.
Download ZIP
[useBrowserDarkMode] React Browser Dark Mode Detection Hook Raw
Raw
use-browser-dark-mode.ts
export function useBrowserDarkMode(loggingEnabled: boolean = false) {
const queryBrowserPreference = () => window.matchMedia("(prefers-color-scheme: dark)").matches === true;
const [isDarkMode, setIsDarkMode] = useState<boolean>(() => queryBrowserPreference());
useEffect(() => {
if (window.matchMedia("(prefers-color-scheme)").media !== "not all") {
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", ({ matches: darkModeState }) => setIsDarkMode(darkModeState === true));
}
return function cleanup() {
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", () => undefined);
};
}, []);
loggingEnabled && console.log(`Dark mode is ${isDarkMode ? "🌙 on" : "🌞 off"}`);
return isDarkMode;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment