mirror of
https://github.com/outline/outline.git
synced 2025-03-14 10:07:11 +00:00
46 lines
1.4 KiB
TypeScript
46 lines
1.4 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 type { Theme } from "~/stores/UiStore";
|
|
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
|
|
* @param overrideTheme Optional override the theme to use
|
|
* @returns The theme to use
|
|
*/
|
|
export default function useBuildTheme(
|
|
customTheme: Partial<CustomTheme> = {},
|
|
overrideTheme?: Theme
|
|
) {
|
|
const { ui } = useStores();
|
|
const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`);
|
|
const isPrinting = useMediaQuery("print");
|
|
const resolvedTheme = overrideTheme ?? ui.resolvedTheme;
|
|
|
|
const theme = React.useMemo(
|
|
() =>
|
|
isPrinting
|
|
? buildLightTheme(customTheme)
|
|
: isMobile
|
|
? resolvedTheme === "dark"
|
|
? buildPitchBlackTheme(customTheme)
|
|
: buildLightTheme(customTheme)
|
|
: resolvedTheme === "dark"
|
|
? buildDarkTheme(customTheme)
|
|
: buildLightTheme(customTheme),
|
|
[customTheme, isMobile, isPrinting, resolvedTheme]
|
|
);
|
|
|
|
return theme;
|
|
}
|