Implementation:TobikoData Sqlmesh Theme Context

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Theming
Last Updated	2026-02-07 20:00 GMT

Overview

React context provider for managing light/dark color scheme preferences with localStorage persistence.

Description

The Theme_Context module implements a React Context for managing the SQLMesh web UI's color scheme (light/dark mode). It provides a ThemeProvider component that wraps the application, useColorScheme hook for accessing theme state, and automatic persistence of user preferences to localStorage. The module respects system preferences on first load and updates the DOM for CSS theming.

Usage

Use this module to implement dark/light mode toggling in the SQLMesh web UI. Wrap your application with ThemeProvider and use the useColorScheme hook to access and toggle the color scheme from any component.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/context/theme.tsx

Signature

export const EnumColorScheme = {
  Light: 'light',
  Dark: 'dark',
} as const

export type ColorScheme = KeyOf<typeof EnumColorScheme>

export interface ThemeMode {
  mode: ColorScheme
  toggleColorScheme?: () => void
}

export default function ThemeProvider({
  children,
}: {
  children: ReactNode
}): JSX.Element

export function useColorScheme(): ThemeMode

Import

import ThemeProvider, { useColorScheme, EnumColorScheme } from '~/context/theme'

I/O Contract

ThemeProvider Props

Name	Type	Required	Description
children	ReactNode	Yes	Child components to wrap with theme context

useColorScheme Returns

Name	Type	Description
mode	ColorScheme	Current color scheme ('light' or 'dark')
toggleColorScheme	function	Function to toggle between light and dark mode

Implementation Details

Initial Theme Detection

On first load, the theme is determined by:

localStorage: Previously saved user preference
System preference: window.matchMedia('(prefers-color-scheme: dark)')
Default: Falls back to light mode

Theme Persistence

Preferences saved to localStorage under 'color-scheme' key
Automatically persists on every theme change
Survives browser sessions and page refreshes

DOM Integration

Sets mode attribute on document.documentElement: <html mode="light">
Enables CSS selectors like [mode="dark"] { ... }
Triggers re-render of all themed components

React Context Pattern

Uses standard React Context API:

ThemeContext: Context object created with createContext
ThemeProvider: Provider component with state management
useColorScheme: Custom hook wrapping useContext

Usage Examples

import React from 'react'
import ThemeProvider, { useColorScheme } from '~/context/theme'

// Wrap your app with ThemeProvider
function App() {
  return (
    <ThemeProvider>
      <MainContent />
    </ThemeProvider>
  )
}

// Use the theme in any component
function ThemeToggle() {
  const { mode, toggleColorScheme } = useColorScheme()

  return (
    <button onClick={toggleColorScheme}>
      {mode === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode'}
    </button>
  )
}

// Access current mode for conditional rendering
function ThemedComponent() {
  const { mode } = useColorScheme()

  return (
    <div className={mode === 'dark' ? 'dark-styles' : 'light-styles'}>
      Content
    </div>
  )
}

CSS Integration

/* Use the mode attribute for theming */
:root {
  --bg-color: white;
  --text-color: black;
}

[mode="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment