Theming System

Configure light and dark themes for published sites. The theming system provides consistent styling across all viewer components with automatic persistence and CSS variable support.

February 5, 2026

Published NeoArc sites include a full theming system with light and dark modes. The theme affects all viewer components including pages, diagrams, code blocks, and API documentation. User preference persists across sessions.

Theme Modes

User Controls

Readers can toggle the theme using:

Theme Persistence

Theme selection persists in the browser's localStorage:

Color Palette

Each theme defines a complete colour palette for consistent styling across components.

Background Colors

Text Colors

Component Colors

HTTP Method Badge Colors

REST API documentation uses method-specific colours:

Status Code Colors

HTTP status codes are colour-coded:

CSS Custom Properties

Theme colours are exposed as CSS custom properties for custom styling:

/* Example: Using theme variables in custom CSS */
.my-custom-component {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.my-custom-component:hover {
  background-color: var(--hover-bg);
}

ThemeService API

The theme service provides programmatic access for custom components:

import { themeService } from './services/theme';

// Get current mode
const mode = themeService.getCurrentMode(); // 'light' or 'dark'

// Get current color palette
const colors = themeService.getCurrentColors();
console.log(colors.bgPrimary, colors.textPrimary);

// Toggle theme
themeService.toggle();

// Set specific mode
themeService.setMode('dark');

// Subscribe to changes
themeService.subscribe((mode, colors) => {
  console.log('Theme changed to:', mode);
});

Diagram Theme Integration

Embedded diagrams automatically respect the current theme:

WCAG Compliance

Theme colours are designed for WCAG AA contrast compliance: