Skip to content

Refine docs dark theme contrast #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charlesrhoward merged 3 commits into from
May 18, 2026
Merged

Refine docs dark theme contrast #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f577cee
Refine docs dark theme contrast
charlesrhoward May 18, 2026
826847b
Address docs theme review feedback
charlesrhoward May 18, 2026
4e8c3df
Add agent-friendly markdown URLs and address PR review
charlesrhoward May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ const config = {
turbopack: {
root: __dirname,
},
async rewrites() {
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning: .md rewrite conflicts with Next.js static asset handling

Next.js serves files in the public/ directory as static assets before rewrites are evaluated. If any .md file is ever placed in public/ (e.g. a CHANGELOG.md or README.md for agent crawling), it would bypass the rewrite silently. This is low risk currently but worth a short comment on the rewrite to document the assumption that no .md files live in public/.

// Agent-friendly: `curl https://docs/<slug>.md` returns raw markdown.
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Critical: Rewrite destination path separator — slash vs. dot mismatch

The catch-all rewrite rule uses /:path*.md as the source, which captures path segments separated by /. For a URL like /configure-and-extend/connections-and-mcp.md, Next.js will expand :path* to configure-and-extend/connections-and-mcp — but the destination is /llms.mdx/docs/:path*/content.md, which becomes /llms.mdx/docs/configure-and-extend/connections-and-mcp/content.md. That looks correct for multi-segment paths. However, for a single-segment URL like /getting-started.md, :path* will be getting-started, which maps to /llms.mdx/docs/getting-started/content.md. That also seems fine.

The actual risk is at the boundary: the .md extension is part of the literal source pattern, not captured into :path*. So /foo/bar.md → :path* = foo/bar, destination = /llms.mdx/docs/foo/bar/content.md. Cross-check this against how getPageMarkdownUrl builds its segments array ([...page.slugs, 'content.md']) — slugs don't include the .md suffix, so the destination aligns. This appears correct on careful reading, but the comment on the rule says curl https://docs/<slug>.md returns raw markdown — confirm with an integration test that a nested page like /configure-and-extend/connections-and-mcp.md actually resolves and that the pre-rendered static file exists at the destination path. If the static route isn't pre-rendered at that exact path the rewrite will 404 silently.

return [
{ source: '/index.md', destination: '/llms.mdx/docs/content.md' },
{ source: '/:path*.md', destination: '/llms.mdx/docs/:path*/content.md' },
];
},
};

