Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

refactor(mcp): extract Scalar CSS overrides to stylesheet

Browse Source 
Move inline CSS template literal to a proper scalar-theme.css file
imported as a side-effect stylesheet. The overrides target Scalar's
.light-mode/.dark-mode selectors so they work as global CSS, removing
the need for the customCss string prop.
This commit is contained in:
Thomas Camlong committed 2026-06-08 23:38:15 +02:00
1 parent de68b64321
commit 8848949d9c
2 files changed
+22 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-api-reference.tsx
+1 -24
View File
@@ -4,29 +4,7 @@ import { useComputedColorScheme } from "@mantine/core";
import { ApiReferenceReact } from "@scalar/api-reference-react";
import "@scalar/api-reference-react/style.css";
const customCss = `
.light-mode {
--scalar-background-1: var(--mantine-color-body);
--scalar-background-2: var(--mantine-color-gray-0);
--scalar-background-3: var(--mantine-color-gray-1);
--scalar-color-1: var(--mantine-color-text);
--scalar-color-2: var(--mantine-color-dimmed);
--scalar-color-3: var(--mantine-color-dimmed);
--scalar-color-accent: var(--mantine-color-red-6);
--scalar-border-color: var(--mantine-color-gray-3);
}
.dark-mode {
--scalar-background-1: var(--mantine-color-body);
--scalar-background-2: var(--mantine-color-dark-6);
--scalar-background-3: var(--mantine-color-dark-5);
--scalar-color-1: var(--mantine-color-text);
--scalar-color-2: var(--mantine-color-dimmed);
--scalar-color-3: var(--mantine-color-dimmed);
--scalar-color-accent: var(--mantine-color-red-6);
--scalar-border-color: var(--mantine-color-dark-4);
}
`;
import "./scalar-theme.css";
interface ScalarApiReferenceProps {
document: object;
@@ -48,7 +26,6 @@ export function ScalarApiReference({ document }: ScalarApiReferenceProps) {
showDeveloperTools: "never",
defaultOpenAllTags: true,
forceDarkModeState: colorScheme,
customCss,
authentication: {
preferredSecurityScheme: "apikey",
},
apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css
+21
View File
@@ -0,0 +1,21 @@
.light-mode {
--scalar-background-1: var(--mantine-color-body);
--scalar-background-2: var(--mantine-color-gray-0);
--scalar-background-3: var(--mantine-color-gray-1);
--scalar-color-1: var(--mantine-color-text);
--scalar-color-2: var(--mantine-color-dimmed);
--scalar-color-3: var(--mantine-color-dimmed);
--scalar-color-accent: var(--mantine-color-red-6);
--scalar-border-color: var(--mantine-color-gray-3);
}
.dark-mode {
--scalar-background-1: var(--mantine-color-body);
--scalar-background-2: var(--mantine-color-dark-6);
--scalar-background-3: var(--mantine-color-dark-5);
--scalar-color-1: var(--mantine-color-text);
--scalar-color-2: var(--mantine-color-dimmed);
--scalar-color-3: var(--mantine-color-dimmed);
--scalar-color-accent: var(--mantine-color-red-6);
--scalar-border-color: var(--mantine-color-dark-4);
}