fix print in dark mode

This commit is contained in:
Philipinho
2026-09-05 17:20:14 +01:00
parent 01cfedddcf
commit 3756b61e11
2 changed files with 63 additions and 0 deletions
@@ -25,6 +25,8 @@ import { SearchMobileControl } from "@/features/search/components/search-control
import styles from "./docs.module.css"; import styles from "./docs.module.css";
const MemoizedDocsSidebarTree = React.memo(DocsSidebarTree); 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 = { type DocsShellProps = {
surface: DocsSurface; surface: DocsSurface;
@@ -47,6 +49,45 @@ export default function DocsShell({
); );
const [mobileTocOpen, setMobileTocOpen] = useAtom(docsMobileTocAtom); 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 ( return (
<DocsSurfaceProvider value={surface}> <DocsSurfaceProvider value={surface}>
<div className={clsx(styles.root, "public-typography")}> <div className={clsx(styles.root, "public-typography")}>
@@ -903,8 +903,24 @@
/* ---------- Print ---------- */ /* ---------- Print ---------- */
@page public-doc {
background-color: #fff;
}
/* Only the article prints; the body grid collapses so it takes the page width. */ /* Only the article prints; the body grid collapses so it takes the page width. */
@media print { @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, .header,
.sidebar, .sidebar,
.toc, .toc,
@@ -919,6 +935,12 @@
--docs-bg: #fff; --docs-bg: #fff;
--docs-fg: #1f1f1f; --docs-fg: #1f1f1f;
--docs-content-fg: var(--docs-fg); --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; min-height: 0;
background-color: #fff; background-color: #fff;