Theme Provider
Relevant source files
The following files were used as context for generating this wiki page:
The Theme Provider is the core state management and styling orchestration layer for the @pcstyle/ui library. It enables dual-theme support—specifically "cyber" and "minimal" modes—by providing a React context that propagates theme state through the component hierarchy. The system synchronizes React state with CSS variables and data attributes to allow for both dynamic runtime switching and static CSS styling.
Sources: package.json:4, src/provider/index.tsx:1-5
Core Architecture
The system utilizes the React Context API to manage the active theme. The UIProvider component wraps the application, holding the theme state and providing utility functions to modify it.
Data Flow and Synchronization
When the theme changes, the provider performs three primary actions:
- React Context Update: Triggers a re-render of all consumer components using the
useUIhook. - CSS Variable Injection: Iterates through the color palette defined for the current theme and maps them to CSS custom properties (e.g.,
--pc-primary) on the document root. - DOM Attribute Mutation: Sets a
data-pc-themeattribute on the<html>element to allow for CSS-level selectors.
The following diagram illustrates the theme update flow:
The provider also wraps children in a container div with class names following the pattern pcstyle-theme-{theme} for targeted scoped styling.
Sources: src/provider/index.tsx:14-46
Theme Definitions
The design system supports two distinct modes defined in the theme configuration.
Theme Modes
| Mode | Description | Visual Characteristics |
|---|---|---|
cyber | Aggressive, high-contrast | Neon pink/cyan accents, black backgrounds, glow effects, scanlines. |
minimal | Clean, modern | Monochrome palette, white/zinc backgrounds, rounded corners, subtle shadows. |
Sources: src/theme/colors.ts:5-40
Design Tokens
Beyond colors, the system utilizes a set of shared tokens for consistency across typography, spacing, and animations.
| Category | Key Tokens | Sources |
|---|---|---|
| Typography | mono, sans font families; weights from 400 to 900. | src/theme/tokens.ts:7-34 |
| Radii | none (0px) to lg (8px). | src/theme/tokens.ts:50-56 |
| Transitions | fast (150ms), normal (300ms), slow (500ms). | src/theme/tokens.ts:57-61 |
Component Integration
Components consume theme data via the useUI hook to determine their visual presentation at runtime.
Logic Implementation
Components typically derive a boolean isCyber to switch between style objects or class names.
Examples of Themed Components
- Buttons: Use
hover:shadow-[0_0_20px_#ff00ffaa]in cyber mode vshover:bg-zinc-800in minimal mode. - Cards: Apply
backdrop-blur-xland neon top-borders in cyber mode, while usingrounded-lgandshadow-smin minimal mode. - Effects: Specialized components like
CRTOverlayandNeuralCursorexplicitly check the theme and returnnullif the mode is not set tocyber.
Sources: src/components/buttons/Button.tsx:34-52, src/components/layout/Card.tsx:21-36, src/effects/crt-overlay.tsx:8-10
API Reference
UIProvider Props
| Property | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The application or component tree to be themed. |
initialTheme | ThemeMode | "cyber" | The theme to use on initial mount. |
useUI Context Value
| Value | Type | Description |
|---|---|---|
theme | ThemeMode | The currently active theme ("cyber" or "minimal"). |
setTheme | (theme: ThemeMode) => void | Function to explicitly set the theme. |
toggleTheme | () => void | Function to switch between the two available themes. |
Sources: src/provider/index.tsx:8-21
Summary
The Theme Provider serves as the backbone of the PCSTYLE design system, bridging the gap between high-level React state and low-level CSS styling. By centralizing theme logic in a single provider and exposing it via a hook, the system ensures that components remain visually consistent and reactive to user preferences while supporting complex visual effects exclusive to the "cyber" aesthetic.