Fix dark theme issues in trace timeline view

[jkowall]

Summary

Fixes visibility issues in the trace timeline view when using dark mode.

Issues Fixed

1. Expand/collapse arrows not visible - The span tree expand/collapse icons were using #000 which was invisible on dark backgrounds
2. Timeline header unreadable - The header row had a light gray background (#ececec) that didn't adapt to dark mode
3. Back button not viewable - The back button used light backgrounds and borders that blended into dark theme
4. Other buttons near top not viewable - Collapse/expand buttons used rgba(0, 0, 0, 0.5) which was invisible in dark mode

Changes Made

Converted hardcoded colors to design tokens from vars.css:

File	Change
SpanTreeOffset.css	Icon color, hover background, indent guide colors
TimelineCollapser.css	Button colors for collapse/expand controls
TimelineHeaderRow.css	Header background and border
TracePageHeader.css	Back button, borders, overview items
CanvasSpanGraph.css	Minimap background
ViewingLayer.css	Graph border and inactive overlay
TickLabels.css	Timeline label colors
Ticks.css	Tick mark background and label colors
Scrubber.css	Scrubber handle and line colors
GraphTicks.css	Tick stroke color

Testing

• All 142 related tests pass
• Manually verified in both light and dark modes

[Copilot]

Pull request overview

This PR fixes dark theme visibility issues in the trace timeline view by replacing hardcoded color values with semantic design tokens from vars.css. This ensures all UI elements properly adapt to both light and dark themes.

Key changes:

• Converted hardcoded hex colors to CSS custom properties (design tokens) across 10 CSS files
• Added theme toggle configuration to the example config file
• Added comprehensive documentation for theme configuration and other common options

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
TimelineHeaderRow.css	Updated header background, border, and text colors to use theme-aware tokens
TimelineCollapser.css	Converted collapse/expand button colors to semantic text tokens
Ticks.css	Updated tick marks and labels to use border and text tokens
SpanTreeOffset.css	Fixed expand/collapse icon colors and hover backgrounds with appropriate tokens
TracePageHeader.css	Updated back button, borders, and overview items to use surface and border tokens
ViewingLayer.css	Converted graph border and inactive overlay to semantic tokens
TickLabels.css	Updated timeline label color to use text-secondary token
Scrubber.css	Converted scrubber handle and line colors to interactive and text tokens
GraphTicks.css	Updated tick stroke color to use border-strong token
CanvasSpanGraph.css	Changed minimap background to use surface-tertiary token
jaeger-ui.config.example.json	Added theme configuration example
README.md	Added comprehensive documentation for theme toggle and other configuration options

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

❌ Patch coverage is 75.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.79%. Comparing base (9c75545) to head (b6b6295).

Files with missing lines	Patch %	Lines
...Page/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx	62.50%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3244      +/-   ##
==========================================
- Coverage   97.83%   97.79%   -0.04%     
==========================================
  Files         261      261              
  Lines        8209     8219      +10     
  Branches     2178     2180       +2     
==========================================
+ Hits         8031     8038       +7     
- Misses        175      178       +3     
  Partials        3        3              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jkowall]

Part of #1911

Post-merge tasks:

• Resolve remaining issues in the diff, monitor, and architecture views.
• Implement Material 3 design across style-specific UI components.

[yurishkuro]

I think this is the wrong direction again. If anything we should be trying to align with AntD theme support, not work against it. A change like this ^ undermines AntD's styling.

The ideal situation would be that we do not override so much in ThemeConfig in ThemeProvider.tsx, but instead:

1. define minimum set in the theme provider where by setting up the Javascript properties we effectively override standard var(--ant-...) variables that are used by all standard AntD components
2. we define our own variables by referencing the corresponding --ant-xxx variables wherever possible
3. we use our own variables in our own components