Reference

Reference Component Catalog - Theming and Playground

Component Catalog - Theming and Playground

OtherEvergreenPublic

🎨 Theme Switching

Themes are handled via a React context and Tailwind utility classes. They are persisted via localStorage and affect global styling and Monaco Editor theming.

Available Themes

  • Helium
  • Light
  • Dark

Add a New Theme

  1. Define in ThemeContext.js
  2. Style in Tailwind plugin or global CSS
  3. Update AdvancedThemeSwitcher.jsx with preview + Monaco mapping

🧪 Testing Strategy

We're using Jest and React Testing Library for unit tests.

ThemeContext Test

import { render, screen } from '@testing-library/react';
import { ThemeProvider, useTheme } from './ThemeContext';

function DummyThemeConsumer() {
  const { theme } = useTheme();
  return <span data-testid="theme-value">{theme}</span>;
}

test('ThemeProvider provides default theme', () => {
  render(
    <ThemeProvider>
      <DummyThemeConsumer />
    </ThemeProvider>
  );
  const span = screen.getByTestId('theme-value');
  expect(span.textContent).toBe('theme-helium');
});