diff --git a/apps/client/src/features/public-space/components/docs/docs-shell.tsx b/apps/client/src/features/public-space/components/docs/docs-shell.tsx index 1b630644f..4aa48c623 100644 --- a/apps/client/src/features/public-space/components/docs/docs-shell.tsx +++ b/apps/client/src/features/public-space/components/docs/docs-shell.tsx @@ -25,6 +25,8 @@ import { SearchMobileControl } from "@/features/search/components/search-control import styles from "./docs.module.css"; const MemoizedDocsSidebarTree = React.memo(DocsSidebarTree); +const MANTINE_COLOR_SCHEME_ATTRIBUTE = "data-mantine-color-scheme"; +const DOCS_PRINT_COLOR_SCHEME_ATTRIBUTE = "data-docs-print-color-scheme"; type DocsShellProps = { surface: DocsSurface; @@ -47,6 +49,45 @@ export default function DocsShell({ ); const [mobileTocOpen, setMobileTocOpen] = useAtom(docsMobileTocAtom); + React.useEffect(() => { + const root = document.documentElement; + let previousColorScheme: string | null = null; + let isPrinting = false; + + const restoreColorScheme = () => { + if (!isPrinting) return; + + if (previousColorScheme === null) { + root.removeAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE); + } else { + root.setAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE, previousColorScheme); + } + root.removeAttribute(DOCS_PRINT_COLOR_SCHEME_ATTRIBUTE); + isPrinting = false; + }; + + const useLightPrintTheme = () => { + if (isPrinting) return; + + previousColorScheme = root.getAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE); + root.setAttribute( + DOCS_PRINT_COLOR_SCHEME_ATTRIBUTE, + previousColorScheme ?? "light", + ); + root.setAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE, "light"); + isPrinting = true; + }; + + window.addEventListener("beforeprint", useLightPrintTheme); + window.addEventListener("afterprint", restoreColorScheme); + + return () => { + window.removeEventListener("beforeprint", useLightPrintTheme); + window.removeEventListener("afterprint", restoreColorScheme); + restoreColorScheme(); + }; + }, []); + return (
diff --git a/apps/client/src/features/public-space/components/docs/docs.module.css b/apps/client/src/features/public-space/components/docs/docs.module.css index d4a4f697d..2822bc4ce 100644 --- a/apps/client/src/features/public-space/components/docs/docs.module.css +++ b/apps/client/src/features/public-space/components/docs/docs.module.css @@ -903,8 +903,24 @@ /* ---------- Print ---------- */ +@page public-doc { + background-color: #fff; +} + /* Only the article prints; the body grid collapses so it takes the page width. */ @media print { + :global(html):has(.root), + :global(body):has(.root) { + page: public-doc; + background-color: #fff !important; + } + + :global(html[data-docs-print-color-scheme="dark"]) + .root.root + :global(.codeBlock svg) { + filter: invert(1) hue-rotate(180deg); + } + .header, .sidebar, .toc, @@ -919,6 +935,12 @@ --docs-bg: #fff; --docs-fg: #1f1f1f; --docs-content-fg: var(--docs-fg); + --docs-nav-fg: #495057; + --docs-muted: #5f6368; + --docs-hover: #f1f3f5; + --docs-faint: #868e96; + --docs-border: #dee2e6; + --docs-header-bg: #fff; min-height: 0; background-color: #fff;