export default withMDX(config);
33 changes: 21 additions & 12 deletions src/app/(docs)/[[...slug]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,23 @@ export default async function Page(props: PageProps<'/[[...slug]]'>) {
const MDX = page.data.body;
const markdownUrl = getPageMarkdownUrl(page).url;

const githubUrl = `https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/content/docs/${page.path}`;

return (
<DocsPage toc={page.data.toc} full={page.data.full}>
<DocsPage
toc={page.data.toc}
full={page.data.full}
tableOfContent={{
footer: (
<div className="flex flex-row flex-wrap gap-2 items-center pt-4 mt-4 border-t border-[var(--border-subtle)]">
<MarkdownCopyButton markdownUrl={markdownUrl} />
<ViewOptionsPopover markdownUrl={markdownUrl} githubUrl={githubUrl} />
</div>
),
}}
>
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription className="mb-0">{page.data.description}</DocsDescription>
<div className="flex flex-row gap-2 items-center border-b pb-6">
<MarkdownCopyButton markdownUrl={markdownUrl} />
<ViewOptionsPopover
markdownUrl={markdownUrl}
githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/content/docs/${page.path}`}
/>
</div>
<DocsDescription className="mb-6">{page.data.description}</DocsDescription>
<DocsBody>
<MDX
components={getMDXComponents({
Expand All @@ -41,9 +47,7 @@ export default async function Page(props: PageProps<'/[[...slug]]'>) {
})}
/>
</DocsBody>
<EditOnGitHub
href={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/content/docs/${page.path}`}
/>
<EditOnGitHub href={githubUrl} />
</DocsPage>
);
}
Expand All @@ -60,6 +64,11 @@ export async function generateMetadata(props: PageProps<'/[[...slug]]'>): Promis
return {
title: page.data.title,
description: page.data.description,
alternates: {
types: {
'text/markdown': getPageMarkdownUrl(page).url,
},
},
openGraph: {
images: getPageImage(page).url,
},
Expand Down
285 changes: 260 additions & 25 deletions src/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,82 @@
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* Mogplex brand colors — monochrome theme, aligned with mogplex.com */
/* Mogplex docs theme: quiet dark technical reference surface. */
:root {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);

/* Light mode tokens — warm cream surface, neutral ink */
--color-fd-background: #f6f5f1;
--color-fd-foreground: #171717;
--color-fd-card: #ffffff;
--color-fd-muted: #efede7;
--color-fd-muted-foreground: #78716c;
--color-fd-primary: #171717;
--color-fd-primary-foreground: #fafaf9;
--color-fd-accent: #ebe7dd;
--color-fd-accent-foreground: #171717;
--color-fd-border: #ddd7ca;
--color-fd-ring: #171717;
--bg-canvas: hsl(0 0% 2%);
--bg-surface: hsl(0 0% 2%);
--bg-sidebar: hsl(0 0% 8%);
--bg-elevated: #16161a;
--bg-hover: rgba(255, 255, 255, 0.04);
--bg-overlay: rgba(0, 0, 0, 0.62);

--border-subtle: rgba(255, 255, 255, 0.05);
--border-default: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.12);

--text-primary: rgba(255, 255, 255, 0.92);
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning: --text-tertiary fails WCAG AA contrast (TOC, prose bullets)

--text-tertiary: rgba(255, 255, 255, 0.38) on --bg-canvas: #0a0a0c yields approximately 3.1:1 contrast — below the WCAG AA minimum of 4.5:1 for normal-sized text.

Affected surfaces:

  • #nd-toc, #nd-toc #toc-title, #nd-toc a — all non-active TOC items render at this opacity
  • --tw-prose-counters and --tw-prose-bullets in the prose block

For a docs site, TOC navigation and list counters are core reading aids; failing AA here is a real accessibility regression.

