calcom/lib/core/browser/useDarkMode.tsx
Omar López 3add84a279
Adds Stripe integration (#717)
* Adds Stripe integration

* Moves Stripe instrucctions to ee

* Adds NEXT_PUBLIC_APP_URL variable

* Adds fallback for NEXT_PUBLIC_APP_URL

* Throws error objects instead

* Improved error handling

* Removes deprecated method

* Bug fixing

* Payment refactoring

* PaymentPage fixes

* Fixes preview links

* More preview link fixes

* Fixes client links

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2021-09-22 19:36:13 +01:00

45 lines
1.1 KiB
TypeScript

import { useEffect, useState } from "react";
const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
interface UseDarkModeOutput {
isDarkMode: boolean;
toggle: () => void;
enable: () => void;
disable: () => void;
}
function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
const getPrefersScheme = (): boolean => {
// Prevents SSR issues
if (typeof window !== "undefined") {
return window.matchMedia(COLOR_SCHEME_QUERY).matches;
}
return !!defaultValue;
};
const [isDarkMode, setDarkMode] = useState<boolean>(getPrefersScheme());
// Update darkMode if os prefers changes
useEffect(() => {
const handler = () => setDarkMode(getPrefersScheme);
const matchMedia = window.matchMedia(COLOR_SCHEME_QUERY);
matchMedia.addEventListener("change", handler);
return () => {
matchMedia.removeEventListener("change", handler);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return {
isDarkMode,
toggle: () => setDarkMode((prev) => !prev),
enable: () => setDarkMode(true),
disable: () => setDarkMode(false),
};
}
export default useDarkMode;