Adapt remaining app to dark theme

[bilalabbad]

Dark theme

Infrahub gets a dark theme. Earlier PRs in this series gave the design system its dark palette; this one carries it through the rest of the application and adds the machinery a person needs to actually choose it.

It ships behind an experimental flag, off by default, while the theme is alpha.

Approach

Colour has one source of truth. Components never ask which theme is active. They use semantic tokens — --content, --foreground, --border, --surface, --danger and friends — whose values are redefined under a single dark class on the document element. That is why supporting a second theme is mostly redefining tokens rather than editing components, and why a component with a fixed colour is a defect rather than a style choice.

The document element is the state. Anything that needs to know the current theme reads it back off the document rather than from storage or config, so no component can disagree with what the user is actually looking at.

Content that carries its own colours is driven explicitly. Mermaid diagrams, GraphiQL, the schema visualizer, the date picker and the toasts each bake or vendor their own palette and cannot be reached by our tokens. Each one is handed the resolved theme, or has its vendored stylesheet re-pointed at our tokens.

Nothing flashes. The last resolved theme is replayed before the first frame, and the theme is applied before paint rather than after, so a reload and a first visit both land on the right palette directly instead of painting light and snapping.

The choice is a deployment decision. With the flag off there is no theme setting and no way to reach dark; the stored choice is kept rather than deleted, so enabling the flag later restores whatever the user had picked. The menu entry tags dark as alpha.

Rollout

CSS and styling only, plus one additive field on the unauthenticated config endpoint. No schema or API changes, nothing to migrate, and light is visually unchanged apart from a shared danger colour. Safe to deploy: with the flag at its default, the application renders exactly as it does today.

Screenshots

Captured on a live stack at 1440×900 — same pages, same data, only the theme differing. These cover this series as a whole, including the follow-up work merged in from #10295.

Home

light	dark

Object list

light	dark

Proposed change with a Mermaid diagram — the diagram itself follows the theme:

light	dark

GraphQL sandbox — follows the app theme instead of being pinned light:

light	dark

Login — themed before a session exists:

light	dark

Checklist

• Tests added/updated — theme provider, gating rule, resolved-theme hook, account-menu switch, and visual tests asserting the colours Mermaid actually bakes in
• Changelog entry — +dark-theme.added.md
• External docs updated — FAQ entry; the configuration reference carries the setting through generation
• Internal .md docs updated — dev/knowledge/frontend/theming.md
• I have reviewed AI generated content

[cubic-dev-ai]

All reported issues were addressed across 151 files

<sub>Shadow auto-approve: would not auto-approve because issues were found.

Re-trigger cubic</sub>

[cubic-dev-ai]

1 issue found across 3 files (changes from recent commits).

Confidence score: 4/5

• In frontend/app/src/shared/components/editor/csv-table.tsx, reverting the empty-state text to hardcoded text-neutral-400 creates a concrete light-theme contrast regression (below AA), so users may struggle to read guidance in the editor’s empty state—switch back to the theme token (text-foreground-muted) or another AA-compliant token to de-risk accessibility.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/app/src/shared/components/editor/csv-table.tsx">

<violation number="1" location="frontend/app/src/shared/components/editor/csv-table.tsx:35">
P3: The empty-state text was reverted from the theme token `text-foreground-muted` to a hardcoded `text-neutral-400`. In light theme this drops contrast from stone-600 (~7:1) to neutral-400 (~2.5:1, below the AA threshold for 14px text), and it abandons the theme-aware tokenization used by the rest of this PR. Use `text-foreground-muted` so the text follows the active theme and preserves the light-theme look the PR aims to keep unchanged.</violation>
</file>

<sub>Shadow auto-approve: would not auto-approve because issues were found.

Re-trigger cubic</sub>

[cubic-dev-ai]

P3: The empty-state text was reverted from the theme token text-foreground-muted to a hardcoded text-neutral-400. In light theme this drops contrast from stone-600 (~7:1) to neutral-400 (~2.5:1, below the AA threshold for 14px text), and it abandons the theme-aware tokenization used by the rest of this PR. Use text-foreground-muted so the text follows the active theme and preserves the light-theme look the PR aims to keep unchanged.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/app/src/shared/components/editor/csv-table.tsx, line 35:

<comment>The empty-state text was reverted from the theme token `text-foreground-muted` to a hardcoded `text-neutral-400`. In light theme this drops contrast from stone-600 (~7:1) to neutral-400 (~2.5:1, below the AA threshold for 14px text), and it abandons the theme-aware tokenization used by the rest of this PR. Use `text-foreground-muted` so the text follows the active theme and preserves the light-theme look the PR aims to keep unchanged.</comment>

