Skip to main content

Theming

MCP Gatekeeper features a fully customizable theme system with light and dark modes.

Available Themes​

Light Theme​

  • Clean, modern interface
  • High contrast for readability
  • Professional appearance
  • Suitable for bright environments

Dark Theme​

  • Neon green cyberpunk aesthetic
  • Reduced eye strain in low light
  • Matrix-inspired terminal vibes
  • Green accents throughout

Switching Themes​

Click the sun/moon icon in the sidebar header to toggle between themes.

Theme preference is automatically saved in localStorage and persists across sessions.

Theme Features​

Consistent Styling​

All components adapt to the selected theme:

  • Navigation sidebar
  • Cards and panels
  • Charts and graphs
  • Tables and lists
  • Buttons and inputs
  • Terminal viewer

Accessibility​

Both themes are designed with accessibility in mind:

  • WCAG AA contrast ratios
  • Clear visual hierarchy
  • Readable fonts
  • Proper color semantics

Technical Details​

Implementation: Material-UI (MUI) theme system File: apps/frontend/src/theme/theme.ts Storage: localStorage key theme-mode

Customization​

To customize themes, edit the theme configuration file:

// apps/frontend/src/theme/theme.ts
export const getTheme = (mode: 'light' | 'dark') => {
  // Customize colors, typography, spacing
};

Then rebuild the frontend.