feat: dark theme

[carlosthe19916]

Add Theme selector

Summary by Sourcery

Introduce a configurable application theme with persisted user preference and integrate it into the global layout.

New Features:

• Add a theme selector in the header that lets users choose the application theme mode, persisted via local storage.

Enhancements:

• Wrap the app in a shared ThemeProvider to apply the selected theme across all pages.
• Update monitoring chart label styling to use design-system link tokens for better visual consistency.

Build:

• Add the tsd-ui library as a new UI dependency and include PatternFly charts CSS.

[sourcery-ai]

Reviewer's Guide

Implements a theme system by integrating tsd-ui’s ThemeProvider with persisted theme mode, exposing a ThemeSelector in the header, and updating chart link styling to use theme-aware PatternFly tokens, along with dependency and asset updates.

Sequence diagram for updating theme mode and persisting preference

sequenceDiagram
  actor User
  participant HeaderApp
  participant ThemeSelector
  participant ThemeProvider
  participant useLocalStorage
  participant LocalStorage

  User->>HeaderApp: Open_header
  HeaderApp->>ThemeSelector: Render_theme_selector
  ThemeSelector->>ThemeProvider: setMode(newMode)
  ThemeProvider->>useLocalStorage: updateMode(newMode)
  useLocalStorage->>LocalStorage: setItem(theme-preference, newMode)
  LocalStorage-->>useLocalStorage: confirm_write
  useLocalStorage-->>ThemeProvider: mode_updated
  ThemeProvider-->>HeaderApp: provide_updated_theme
  HeaderApp-->>User: UI_re_rendered_with_new_theme

Loading

Class diagram for updated theming structure with ThemeProvider and ThemeSelector

classDiagram
  class App {
    +string STORAGE_KEY
    +ReactNode children
    +render(): ReactElement
  }

  class ThemeProvider {
    +ThemeMode mode
    +function setMode(mode)
  }

  class useLocalStorage {
    +function useLocalStorage(key, defaultValue)
  }

  class HeaderApp {
    +render(): ReactElement
  }

  class ThemeSelector {
    +render(): ReactElement
  }

  class MonitoringSection {
    +render(): ReactElement
  }

  App --> ThemeProvider : wraps_with
  App --> useLocalStorage : uses
  HeaderApp --> ThemeSelector : renders
  ThemeProvider <.. ThemeSelector : consumes_context
  MonitoringSection --> ThemeProvider : uses_theme_tokens

Loading

File-Level Changes

Change	Details	Files
Wrap the app in a theme provider with persisted theme mode state.	Import ThemeProvider and ThemeMode types from tsd-ui. Introduce STORAGE_KEY constant for theme preference. Use useLocalStorage hook to store and retrieve the current theme mode with a system default. Wrap NotificationsProvider and DefaultLayout tree inside ThemeProvider, passing mode and setMode.	client/src/app/App.tsx
Expose a theme selector control in the global header for both desktop and mobile toolbars.	Add ThemeSelector component inside a ToolbarItem in the main (desktop) toolbar group. Add ThemeSelector component inside a ToolbarItem in the mobile toolbar group so it’s available at smaller breakpoints.	client/src/app/layout/header.tsx
Make chart link labels theme-aware and properly styled as links.	Replace hard-coded blue link color with t_global_text_color_link_default PatternFly token. Apply underline and pointer cursor via ChartLabel style array instead of button/link CSS classes. Remove reliance on specific PatternFly button/link classes for the chart tick label.	client/src/app/pages/home/components/MonitoringSection.tsx
Update dependencies and assets to support theming and UI changes.	Add tsd-ui dependency pointing at v0.1.0 GitHub tag in client/package.json. Include PatternFly charts CSS to ensure themed chart styles are available. Update lockfile and branding SVG asset to align with the new UI and theming (as generated changes).	client/package.json client/src/app/App.tsx package-lock.json branding/images/masthead-logo.svg

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The ThemeSelector is duplicated in both the desktop and mobile ToolbarGroups; consider rendering it once and controlling its visibility via PatternFly breakpoint/visibility props to avoid divergence between the two instances.
• The STORAGE_KEY for theme preference is exported from App.tsx; if it’s intended for reuse in multiple places, consider moving it to a dedicated config/constants module to avoid coupling unrelated components to App.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `ThemeSelector` is duplicated in both the desktop and mobile `ToolbarGroup`s; consider rendering it once and controlling its visibility via PatternFly breakpoint/visibility props to avoid divergence between the two instances.
- The `STORAGE_KEY` for theme preference is exported from `App.tsx`; if it’s intended for reuse in multiple places, consider moving it to a dedicated config/constants module to avoid coupling unrelated components to `App`.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[CryptoRodeo]

LGTM 🚢

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.55%. Comparing base (3c2b3a8) to head (8f0cc47).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1001      +/-   ##
==========================================
+ Coverage   66.92%   68.55%   +1.63%     
==========================================
  Files         222      222              
  Lines        3891     3893       +2     
  Branches      904      904              
==========================================
+ Hits         2604     2669      +65     
+ Misses        946      879      -67     
- Partials      341      345       +4     

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