Suggestion: Raise --text-tertiary to at least rgba(255, 255, 255, 0.50) (~4.8:1 on #0a0a0c), or use --text-secondary (0.55, ~5.2:1) for these surfaces instead.

--text-body: rgba(255, 255, 255, 0.74);
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning: Several text tokens fail WCAG AA contrast on their respective backgrounds

The new token values produce contrast ratios below 4.5:1 (AA for normal text) in some combinations:

  • --text-body: rgba(255,255,255,0.74) on --bg-surface: hsl(0 0% 2%) (~#050505) → effective colour ≈ #C0C0C0 → contrast ~6.3:1 ✅
  • --text-secondary: rgba(255,255,255,0.55) on --bg-sidebar: hsl(0 0% 8%) (~#141414) → effective ≈ #8F8F8F → contrast ~3.9:1 ❌ (used for all sidebar nav links, TOC title, table cell text)
  • --text-tertiary: rgba(255,255,255,0.5) on --bg-canvas: hsl(0 0% 2%) → effective ≈ #818181 → contrast ~3.6:1 ❌ (used for TOC links at rest)
  • --border-subtle: rgba(255,255,255,0.05) is fine for decoration but is also used as --tw-prose-hr and --tw-prose-th-borders — low-contrast table headers may be hard to distinguish.

Sidebar navigation links (color: var(--text-secondary)) and TOC links (color: var(--text-tertiary)) are interactive controls and must meet AA. Consider bumping --text-secondary to rgba(255,255,255,0.65) and --text-tertiary to rgba(255,255,255,0.6) to clear 4.5:1 on both canvas and sidebar backgrounds.

--text-secondary: rgba(255, 255, 255, 0.62);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-logo: rgba(255, 255, 255, 0.96);

--accent: #af71d2;
--accent-soft: rgba(175, 113, 210, 0.12);
--accent-underline: rgba(175, 113, 210, 0.4);
}

.light {
--bg-canvas: #f6f5f1;
--bg-surface: #ffffff;
--bg-sidebar: #efede7;
--bg-elevated: #faf9f5;
--bg-hover: rgba(23, 23, 23, 0.05);
--bg-overlay: rgba(23, 23, 23, 0.4);

--border-subtle: rgba(23, 23, 23, 0.08);
--border-default: rgba(23, 23, 23, 0.12);
--border-strong: rgba(23, 23, 23, 0.18);

--text-primary: rgba(23, 23, 23, 0.92);
--text-body: rgba(23, 23, 23, 0.78);
--text-secondary: rgba(23, 23, 23, 0.7);
--text-tertiary: rgba(23, 23, 23, 0.64);
--text-logo: rgba(23, 23, 23, 0.96);

--accent: #7d3fa2;
--accent-soft: rgba(125, 63, 162, 0.11);
--accent-underline: rgba(125, 63, 162, 0.42);
}

:root,
.light,
.dark {
Comment on lines +55 to 57
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep light theme tokens distinct from dark theme

The theme variables are now assigned identically for :root, .light, and .dark, so selecting Light (or using System with a light OS preference) no longer changes docs styling. Because the docs sidebar still renders ThemeSwitcher with Light/System options, users can choose a mode that has no visual effect, which is a functional regression in theme behavior rather than just a style tweak.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Contributor Author

@charlesrhoward charlesrhoward May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dismissing — the theme switcher is disabled in layout.shared.tsx (themeSwitch.enabled: false), so users cannot pick Light or System. The site is dark-only by design; the .light token block is kept for completeness but is never applied at runtime.

Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Critical: :root defaults are dark, but the fd-token block unconditionally applies to :root — light mode overrides are silently clobbered

In global.css, the custom tokens are defined as dark-defaults on :root (lines 6–28), then overridden for .light (lines 30–44). However, the Fumadocs mapping block (:root, .light, .dark { … }) re-resolves all --color-fd-* vars using var(--bg-surface), var(--text-body), etc., which are correct at evaluation time.

The real problem is ordering: because :root carries the dark defaults AND the Fumadocs mapping block also targets :root, a browser that has no .dark or .light class on <html> (e.g., during SSR or before next-themes mounts) will render dark tokens — but the .light overrides will not fire until that class is present. This is likely intentional for a dark-first site, but it means that if next-themes defaults to 'system' and the OS preference is light, there will be a flash where dark tokens are applied before the .light class is injected.

More concretely: the .light block only overrides the raw tokens (--bg-canvas, etc.), but the Fumadocs mapping selector :root, .light, .dark re-evaluates them correctly once .light is added. The cascade is technically safe post-hydration. However, any SSR-rendered HTML for light-mode visitors will have incorrect dark token values baked into the initial paint, because :root is always dark and the server cannot add a .light class without a cookie hint. Verify that next-themes is configured with defaultTheme: 'dark' or that a cookie-based theme hint is in place; otherwise light-mode visitors will see a FOIT/FART.

Copy link
Copy Markdown
Contributor Author

@charlesrhoward charlesrhoward May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dismissing — same reason as the sibling Codex thread. Theme switcher is disabled (themeSwitch.enabled: false in layout.shared.tsx), so visitors cannot select Light or System. next-themes is not in play here; the site ships dark-only and there is no light-mode SSR path to flash through.

Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Critical: :root defaults dark tokens — .light class won't override html/body background correctly in SSR

:root is defined with the dark token set (e.g. --bg-canvas: hsl(0 0% 2%)). The .light class redefines the same tokens, but html and body both receive background: var(--bg-canvas) unconditionally, with no selector specificity that accounts for .light vs. the root default.

The cascade for html, body { background: var(--bg-canvas) } resolves at parse time using whatever --bg-canvas is on :root. If the page renders server-side without a .light class on <html> (which is typical for SSR before hydration), the dark canvas token applies. Once JS hydrates and adds .light, the custom property on :root itself is not changed — only .light's scoped value is available when the selector matches. Because var(--bg-canvas) on html/body uses the inheriting value, this should resolve correctly IF .light is placed on <html>. But the ThemeSwitcher has its theme switch disabled (enabled: false in layout.shared.tsx), so .light class application path needs to be verified. If fumadocs-ui or next-themes never adds .light to <html>, the light theme tokens are dead code and only dark tokens ever apply.

Separately: the :root, .light, .dark block maps ALL three contexts to the same fd-* variables. This means .dark and .light map identically, which is only correct because the contextual tokens (--bg-surface, etc.) differ per class. But :root maps dark tokens → fd-* variables, so if a user has prefers-color-scheme: light but no .light class, they get a dark UI. Verify this is intentional (docs are dark-first) and add a comment to prevent future confusion.

/* Dark mode tokens — pure black surface, white ink */
--color-fd-background: #0a0a0a;
--color-fd-foreground: #ededed;
--color-fd-card: #111111;
--color-fd-muted: #1a1a1a;
--color-fd-muted-foreground: #a1a1a1;
--color-fd-primary: #ffffff;
--color-fd-primary-foreground: #0a0a0a;
--color-fd-accent: #1e1e1e;
--color-fd-accent-foreground: #ededed;
--color-fd-border: #262626;
--color-fd-ring: #ffffff;
--color-fd-background: var(--bg-surface);
--color-fd-foreground: var(--text-body);
--color-fd-card: var(--bg-elevated);
--color-fd-card-foreground: var(--text-body);
--color-fd-muted: var(--bg-elevated);
--color-fd-muted-foreground: var(--text-secondary);
--color-fd-popover: var(--bg-elevated);
--color-fd-popover-foreground: var(--text-body);
--color-fd-primary: var(--accent);
--color-fd-primary-foreground: var(--text-primary);
--color-fd-secondary: var(--bg-elevated);
--color-fd-secondary-foreground: var(--text-body);
--color-fd-accent: var(--accent-soft);
--color-fd-accent-foreground: var(--text-primary);
--color-fd-border: var(--border-default);
--color-fd-ring: var(--border-strong);
--color-fd-overlay: var(--bg-overlay);
}
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: Inline rgba(0,0,0,0.62) hardcoded for --color-fd-overlay instead of using a semantic token

Line ~73: --color-fd-overlay: rgba(0, 0, 0, 0.62) is hardcoded in the :root,.light,.dark block rather than being derived from a named token like the rest of the palette. If the overlay needs to differ between light and dark (e.g., rgba(0,0,0,0.4) in light mode), there's no hook to change it. Define --bg-overlay in both :root and .light and reference it here for consistency.


html,
body {
background: var(--bg-canvas);
color: var(--text-body);
}

html {
Expand All @@ -45,6 +89,197 @@ html > body[data-scroll-locked] {
--removed-body-scroll-bar-size: 0px !important;
}

Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning: Hard-coded #nd-* fumadocs internal IDs are a fragile integration contract

Roughly 200 lines of the new CSS target internal fumadocs DOM IDs (#nd-docs-layout, #nd-page, #nd-sidebar, #nd-toc, #nd-sidebar-mobile). These IDs are not part of fumadocs-ui's documented public API and could change in a minor version bump without a breaking-change notice. Consider pinning fumadocs-ui to an exact version in package.json if not already done, or add a comment referencing the fumadocs version these IDs were validated against so future upgrades know to re-verify.

#nd-docs-layout {
position: relative;
z-index: 1;
background-color: var(--bg-canvas);
color: var(--text-body);
}

#nd-page {
min-height: 100dvh;
background: var(--bg-surface);
border-inline: 1px solid var(--border-subtle);
color: var(--text-body);
}

#nd-page h1,
#nd-page h2,
#nd-page h3,
#nd-page h4,
#nd-page h5,
#nd-page h6 {
color: var(--text-primary);
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: #nd-page > p selector is likely dead CSS

#nd-page > p { color: var(--text-body); } targets only direct children <p> elements of #nd-page. In practice, prose content is always nested inside .prose containers, never as direct children of the page root. This rule has no effect in normal navigation and can be removed to keep the stylesheet clean.

Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning: Fumadocs internal ID selectors (#nd-sidebar, #nd-page, etc.) create a brittle coupling to library internals

The entire theming strategy relies on overriding styles via #nd-sidebar, #nd-sidebar-mobile, #nd-toc, #nd-page, #nd-docs-layout, and class-name fragment [class*='border-fd-foreground']. These are internal implementation details of fumadocs-ui and are not part of its public API. A minor version bump of the library could rename, restructure, or remove these IDs, silently breaking the entire theme without a build error.

Fumadocs exposes a CSS variable override mechanism (the --color-fd-* tokens, which this PR correctly populates). Where possible, prefer driving the theme exclusively through those tokens. The !important overrides on #nd-sidebar background and border-color suggest the token approach wasn't fully sufficient — it's worth filing an issue upstream or pinning the fumadocs-ui version explicitly in package.json with a comment explaining why.

}

#nd-page > .border-b {
border-color: var(--border-subtle);
}

#nd-sidebar,
#nd-sidebar-mobile {
background: var(--bg-sidebar) !important;
border-color: var(--border-default) !important;
color: var(--text-secondary);
}