<file context>
@@ -26,21 +26,21 @@ const parseCSV = (csv: string): string[][] => {
 
   if (!rows[0]) {
-    return <div className="text-foreground-muted text-sm">No data available</div>;
+    return <div className="text-neutral-400 text-sm">No data available</div>;
   }
 
</file context>

Suggested change

	return <div className="text-neutral-400 text-sm">No data available</div>;
	return <div className="text-foreground-muted text-sm">No data available</div>;

[cubic-dev-ai]

1 issue found across 9 files (changes from recent commits).

Confidence score: 4/5

• In frontend/app/src/shared/components/ui/command.tsx, applying text-subtle to CommandList changes all non-selected item labels in light theme as well as dark theme, which may reduce contrast or unintentionally alter combobox/search UI; scope the styling to dark mode or the intended items.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/app/src/shared/components/ui/command.tsx">

<violation number="1" location="frontend/app/src/shared/components/ui/command.tsx:46">
P2: Adding `text-subtle` to `CommandList` sets the text color for every non-selected item in the list, not just in dark mode. In light theme `--subtle` is `--color-stone-600`, so combobox/search/command item labels change from the previous inherited foreground (`stone-800`) to the muted `stone-600` tone. That alters light-theme visuals, contradicting the PR note that light theme is unchanged except danger colors, and it demotes primary labels (e.g. SearchAnywhereItem result titles, node labels) to a secondary contrast level throughout these popovers.

Since the pattern elsewhere in this component family is that secondary metadata is colored explicitly (e.g. ComboboxItem already applies `text-subtle-muted` to its schema-label span), primary labels should stay at foreground. Drop `text-subtle` (let items inherit) or use `text-foreground` if a guaranteed base color is wanted.</violation>
</file>

<sub>Shadow auto-approve: would not auto-approve because issues were found.
Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Adding text-subtle to CommandList sets the text color for every non-selected item in the list, not just in dark mode. In light theme --subtle is --color-stone-600, so combobox/search/command item labels change from the previous inherited foreground (stone-800) to the muted stone-600 tone. That alters light-theme visuals, contradicting the PR note that light theme is unchanged except danger colors, and it demotes primary labels (e.g. SearchAnywhereItem result titles, node labels) to a secondary contrast level throughout these popovers.

Since the pattern elsewhere in this component family is that secondary metadata is colored explicitly (e.g. ComboboxItem already applies text-subtle-muted to its schema-label span), primary labels should stay at foreground. Drop text-subtle (let items inherit) or use text-foreground if a guaranteed base color is wanted.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/app/src/shared/components/ui/command.tsx, line 46:

<comment>Adding `text-subtle` to `CommandList` sets the text color for every non-selected item in the list, not just in dark mode. In light theme `--subtle` is `--color-stone-600`, so combobox/search/command item labels change from the previous inherited foreground (`stone-800`) to the muted `stone-600` tone. That alters light-theme visuals, contradicting the PR note that light theme is unchanged except danger colors, and it demotes primary labels (e.g. SearchAnywhereItem result titles, node labels) to a secondary contrast level throughout these popovers.

Since the pattern elsewhere in this component family is that secondary metadata is colored explicitly (e.g. ComboboxItem already applies `text-subtle-muted` to its schema-label span), primary labels should stay at foreground. Drop `text-subtle` (let items inherit) or use `text-foreground` if a guaranteed base color is wanted.</comment>

<file context>
@@ -43,7 +43,7 @@ export function CommandList({ className, ref, ...props }: CommandListProps) {
       ref={ref}
       className={classNames(
-        "max-h-[280px] grow overflow-y-auto overflow-x-hidden rounded-md p-2",
+        "max-h-70 grow overflow-y-auto overflow-x-hidden rounded-md p-2 text-subtle",
         className
       )}
</file context>

[cubic-dev-ai]

0 issues found across 5 files (changes from recent commits).

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

<sub>Shadow auto-approve: would not auto-approve. Auto-approval blocked by 3 unresolved issues from previous reviews.

Re-trigger cubic</sub>

[codspeed-hq]

Merging this PR will not alter performance

✅ 13 untouched benchmarks

---

_{Comparing bab-dark-theme-app (b9bc6b4) with develop (e8b22b7)}

[ajtmccarty]

this looks unnecessary

[gmazoyer]

Should this actually be a user preference instead of a global switch?