* fix: Logic error in toast fix: Remove useless component * fix: Logout not clearing all stores * Add icons to notification settings * Add eslint rule to enforce spaced comment * Add eslint rule for arrow-body-style * Add eslint rule to enforce self-closing components * Add menu to api key settings Fix: Deleting webhook subscription does not remove from UI Split webhook subscriptions into active and inactive Styling updates
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import * as React from "react";
|
|
import { breakpoints } from "@shared/styles";
|
|
import {
|
|
buildDarkTheme,
|
|
buildLightTheme,
|
|
buildPitchBlackTheme,
|
|
} from "@shared/styles/theme";
|
|
import { CustomTheme } from "@shared/types";
|
|
import useMediaQuery from "~/hooks/useMediaQuery";
|
|
import useStores from "./useStores";
|
|
|
|
/**
|
|
* Builds a theme based on the current user's preferences, the current device
|
|
* and the custom theme provided.
|
|
*
|
|
* @param customTheme Custom theme to merge with the default theme
|
|
* @returns The theme to use
|
|
*/
|
|
export default function useBuildTheme(customTheme: Partial<CustomTheme> = {}) {
|
|
const { ui } = useStores();
|
|
const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`);
|
|
const isPrinting = useMediaQuery("print");
|
|
|
|
const theme = React.useMemo(
|
|
() =>
|
|
isPrinting
|
|
? buildLightTheme(customTheme)
|
|
: isMobile
|
|
? ui.resolvedTheme === "dark"
|
|
? buildPitchBlackTheme(customTheme)
|
|
: buildLightTheme(customTheme)
|
|
: ui.resolvedTheme === "dark"
|
|
? buildDarkTheme(customTheme)
|
|
: buildLightTheme(customTheme),
|
|
[customTheme, isMobile, isPrinting, ui.resolvedTheme]
|
|
);
|
|
|
|
return theme;
|
|
}
|