Color System
Relevant source files
The following files were used as context for generating this wiki page:
The Color System in the PCSTYLE UI library is a dual-theme architecture designed to support high-contrast, "cyberpunk" aesthetics alongside clean, "minimal" designs. It utilizes a centralized theme definition that integrates with React context and CSS variables to provide dynamic theme switching and consistent visual application across all components.
The system is primarily defined by the colors object and the ThemeMode type, which facilitates the transition between cyber and minimal modes. This ensures that every UI element—from buttons to input fields—automatically adapts its palette based on the active theme.
Sources: src/theme/colors.ts:5-40, package.json:5-5
Architecture and Theme Modes
The Color System is built upon two distinct color palettes defined as constants. Each palette contains a standardized set of keys that map to specific hexadecimal or RGBA color values.
Theme Definitions
| Key | Cyber Mode (Neon/Dark) | Minimal Mode (Clean/Light) |
|---|---|---|
background | #000000 | #ffffff |
foreground | #ffffff | #0a0a0a |
primary | #ff00ff (Neon Pink) | #0a0a0a |
secondary | #00ffff (Cyan) | #666666 |
accent | #ff00ff | #000000 |
muted | #111111 | #f5f5f5 |
border | rgba(255, 0, 255, 0.2) | #e5e5e5 |
surface | rgba(0, 0, 0, 0.95) | #ffffff |
success | #00ff00 | #10b981 |
error | #ff0000 | #ef4444 |
Sources: src/theme/colors.ts:7-38
Theme Distribution Logic
The UIProvider manages the global state of the color system. It synchronizes the JavaScript theme state with the DOM by injecting CSS variables into the document root.
The diagram shows the flow of color data from the UIProvider state to both CSS variables and React component context.
Sources: src/provider/index.tsx:21-46
Implementation in Components
Components consume the color system via the useUI hook. Implementation typically involves conditional logic to select between theme-specific style objects.
Dynamic Styling Pattern
Components like Button and Badge define separate style objects for cyber and minimal themes, applying them based on the current theme mode.
// Example from Badge.tsx
const cyberStyles = {
primary: "bg-[#ff00ff] text-black shadow-[0_0_10px_#ff00ff55]",
outline: "bg-transparent border border-[#ff00ff]/40 text-[#ff00ff]",
};
const minimalStyles = {
primary: "bg-black text-white rounded-full",
outline: "bg-transparent border border-zinc-200 text-zinc-600 rounded-full",
};
Sources: src/components/feedback/Badge.tsx:18-30, src/components/buttons/Button.tsx:35-50
CSS Variable Synchronization
The UIProvider iterates through the current theme's color keys and maps them to the --pc- prefix. This allows non-React styles or complex effects to access the color system via standard CSS.
useEffect(() => {
const root = document.documentElement;
const currentColors = colors[theme];
Object.entries(currentColors).forEach(([key, value]) => {
root.style.setProperty(`--pc-${key}`, value);
});
root.setAttribute("data-pc-theme", theme);
}, [theme]);
Sources: src/provider/index.tsx:34-44
Functional Effects and Overlays
The color system extends beyond static styles to interactive and visual effects, such as the NeuralCursor and CRTOverlay.
- Neural Cursor: Uses theme-specific colors (e.g.,
#ff00fffor cyber) to render a trailing mouse effect. - CRT Overlay: Only renders in
cybermode, applying scanline gradients and vignettes derived from the black and primary color values.
Sources: src/effects/neural-cursor.tsx:21-25, src/effects/crt-overlay.tsx:10-20
Design Tokens Integration
While colors define the palette, the tokens system provides the structure for how those colors are applied in terms of spacing, typography, and transitions.
| Token Group | Values |
|---|---|
| Typography | Mono (JetBrains Mono), Sans (Inter) |
| Font Weights | Normal (400), Bold (700), Black (900) |
| Letter Spacing | Widest (0.4em) - used heavily in Cyber mode |
| Transitions | Fast (150ms), Normal (300ms), Slow (500ms) |
Sources: src/theme/tokens.ts:6-60
Conclusion
The PCSTYLE Color System provides a robust framework for multi-theme application. By combining a centralized JavaScript definition with CSS variable injection and React Context, the system ensures that complex visual styles (like cyberpunk glowing borders) and modern minimal styles (like rounded zinc-colored badges) can coexist and switch seamlessly within the same application environment.