Implementation:Ucbepic Docetl ThemeContext

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the theme context provider that manages color scheme theming across the DocETL playground.

Description

The ThemeContext module defines a React context for managing application-wide color themes. It supports six themes (default, forest, majestic, sunset, ruby, monochrome), each defined as a complete set of HSL CSS custom property values for backgrounds, foregrounds, cards, popovers, primary/secondary/muted/accent colors, borders, charts, and destructive states. The ThemeProvider component persists the selected theme to localStorage, applies CSS custom properties to the document root on theme change, and initializes from saved preferences on mount.

Usage

Wraps the application at the root level to provide theme context. Individual components use the useTheme hook to read or change the current theme.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/contexts/ThemeContext.tsx
• Lines: 1-214

Signature

export type Theme = "default" | "forest" | "majestic" | "sunset" | "ruby" | "monochrome";

interface ThemeContextType {
  theme: Theme;
  setTheme: (theme: Theme) => void;
}

export const ThemeProvider: React.FC<{ children: React.ReactNode }>
export const useTheme: () => ThemeContextType

Import

import { ThemeProvider, useTheme } from "@/contexts/ThemeContext";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
children	React.ReactNode	Yes	Child components to provide theme context to

Outputs

Name	Type	Description
context	ThemeContextType	Theme value and setter function

Usage Examples

// In _app or layout:
<ThemeProvider>
  <App />
</ThemeProvider>

// In any component:
const { theme, setTheme } = useTheme();
setTheme("forest");

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment