Dark Mode | PraisonAIUI Docs

Health Endpoints Guide
PraisonAIUI
Testing
Api
CLI API Reference
Component API Reference
Features REST API Reference
Health API Reference
Python SDK API
Sessions API Reference
API Testing Guide
TypeScript SDK Reference
Concepts
Architecture: AG-UI Protocol vs Gateway Integration
YAML Configuration
Providers
Slots & Components
Templates & Layouts
Examples
Advanced Examples
Basic Examples
Features
A2UI canvas — agent-driven UI
Agent UI host — modular dashboard shell
Chat Attachments
Backend Integration Contract
Browser Automation
Channel-to-Chat Bridge
Code Execution
Feature Comparison: PraisonAIUI vs OpenClaw
Config Hot-Reload
Content Sources
How the UI Looks Are Built
Dark Mode
Dashboard
Deployment Guide
Device Pairing
What Makes PraisonAIUI Different
Feature Inventory
Gap Analysis — Validated Against praisonai SDK
Gateway Chat
Hot Reload
How to Add a Feature to PraisonAIUI
Internationalization (i18n)
Image Preview in Chat
AIUI Integration — Critical Review & Architecture Analysis
Knowledge Embedding Model Configuration
Plugin Marketplace
Media Analysis
Message Elements
Model Fallback
Navigation
PraisonAI package integration
Protocol Architecture Reference
Protocol Versioning
Feature Protocols
Progressive Web App (PWA)
SEO
Session Management
Standalone vs Integrated
AIUI Standardization — Verification Report
Steps / Chain-of-Thought
UI Styles
Subagent Tree View
Theme System
Theming
Text-to-Speech (TTS)
Video Studio
Widget Zones
Getting Started
CLI Reference
Deploy to GitHub Pages
Installation
Quick Start
Protocols
Application Design Protocol (ADP) — Research Report
Application Design Protocol (ADP)
PraisonAIUI → ADP Field Mapping
ADP Implementation Status
Application Design Protocol (ADP) — Normative Specification
ADP Validation Rules
Typescript
Components
TypeScript SDK Overview
Next.js Adapter
Runtime

Dark ModeEnable and customize dark mode for your site.ConfigurationEnable dark mode in your configuration:How It WorksWhen darkMode: true, the runtime:1. Checks user's system preference (prefers-color-scheme)2. Adds a toggle button to the Header component3. Persists user preference in localStorage4. Applies data-theme="dark" to the HTML elementCSS VariablesOverride dark mode colors in your CSS:Manual ControlControl dark mode via the TypeScript SDK:Automatic DetectionThe runtime automatically detects system preference: