Theme Composition
Relevant source files
The following files were used as context for generating this wiki page:
Theme Composition in the PCSTYLE UI library is a dual-mode design system architecture that supports "Cyber" (aggressive, cyberpunk-inspired) and "Minimal" (clean, modern) aesthetics. The system is built on a foundation of React Context, CSS variables, and shared design tokens, allowing for dynamic switching between visual identities while maintaining a consistent structural API.
The composition relies on a centralized provider that injects theme state into the component tree, affecting not only colors but also layout styles, typography, and specialized visual effects like scanlines or custom cursor behaviors.
Sources: package.json:1-5, src/theme/colors.ts:5-40, src/provider/index.tsx:20-50
Theme Architecture and State Management
The core of the theme system is the UIProvider, which manages the ThemeMode state. It utilizes React Context to propagate the current theme—either cyber or minimal—to all child components.
UI Context and Provider
The UIProvider performs two primary synchronization tasks:
- CSS Variable Injection: It iterates through the color palette of the active theme and maps them to CSS custom properties (e.g.,
--pc-primary) on the document root. - Root Class Management: It applies a specific class (e.g.,
pcstyle-theme-cyber) and a data attribute (data-pc-theme) to the DOM to allow for global CSS targeting.
Sources: src/provider/index.tsx:7-45
The diagram above illustrates the flow of theme state from the provider to the DOM and individual components.
Design Tokens and Color Palettes
The system separates stylistic values into static design tokens (typography, spacing) and dynamic color palettes.
Color Schemes
The two modes offer distinct visual signatures:
- Cyber: High contrast, utilizing neon pinks (
#ff00ff) and cyans (#00ffff) with dark backgrounds and glow effects. - Minimal: Low contrast, utilizing grayscale values with white backgrounds and clean borders.
| Variable | Cyber Value | Minimal Value |
|---|---|---|
| Background | #000000 | #ffffff |
| Foreground | #ffffff | #0a0a0a |
| Primary | #ff00ff (Neon Pink) | #0a0a0a |
| Glow | rgba(255, 0, 255, 0.4) | rgba(0, 0, 0, 0.05) |
| Border | rgba(255, 0, 255, 0.2) | #e5e5e5 |
Sources: src/theme/colors.ts:7-38
Typography and Spacing Tokens
Global tokens define the structural rhythm of the UI, including a heavy reliance on monospaced fonts for the "Cyber" aesthetic.
- Font Families:
mono("JetBrains Mono") andsans(Inter). - Letter Spacing: Ranges from
tight(-0.02em) towidest(0.4em), often used in buttons and headers. - Transitions: Standardized durations ranging from
fast(150ms) toslow(500ms).
Sources: src/theme/tokens.ts:7-60
Component-Level Theme Implementation
Components consume the theme via the useUI() hook. Logic within each component branches to apply specific styles based on the isCyber flag.
Logic Flow in Components
When a component like Button or Input renders, it determines its appearance through a mapping of its variant prop against the current theme's style object.
Implementation Example: Button
The Button component demonstrates the use of Framer Motion combined with theme-specific logic. In cyber mode, it adds aggressive hover shadows and specialized scaling, whereas minimal mode uses subtle grayscale shifts.
Sources: src/components/buttons/Button.tsx:39-55
Specialized Visual Effects
A unique aspect of the Theme Composition is the inclusion of "Effects" that are conditionally rendered based on the active theme.
CRT Overlay and Neural Cursor
- CRT Overlay: Only renders when the theme is set to
cyber. it applies a fixed-position overlay with scanlines and a vignette effect to simulate a retro-futuristic monitor. - Neural Cursor: A specialized cursor effect that tracks mouse movement with a slight delay and connection lines. It automatically sets its
activeColorbased on the theme (Neon Pink for cyber, Black for minimal).
Sources: src/effects/crt-overlay.tsx:7-20, src/effects/neural-cursor.tsx:23-55
Summary
The Theme Composition system provides a robust framework for building multi-aesthetic interfaces. By combining React Context for state, CSS variables for global styling, and conditional rendering for specialized effects, the architecture ensures that the "Cyber" and "Minimal" modes are deeply integrated rather than just superficial color swaps. This approach allows developers to maintain a single codebase while delivering vastly different visual experiences.