feat: Add multi-theme system #1618

elizabetdev · 2026-01-16T19:26:07Z

WIP

…r references - Added AppThemeProvider to _app.tsx for centralized theme management. - Updated color references across various components to use the new brand color scheme. - Introduced ClickStack and HyperDX themes with corresponding color definitions. - Enhanced UserPreferencesModal to allow theme selection and added brand theme options for development mode. - Updated stylesheets to support new theme colors and ensure consistent branding.

- Replaced direct imports of Logo and Icon with theme hooks in AppNav, LandingHeader, OnboardingChecklist, and Spotlights components. - Introduced ThemedLogo component in nextra.config.tsx for consistent logo rendering. - Updated styles in AppNav.module.scss to reflect new brand color scheme. - Modified Icon component to use a new SVG design for improved aesthetics.

- Changed the class name for the search link in AppNav from 'text-success' to 'text-brand' to align with the new branding guidelines.

- Changed instances of 'text-success' to 'text-brand' in AuthPage, ExpandableRowTable, TimePicker, and DisplaySwitcher components to align with the new branding guidelines. - Added new utility classes for brand text styling in _utilities.scss. - Introduced base design tokens for themes in _base-tokens.scss, and created theme-specific tokens for ClickStack and HyperDX. - Updated app.scss to use the new theme tokens for consistent styling across the application.

- Simplified button styles in DBDashboardPage by removing redundant props. - Removed the 'color' prop from the Slider component in DBServiceMapPage for consistency. - Updated ThemeWrapper to utilize the app theme for MantineProvider, enhancing theme management. - Added comprehensive brand and neutral color palettes in _tokens.scss for both dark and light modes. - Refactored Logo components in ClickStack and HyperDX themes to remove unnecessary size props, standardizing their implementation.

- Adjusted primary button background and text colors to use new SCSS token values. - Modified hover state colors for primary buttons to enhance visual consistency across the theme.

…yperDX themes - Renamed primary button background and hover variables for clarity. - Consolidated button style definitions to utilize base variables for improved maintainability. - Ensured consistent button styling across both Clickstack and HyperDX themes.

- Removed unused default font variable import for cleaner code. - Updated font selection logic to only override the default font if a user preference is explicitly set, improving clarity and maintainability.

changeset-bot · 2026-01-16T19:26:11Z

⚠️ No Changeset found

Latest commit: 15dab75

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

vercel · 2026-01-16T19:26:12Z

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

Project	Deployment	Review	Updated (UTC)
hyperdx-v2-oss-app	Ready	Preview, Comment	Jan 19, 2026 0:51am

claude · 2026-01-16T19:27:16Z

PR Review: Multi-Theme System

Critical Issues

❌ Type safety issue in ThemeProvider.tsx:128-131 → Add proper type definitions for window object pollution

Currently uses (window as any).__setTheme which bypasses TypeScript safety
Should extend Window interface in a .d.ts file or use safer pattern

⚠️ Missing window check in UserPreferencesModal.tsx:190 → Theme switching will reload page, could lose user state

setTheme calls window.location.reload() which loses any unsaved work
Consider showing confirmation modal or using state-based theme switching without reload

⚠️ Inconsistent theme state management → Two sources of truth for theme changes

ThemeProvider.tsx has useState + useEffect pattern (lines 46-70)
index.ts has imperative reload pattern (line 67)
Risk: theme changes via setDevTheme() will reload but changes in useEffect won't

Code Quality Issues

🔍 Duplicate localStorage logic → DRY violation between ThemeProvider.tsx and index.ts

Both files read from localStorage and check URL params (lines 54-70 in ThemeProvider, lines 30-53 in index.ts)
Extract to shared utility function

⚠️ Console logging in production code → ThemeProvider.tsx:120 and index.ts:61

console.info and console.warn should use proper logging utility or be dev-only
Use eslint-disable comments if intentional

Questions/Suggestions

💡 Consider server-side theme detection via environment variable for production builds to avoid flash of wrong theme
💡 The keyboard shortcut (Ctrl+Shift+T) conflicts with common browser "reopen closed tab" - consider different combo

Summary: No blockers, but fix type safety issue and consider UX impact of page reloads before merge. The architecture is solid overall.

github-actions · 2026-01-16T19:31:41Z

E2E Test Results

✅ All tests passed • 60 passed • 4 skipped • 760s

Status	Count
✅ Passed	60
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	4

Tests ran across 4 shards in parallel.

View full report →

- Added custom CSS variables for the Tabs component to enhance styling capabilities. - Improved theme customization by allowing dynamic color adjustments for the Tabs root element.

elizabetdev added 10 commits January 15, 2026 13:20

fix: update AppNav styles to use brand color scheme

74b4011

- Changed the class name for the search link in AppNav from 'text-success' to 'text-brand' to align with the new branding guidelines.

Merge branch 'main' into add-themes

d0ee1b5

chore: Add fallback comment for base design tokens in SCSS file

fa2efc9

fix: Update button styles in Clickstack theme

c6e41ca

- Adjusted primary button background and text colors to use new SCSS token values. - Modified hover state colors for primary buttons to enhance visual consistency across the theme.

refactor: Simplify font selection logic in MyApp component

811dba1

- Removed unused default font variable import for cleaner code. - Updated font selection logic to only override the default font if a user preference is explicitly set, improving clarity and maintainability.

vercel bot deployed to Preview January 16, 2026 19:27 View deployment

feat: Extend Tabs component in Clickstack theme with custom variables

15dab75

- Added custom CSS variables for the Tabs component to enhance styling capabilities. - Improved theme customization by allowing dynamic color adjustments for the Tabs root element.

vercel bot deployed to Preview January 19, 2026 12:51 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add multi-theme system #1618

feat: Add multi-theme system #1618

Uh oh!

elizabetdev commented Jan 16, 2026

Uh oh!

changeset-bot bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

claude bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: Add multi-theme system #1618

Are you sure you want to change the base?

feat: Add multi-theme system #1618

Uh oh!

Conversation

elizabetdev commented Jan 16, 2026

Uh oh!

changeset-bot bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: Multi-Theme System

Critical Issues

Code Quality Issues

Questions/Suggestions

Uh oh!

github-actions bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Test Results

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Jan 16, 2026 •

edited

Loading

vercel bot commented Jan 16, 2026 •

edited

Loading

claude bot commented Jan 16, 2026 •

edited

Loading

github-actions bot commented Jan 16, 2026 •

edited

Loading