From 4dc110f71c05bb70c3afc5e18353c89ed8246e7f Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Tue, 9 Jun 2026 00:39:44 +0200 Subject: [PATCH] fix(ui): align Scalar API reference theme with Mantine dark mode Override all Scalar CSS variables including --scalar-background-card, --scalar-background-accent, button colors, and scrollbar colors to properly map to Mantine design tokens in both light and dark modes. Fixes sub-schema dropdowns and response previews using wrong background. --- .../tools/api/components/scalar-theme.css | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css b/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css index 23e7b2c96..b795f7ad9 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css +++ b/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css @@ -2,20 +2,50 @@ --scalar-background-1: var(--mantine-color-body); --scalar-background-2: var(--mantine-color-gray-0); --scalar-background-3: var(--mantine-color-gray-1); + --scalar-background-card: var(--mantine-color-white); + --scalar-background-accent: rgba(0, 0, 0, 0.04); + --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); + + --scalar-button-1: var(--mantine-color-dark-7); + --scalar-button-1-hover: var(--mantine-color-dark-5); + --scalar-button-1-color: var(--mantine-color-white); + + --scalar-scrollbar-color: rgba(0, 0, 0, 0.18); + --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36); } .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-background-card: var(--mantine-color-dark-6); + --scalar-background-accent: rgba(255, 255, 255, 0.06); + --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); + + --scalar-button-1: rgba(255, 255, 255, 0.9); + --scalar-button-1-hover: rgba(255, 255, 255, 0.8); + --scalar-button-1-color: var(--mantine-color-dark-7); + + --scalar-scrollbar-color: rgba(255, 255, 255, 0.18); + --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.36); +} + +.scalar-card, +.scalar-api-client__item, +.dark-mode .dark-mode.scalar-card { + --scalar-background-1: var(--scalar-background-card); + --scalar-background-2: var(--scalar-background-card); + --scalar-background-3: var(--scalar-background-card); }