fix: Dark mode is not working correctly on the Quality Metrics page

[gulshank0]

Which problem is this PR solving?

• Resolves [Bug]: Dark mode is not working correctly on the Quality Metrics page #3566

Description of the changes

The Quality Metrics page CSS files used hardcoded color values like => (#fafafa, #ddd, rgba(0,0,0,) that don't adapt when the theme switches to dark mode. The project uses CSS custom properties (design tokens) defined in vars.css with [data-theme='dark'] overrides, but the Quality Metrics components weren't using them.

• In dark mode :

• In Light mode :

How was this change tested?

• npm test
• npm run build
• npm run lint

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/main/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully: make lint test

AI Usage in this PR (choose one)

See AI Usage Policy.

• None: No AI tools were used in creating this PR
• Light: AI provided minor assistance (formatting, simple suggestions)
• Moderate: AI helped with code generation or debugging specific parts
• Heavy: AI generated most or all of the code changes

[Copilot]

Pull request overview

Updates the Quality Metrics page styling to be theme-aware by replacing hardcoded light-theme colors/shadows with existing CSS custom properties (design tokens) so the page renders correctly in dark mode.

Changes:

• Apply themed surface + text colors to the Quality Metrics page container.
• Replace hardcoded borders and shadows in header/cards with --border-* and --shadow-sm tokens.
• Align Quality Metrics component styles with the shared token system in vars.css.

Reviewed changes

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

Show a summary per file

File	Description
packages/jaeger-ui/src/components/QualityMetrics/index.css	Sets themed background and base text color for the Quality Metrics page.
packages/jaeger-ui/src/components/QualityMetrics/Header.css	Switches header background/border/shadow to design tokens for dark-mode compatibility.
packages/jaeger-ui/src/components/QualityMetrics/MetricCard.css	Replaces card borders and shadows with tokenized values.
packages/jaeger-ui/src/components/QualityMetrics/ScoreCard.css	Tokenizes title header border and shadow.
packages/jaeger-ui/src/components/QualityMetrics/CountCard.css	Tokenizes title header border and shadow.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.16%. Comparing base (72014ef) to head (b0a9d8f).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3583   +/-   ##
=======================================
  Coverage   89.16%   89.16%           
=======================================
  Files         303      303           
  Lines        9712     9712           
  Branches     2556     2588   +32     
=======================================
  Hits         8660     8660           
+ Misses       1049     1048    -1     
- Partials        3        4    +1     

☔ 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.