Files
outline/app/hooks/useBuildTheme.ts
Tom Moor db73879918 Assorted cleanup, minor bug fixes, styling fixes, eslint rules (#5165
* 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
2023-04-08 05:25:20 -07:00

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;
}