feat: add IDE-inspired themes (Nord, Catppuccin, One Dark)

[elizabetdev]

🏆 Hackathon submission

Summary

Adds three IDE-inspired brand themes to HyperDX, each with full dark and light mode support:

• Nord — Arctic cool blues (Polar Night dark / Snow Storm light)
• Catppuccin — Modern pastel palette (Mocha dark / Latte light)
• One Dark — Atom's iconic theme (One Dark / One Light)

Changes

• New themes/nord/, themes/catppuccin/, themes/onedark/ directories, each with _tokens.scss, mantineTheme.ts, and index.ts
• Extracted shared chart palette into themes/_shared-chart-tokens.scss as a reusable @mixin chart-tokens — used by all themes including ClickStack, eliminating duplication between dark/light blocks
• Added themes/_shared/Logomark.tsx and Wordmark.tsx — same HyperDX hex+bolt shape but filled with --color-text so it renders white in dark mode and black in light mode for IDE themes
• Extended ThemeName union, Zod schema, theme registry, _base-tokens.scss imports, and _document.tsx SSR validation to cover all new themes
• Added agent_docs/theming.md — contributor guide covering the two-concept theming system, CSS variable conventions, logo variants, and a step-by-step checklist for adding future themes

Switching themes in dev

window.__HDX_THEME.set('nord')        // Nord
window.__HDX_THEME.set('catppuccin')  // Catppuccin
window.__HDX_THEME.set('onedark')     // One Dark
window.__HDX_THEME.clear()            // back to default

Or use the Brand Theme selector in the User Preferences modal (dev/local mode only).

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	May 5, 2026 3:51pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 5533365

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Minor
@hyperdx/api	Minor
@hyperdx/otel-collector	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

E2E Test Results

✅ All tests passed • 160 passed • 3 skipped • 1214s

Status	Count
✅ Passed	160
❌ Failed	0
⚠️ Flaky	3
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

🔴 Tier 4 — Critical

Touches auth, data models, config, tasks, OTel pipeline, ClickHouse, or CI/CD.

Why this tier:

• Large diff: 1726 production lines changed (threshold: 1000)

Review process: Deep review from a domain expert. Synchronous walkthrough may be required.
SLA: Schedule synchronous review within 2 business days.

Stats

• Production files changed: 17
• Production lines changed: 1726
• Branch: feat/ide-themes
• Author: elizabetdev

To override this classification, remove the review/tier-4 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

PR Review

Well-structured hackathon submission that correctly follows the established theming system patterns. No security issues. A few things to address:

• ⚠️ Three desynchronized theme name registries (types.ts union, Zod enum in theme/index.ts, VALID_THEME_NAMES in _document.tsx) — all updated correctly here, but this is a fragile pattern. Consider deriving VALID_THEME_NAMES from the Zod schema instead of maintaining a third list.

• ⚠️ All three new themes reuse HyperDX favicons (/favicons/hyperdx/favicon.svg etc.) → Intentional placeholder or missing assets? If placeholder, add a TODO comment so it doesn't ship silently.

• ⚠️ _shared/Logomark.tsx uses hardcoded id="clip0_shared" → If the Logomark renders more than once on a page (sidebar + header), duplicate DOM IDs violate HTML spec. In practice no visual artifact (the rect clips full 512×512 either way), but use useId() or a static unique suffix to be spec-compliant.

• ℹ️ Accordion noPadding variant loses --item-border-color — the { ...base, control: { paddingInlineStart: 0 } } spread discards base.control['--item-border-color']. This is copied from the existing hyperdx theme so it's a pre-existing bug, but it's now replicated across 3 more themes.

✅ Core theme system integration (tokens, Mantine overrides, Zod validation, SSR class injection, chart token extraction) is correct and consistent across all three new themes.