#nd-sidebar a,
#nd-sidebar button,
#nd-sidebar p,
#nd-sidebar-mobile a,
#nd-sidebar-mobile button,
#nd-sidebar-mobile p {
color: var(--text-secondary);
}

#nd-sidebar a:not([data-active='true']):hover,
#nd-sidebar button:hover,
#nd-sidebar-mobile a:not([data-active='true']):hover,
#nd-sidebar-mobile button:hover {
background: var(--bg-hover);
color: var(--text-body);
}

#nd-sidebar a[data-active='true'],
#nd-sidebar-mobile a[data-active='true'] {
position: relative;
background: var(--accent-soft) !important;
color: var(--text-primary) !important;
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: Active sidebar indicator ::after relies on undeclared position:relative

The ::after pseudo-element for the active sidebar accent bar uses position: absolute with inset-block/inset-inline-start to place a 2px left pill:

#nd-sidebar a[data-active='true']::after {
  position: absolute;
  inset-block: 0.625rem;
  inset-inline-start: 0;
  ...
}

For this to render correctly, the <a> ancestor must have position: relative. This currently works only if fumadocs sets that on its sidebar link elements. If a fumadocs upgrade changes that, the indicator will escape its container and visually glitch.

Suggestion: Add position: relative to #nd-sidebar a[data-active='true'] to make this self-contained and upgrade-safe.

}

