[FEATURE][UI]: Add dark mode toggle to admin UI #26
Description
🧭 Type of Feature
- Enhancement to existing functionality
- New feature or capability
- New MCP-compliant server
- New component or integration
- Developer tooling or test improvement
- Packaging, automation and deployment
- Other (please describe below)
🧭 Epic
Title: Add dark mode theme to the Admin UI
Goal: Allow users to toggle between light and dark themes in the web dashboard
Why now: Many developers and operators prefer dark mode for accessibility, contrast, or aesthetic reasons. Tailwind supports dark themes out-of-the-box, and the UI is already built with Tailwind and Alpine.js, making this a low-friction addition.
🙋♂️ User Story 1
As a: user of the Admin UI
I want: to toggle between light and dark themes
So that: I can reduce eye strain or match my system preference
✅ Acceptance Criteria
Scenario: Toggle dark mode in the header
Given I open the Admin UI
When I click the "🌙" or "☀️" toggle icon
Then the entire UI switches between light and dark themes🙋♂️ User Story 2
As a: frontend contributor
I want: to use Tailwind’s dark: variant and store user preference
So that: I can apply consistent dark-mode styling and remember it across reloads
✅ Acceptance Criteria
Scenario: Persist dark mode preference
Given I enable dark mode once
When I reload the Admin UI
Then the theme should remain in dark mode📐 Design Sketch
Use Tailwind's built-in dark: variants.
Example toggle logic (Alpine.js):
<button x-on:click="darkMode = !darkMode" x-text="darkMode ? '☀️' : '🌙'"></button>Apply dark class to the <html> or <body> tag conditionally:
<html x-data="{ darkMode: false }" x-bind:class="darkMode ? 'dark' : ''">Store the preference in localStorage and hydrate on page load.
🔗 MCP Standards Check
- No impact on MCP API or protocol
- Purely frontend presentation layer
- If deviations exist, please describe them below:
🔄 Alternatives Considered
- Force dark mode via system
prefers-color-scheme(not user-controlled) - Maintain two separate CSS themes (more complexity)
📓 Additional Context
- The UI uses Tailwind CSS with HTMX and Alpine.js — all compatible with dark mode
- Tailwind supports
dark:variants natively: https://tailwindcss.com/docs/dark-mode - You can test via dev tools:
document.documentElement.classList.toggle('dark') - Bonus points for saving preference in
localStorageand syncing with system theme
This is a perfect entry point for contributors interested in CSS, Tailwind, and minimal JS logic.