yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow override of theme on shared documents

Browse Source
This commit is contained in:
Tom Moor
2023-07-15 21:36:04 -04:00
parent e653b185a4
commit e81f97b2de
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/hooks/useBuildTheme.ts
View File

@@ -6,6 +6,7 @@ import {
buildPitchBlackTheme, buildPitchBlackTheme,
} from "@shared/styles/theme"; } from "@shared/styles/theme";
import { CustomTheme } from "@shared/types"; import { CustomTheme } from "@shared/types";
import type { Theme } from "~/stores/UiStore";
import useMediaQuery from "~/hooks/useMediaQuery"; import useMediaQuery from "~/hooks/useMediaQuery";
import useStores from "./useStores"; import useStores from "./useStores";
@@ -14,25 +15,30 @@ import useStores from "./useStores";
* and the custom theme provided. * and the custom theme provided.
* *
* @param customTheme Custom theme to merge with the default theme * @param customTheme Custom theme to merge with the default theme
* @param overrideTheme Optional override the theme to use
* @returns The theme to use * @returns The theme to use
*/ */
export default function useBuildTheme(customTheme: Partial<CustomTheme> = {}) { export default function useBuildTheme(
customTheme: Partial<CustomTheme> = {},
overrideTheme?: Theme
) {
const { ui } = useStores(); const { ui } = useStores();
const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`); const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`);
const isPrinting = useMediaQuery("print"); const isPrinting = useMediaQuery("print");
const resolvedTheme = overrideTheme ?? ui.resolvedTheme;
const theme = React.useMemo( const theme = React.useMemo(
() => () =>
isPrinting isPrinting
? buildLightTheme(customTheme) ? buildLightTheme(customTheme)
: isMobile : isMobile
? ui.resolvedTheme === "dark" ? resolvedTheme === "dark"
? buildPitchBlackTheme(customTheme) ? buildPitchBlackTheme(customTheme)
: buildLightTheme(customTheme) : buildLightTheme(customTheme)
: ui.resolvedTheme === "dark" : resolvedTheme === "dark"
? buildDarkTheme(customTheme) ? buildDarkTheme(customTheme)
: buildLightTheme(customTheme), : buildLightTheme(customTheme),
[customTheme, isMobile, isPrinting, ui.resolvedTheme] [customTheme, isMobile, isPrinting, resolvedTheme]
); );
return theme; return theme;

8
app/scenes/Document/Shared.tsx
View File

@@ -8,6 +8,7 @@ import styled, { ThemeProvider } from "styled-components";
import { setCookie } from "tiny-cookie"; import { setCookie } from "tiny-cookie";
import { s } from "@shared/styles"; import { s } from "@shared/styles";
import { NavigationNode, PublicTeam } from "@shared/types"; import { NavigationNode, PublicTeam } from "@shared/types";
import type { Theme } from "~/stores/UiStore";
import DocumentModel from "~/models/Document"; import DocumentModel from "~/models/Document";
import Error404 from "~/scenes/Error404"; import Error404 from "~/scenes/Error404";
import ErrorOffline from "~/scenes/ErrorOffline"; import ErrorOffline from "~/scenes/ErrorOffline";
@@ -94,8 +95,13 @@ function SharedDocumentScene(props: Props) {
const { documents } = useStores(); const { documents } = useStores();
const { shareId, documentSlug } = props.match.params; const { shareId, documentSlug } = props.match.params;
const documentId = useDocumentId(documentSlug, response); const documentId = useDocumentId(documentSlug, response);
const themeOverride = ["dark", "light"].includes(
searchParams.get("theme") || ""
)
? (searchParams.get("theme") as Theme)
: undefined;
const can = usePolicy(response?.document.id ?? ""); const can = usePolicy(response?.document.id ?? "");
const theme = useBuildTheme(response?.team?.customTheme); const theme = useBuildTheme(response?.team?.customTheme, themeOverride);
React.useEffect(() => { React.useEffect(() => {
if (!auth.user) { if (!auth.user) {