#nd-sidebar a[data-active='true']::before,
#nd-sidebar-mobile a[data-active='true']::before {
display: none !important;
}

#nd-sidebar a[data-active='true']::after,
#nd-sidebar-mobile a[data-active='true']::after {
content: '';
position: absolute;
inset-block: 0.625rem;
inset-inline-start: 0;
width: 2px;
border-radius: 999px;
background: var(--accent);
}

#nd-toc {
color: var(--text-tertiary);
}

#nd-toc #toc-title,
#nd-toc a {
color: var(--text-tertiary) !important;
}

#nd-toc a:hover {
color: var(--text-secondary) !important;
}

#nd-toc a[data-active='true'] {
color: var(--text-primary) !important;
}

#nd-toc [class*='border-fd-foreground'] {
border-color: var(--border-subtle) !important;
}
Copy link
Copy Markdown

@mogplex mogplex Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: Prose link color is --text-body (not --accent) — may be intentional but reduces discoverability

Links in prose are styled color: var(--text-body) with only an underline decoration to distinguish them. This is a deliberate low-contrast aesthetic choice (per the PR title), but WCAG 2.1 SC 1.4.1 requires that links not differentiated by color alone must have a non-color visual indicator on the default state — the underline satisfies this. Just flagging for awareness if accessibility audit is planned.


