Customizing the Theme
Relevant source files
The following files were used as context for generating this wiki page:
The PCSTYLE UI library provides a robust dual-theme system that allows for switching between an aggressive "Cyber" aesthetic and a clean, modern "Minimal" aesthetic. Theme customization is achieved through a combination of color palettes, design tokens, and a React context provider that synchronizes theme state with CSS variables and component-level logic.
Theme Architecture
The theme system is built on three core pillars: a central color palette, a set of design tokens for structural consistency, and a global provider to manage state. The system propagates theme changes by updating CSS variables on the document root and applying conditional styles within individual components.
The diagram above shows how theme data flows from the static definitions in colors.ts through the UIProvider to both the DOM and React component tree. Sources: src/provider/index.tsx:31-43, src/theme/colors.ts:5-40
Theme Modes
The system supports two primary modes defined by the ThemeMode type:
- Cyber: Characterized by neon pink (
#ff00ff) and cyan (#00ffff) accents against a black background, emphasizing a high-contrast, "aggressive" cyberpunk look. - Minimal: Utilizes a white background with grayscale accents for a professional, modern appearance.
Sources: src/theme/colors.ts:5-42
Design Tokens and Palettes
Color Definitions
Colors are organized into two distinct palettes within the colors object. Each palette shares a common set of keys to ensure compatibility across the theme system.
| Key | Cyber Value | Minimal Value |
|---|---|---|
background | #000000 | #ffffff |
foreground | #ffffff | #0a0a0a |
primary | #ff00ff (Neon Pink) | #0a0a0a |
secondary | #00ffff (Cyan) | #666666 |
border | rgba(255, 0, 255, 0.2) | #e5e5e5 |
surface | rgba(0, 0, 0, 0.95) | #ffffff |
glow | rgba(255, 0, 255, 0.4) | rgba(0, 0, 0, 0.05) |
Sources: src/theme/colors.ts:5-40
Structural Tokens
While colors change between themes, the structural "skeleton" of the UI is defined in tokens.ts. These values provide consistency in typography, spacing, and timing.
- Typography: Defines standard font families (Mono for code/technical feel, Sans for UI) and font weights ranging from 400 to 900.
- Radii: Defines border-radius values. Note that many Cyber components override these to use
noneorsmfor a sharper look. - Transitions: Standardizes timing (fast: 150ms, normal: 300ms, slow: 500ms) using a
cubic-bezier(0.4, 0, 0.2, 1)easing.
Sources: src/theme/tokens.ts:5-64
Theme Implementation and Provider
The UIProvider component manages the active ThemeMode. It performs two critical synchronization tasks whenever the theme changes:
- CSS Variables: It iterates through the
colorsobject and sets CSS variables on the document root (e.g.,--pc-primary). - Data Attribute: It sets a
data-pc-themeattribute on the<html>element for global CSS targeting.
This sequence illustrates the synchronization process triggered by a theme toggle. Sources: src/provider/index.tsx:21-43
Component-Level Customization
Components consume the theme via the useUI hook and apply conditional styles. This allows for more granular control than simple CSS variables, such as changing hover shadows or animation scales based on the active theme.
Button Component Implementation
The Button component demonstrates the complexity of theme-specific styling, using different hover effects and border treatments for each mode.
// Example of conditional styling in Button.tsx
const cyberStyles = {
primary: "bg-[#ff00ff] text-black font-black hover:shadow-[0_0_20px_#ff00ffaa]",
outline: "bg-transparent text-[#ff00ff] border border-[#ff00ff]/40",
};
const minimalStyles = {
primary: "bg-black text-white hover:bg-zinc-800",
outline: "bg-transparent text-black border border-zinc-200",
};
Sources: src/components/buttons/Button.tsx:35-50
Component Style Comparison
| Component | Cyber Characteristics | Minimal Characteristics |
|---|---|---|
| Card | Black/80 background, pink border/glow, glass effects | White background, zinc borders, rounded corners (lg/xl) |
| Input | Monospace font, pink text/placeholder, glow on focus | Sans font, black text, zinc border, subtle shadow |
| Badge | Uppercase, tracking-widest, neon shadow effects | Rounded-full, zinc or black backgrounds |
Sources: src/components/layout/Card.tsx:23-34, src/components/forms/Input.tsx:16-24, src/components/feedback/Badge.tsx:21-31
Conclusion
Customizing the theme in PCSTYLE UI involves modifying the centralized colors.ts and tokens.ts files. The system's architecture ensures that these changes propagate through the UIProvider to all components, maintaining a consistent visual language while providing the flexibility to implement unique, theme-specific behaviors in individual UI elements.