Skip to content

2324 - Observability dark mode#2325

Merged
crivetimihai merged 1 commit intomainfrom
2324-observability-dark-mode
Jan 24, 2026
Merged

2324 - Observability dark mode#2325
crivetimihai merged 1 commit intomainfrom
2324-observability-dark-mode

Conversation

@gcgoncalves
Copy link
Copy Markdown
Collaborator

@gcgoncalves gcgoncalves commented Jan 22, 2026

🐛 Bug-fix PR

📌 Summary

Implements dark mode on the Observability tab for consistency and better UX.

Screen.Recording.2026-01-22.at.09.17.24.mov

Closes #2324

🔁 Reproduction Steps

  1. Access the Admin UI
  2. Enable Dark Mode
  3. Navigate to the Observability tab
  4. Switch between the different tabs

🐞 Root Cause

The classes, which were mostly regular CSS classes, had no dark mode overrides. The Chart.js was also not configured for switching colours when Dark Mode was enabled.

💡 Fix Description

Replaced the CSS classes with Tailwind utility classes, and added a script to configure chart colours.

🧪 Verification

Check Command Status
Lint suite make lint
Unit tests make test
Coverage ≥ 90 % make coverage
Manual regression no longer fails steps / screenshots

✅ Checklist

  • Code formatted (make black isort pre-commit)
  • No secrets/credentials committed

@gcgoncalves gcgoncalves force-pushed the 2324-observability-dark-mode branch 2 times, most recently from 171059e to ffde820 Compare January 22, 2026 09:33
@gcgoncalves gcgoncalves marked this pull request as ready for review January 22, 2026 11:08
1. Replace custom CSS classes with native tailwind utility classes.
2. Add Chart.js theming for dark-mode graphs

Signed-off-by: Gabriel Costa <gabrielcg@proton.me>
Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
@crivetimihai crivetimihai force-pushed the 2324-observability-dark-mode branch from ffde820 to d33a490 Compare January 24, 2026 19:04
@crivetimihai
Copy link
Copy Markdown
Member

Review & Fixes Applied

I've rebased this PR onto main and applied the following consistency fixes:

1. Added requestAnimationFrame to observability_resources.html

The other observability templates (observability_metrics.html, observability_tools.html, observability_prompts.html) wrap chart creation in requestAnimationFrame() with visibility checks to prevent canvas rendering issues. This was missing from observability_resources.html.

Files affected: observability_resources.html

  • renderResourceUsageChart()
  • renderResourceSlownessChart()
  • renderResourceErrorProneChart()

2. Replaced hardcoded inline styles with Tailwind classes and safe DOM manipulation

The "no errors found" success messages used inline styles with hardcoded colors:

// Before
parent.innerHTML = '<p style="text-align: center; color: #10b981; padding: 2rem;">✓ No errors found...</p>';

// After - uses Tailwind classes and safe DOM manipulation
parent.textContent = '';
const p = document.createElement('p');
p.className = 'text-center text-emerald-500 p-8';
p.textContent = '✓ No errors found...';
parent.appendChild(p);

Files affected:

  • observability_resources.html
  • observability_tools.html
  • observability_prompts.html

Tests

All 5295 tests pass after these changes.

@crivetimihai crivetimihai merged commit 2d8c285 into main Jan 24, 2026
51 of 53 checks passed
@crivetimihai crivetimihai deleted the 2324-observability-dark-mode branch January 24, 2026 19:08
kcostell06 pushed a commit to kcostell06/mcp-context-forge that referenced this pull request Feb 24, 2026
1. Replace custom CSS classes with native tailwind utility classes.
2. Add Chart.js theming for dark-mode graphs

Signed-off-by: Gabriel Costa <gabrielcg@proton.me>
Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: Observability Dark Mode

2 participants