#nd-page .prose {
--tw-prose-body: var(--text-body);
--tw-prose-headings: var(--text-primary);
--tw-prose-lead: var(--text-body);
--tw-prose-links: var(--text-body);
--tw-prose-bold: var(--text-primary);
--tw-prose-counters: var(--text-secondary);
--tw-prose-bullets: var(--text-secondary);
--tw-prose-hr: var(--border-subtle);
--tw-prose-quotes: var(--text-body);
--tw-prose-quote-borders: var(--border-default);
--tw-prose-captions: var(--text-secondary);
--tw-prose-code: var(--text-primary);
--tw-prose-th-borders: var(--border-subtle);
--tw-prose-td-borders: var(--border-subtle);
--tw-prose-kbd: var(--text-primary);
}

#nd-page .prose :where(h1, h2, h3, h4, h5, h6, strong):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
color: var(--text-primary);
}

#nd-page .prose :where(p, li):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
color: var(--text-body);
}

#nd-page .prose :where(a:not([data-card])):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
color: var(--text-body);
text-decoration-color: var(--accent-underline);
text-decoration-thickness: 1px;
opacity: 1;
}

#nd-page .prose :where(a:not([data-card]):hover):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
color: var(--accent);
opacity: 1;
}

#nd-page .prose :where(table):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
background: var(--bg-elevated);
border-color: var(--border-subtle);
}

#nd-page .prose :where(th):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
background: var(--bg-elevated);
border-color: var(--border-subtle);
color: var(--text-secondary);
}

#nd-page .prose :where(td):not(
:where([class~='not-prose'], [class~='not-prose'] *)
) {
border-color: var(--border-subtle);
color: var(--text-secondary);
}

#nd-page .prose :where(code):not(
:where(pre code, [class~='not-prose'], [class~='not-prose'] *)
) {
border: 1px solid var(--border-subtle);
border-radius: 0.25rem;
background: var(--bg-elevated);
padding: 0.125em 0.35em;
color: var(--text-primary);
}

#nd-page figure.shiki,
#nd-page [data-card='true'],
#nd-page table,
#nd-page [role='alert'] {
background-color: var(--bg-elevated);
border-color: var(--border-default);
}

#nd-page [data-card='true'] {
border-radius: 0.5rem;
}

#nd-docs-layout .shadow-sm,
#nd-docs-layout .shadow-md,
#nd-docs-layout .shadow-lg {
box-shadow: none !important;
}

@media (min-width: 768px) {
#nd-docs-layout {
--fd-sidebar-width: 270px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/theme-switcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function ThemeSwitcher(): React.JSX.Element {
aria-label="Theme selection"
>
<motion.div
className="absolute left-1 top-1 h-6 rounded-sm bg-fd-background shadow-sm"
className="absolute left-1 top-1 h-6 rounded-sm bg-fd-background"
initial={false}
animate={{
x: indicatorConfig.x,
Expand Down
2 changes: 1 addition & 1 deletion src/lib/layout.shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export function baseOptions(): BaseLayoutProps {
return {
nav: {
title: (
<span className="inline-flex items-center gap-2 text-fd-foreground">
<span className="inline-flex items-center gap-2 text-[var(--text-logo)]">
<svg
width="20"
height="20"
Expand Down
Loading