Theme System Showcase
Demonstrating the comprehensive theming system with dynamic colors, dark/light mode, and consistent styling.
Theme System
CSS Variables:
The platform uses CSS custom properties for consistent theming across
components.
Features
Dark/Light mode support
Consistent color palette
Trading-specific styles
Component Examples
Portfolio Value
$15,247.83
📊
+2.4%
Day P&L
+$342.15
💰
+2.3%
Open Positions
7
📈
3 profitable
Buying Power
$8,752.17
🎯
Available
Button Styles
Form Elements
Status Indicators
Active Connection
Error State
Connecting
Color Palette
Primary Colors
Semantic Colors
Accent Color
Trading Colors
Animations
Success Animation
Subtle pulse effect
Danger Animation
Alert pulse effect
Fade In Animation
Smooth appearance
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Regular paragraph text with good contrast and readability.
Secondary text with reduced opacity for less important information.
Tertiary text for fine print and metadata.
Implementation Guide
Using the Theme System
The Actuate theme system provides:
- Automatic system preference detection - Respects user's OS theme setting
- Manual theme control - Users can override with light/dark/system preferences
- Dynamic color schemes - 5 predefined color palettes that work in both modes
- Persistent preferences - Settings saved in localStorage
- CSS custom properties - Consistent theming across all components
Key Components
ThemeToggle- Simple light/dark mode toggle buttonThemeSelector- Full theme and color selection (compact or panel mode)themeStore- Svelte store for theme state management
CSS Classes
.card- Standard card styling with theme support.btn-primary,.btn-secondary,.btn-ghost- Themed button styles.input- Form input styling with focus states.price-up,.price-down,.price-neutral- Trading-specific colors