Theme Customization

vly.ai provides comprehensive theme customization options, allowing you to create unique designs that match your brand or vision. The theme system uses modern CSS variables and supports both predefined and custom color schemes.

Color System

Color Categories

Accent Colors Primary brand colors for highlights, links, and interactive elements

Base Colors Background colors, surfaces, and foundational design elements

Border & Input Colors Form elements, dividers, and interactive component borders

Card Colors Content containers, panels, and elevated surfaces

Chart Colors Data visualization and graphical elements

Destructive Colors Error states, warnings, and critical actions

Muted Colors Secondary text, subtle backgrounds, and disabled states

Popover Colors Tooltips, dropdowns, and overlay content

Primary Colors Main brand colors and primary call-to-action elements

Secondary Colors Supporting brand colors and secondary actions

Sidebar Colors Navigation panels and menu backgrounds

Color Selection Methods

Method 1: Predefined Schemes Choose between accent or primary color schemes:

Select Accent for vibrant, attention-grabbing designs
Select Primary for professional, brand-focused designs

Method 2: Custom Colors Define exact colors using:

Hex codes (e.g., #3B82F6, #EF4444)
RGB values (e.g., rgb(59, 130, 246))
OKLCH format for advanced color control

Color Implementation

Colors are implemented using CSS variables in OKLCH format for better color accuracy and consistency:

:root {
  --primary: 220 100% 50%;
  --primary-foreground: 0 0% 100%;
  --accent: 210 40% 98%;
  --accent-foreground: 222 84% 5%;
  /* ... other color variables */
}

Typography System

Font Family Options

Sans-Serif Fonts

system-ui: Native system fonts for optimal performance
Inter: Clean, modern sans-serif for interfaces
Helvetica Neue: Classic, professional appearance
Arial: Universal compatibility and readability

Serif Fonts

Georgia: Elegant serif for traditional designs
Times New Roman: Classic serif for formal content
Playfair Display: Decorative serif for headings
Merriweather: Readable serif for body text

Monospace Fonts

Menlo: Developer-friendly monospaced font
Monaco: Clean monospace for code displays
Consolas: Windows-native monospace option
Source Code Pro: Open-source coding font

Typography Controls

Letter Spacing Adjust character spacing for better readability:

Tight: -0.025em for condensed text
Normal: 0em for standard spacing
Wide: 0.025em for expanded text
Wider: 0.05em for dramatic spacing

Font Weight System Consistent weight scale across all fonts:

Light: 300
Regular: 400
Medium: 500
Semibold: 600
Bold: 700

Theme Application

Applying Color Changes

Access theme settings through the project settings panel
Select color category to customize (Primary, Accent, etc.)
Choose method: Predefined scheme or custom color
Preview changes in real-time
Apply to project once satisfied with the result

Typography Updates

Navigate to typography settings
Select font category (Sans-serif, Serif, Monospace)
Choose from available fonts
Adjust letter spacing if desired
Preview changes across different components
Save configuration

Component Integration

Semantic Color Usage

Components automatically use semantic color variables:

/* Buttons use primary colors */
.button-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Cards use card colors */
.card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

/* Text uses foreground colors */
.text-primary {
  color: hsl(var(--foreground));
}

Consistent Application

Theme changes propagate automatically to:

All UI components (buttons, forms, cards)
Typography elements (headings, body text, links)
Interactive states (hover, focus, active)
Status indicators (success, error, warning)

Custom Theme Creation

Creating Brand-Specific Themes

Step 1: Define Brand Colors

Primary Brand Color: #2563EB (Blue)
Secondary Color: #10B981 (Green)
Accent Color: #F59E0B (Amber)

Step 2: Request Theme Implementation

"Update the theme to use #2563EB as the primary color, #10B981 for success states, and #F59E0B for accent elements. Use Inter font for headings and system-ui for body text."

Step 3: Fine-tune Components

"Adjust the button hover states to be 10% darker than the primary color and increase the border radius to 8px throughout the interface"

Advanced Customization

Dark Mode Support Theme system automatically generates dark mode variants:

Automatic color adjustments for better contrast
Preserved brand colors while improving readability
System preference detection for automatic switching

Responsive Typography Font sizes adjust automatically across screen sizes:

Mobile: Optimized for smaller screens
Tablet: Balanced sizing for medium screens
Desktop: Full typography scale for large displays

Best Practices

Color Selection

Test accessibility with sufficient contrast ratios
Consider brand guidelines when choosing colors
Use semantic naming for custom color variables
Preview on different backgrounds before finalizing

Typography Choices

Limit font families to 2-3 maximum per project
Ensure web font loading doesn't impact performance
Test readability across different screen sizes
Consider load times for custom font files

Consistency

Apply changes systematically across all components
Document color decisions for team reference
Test theme changes in both light and dark modes
Validate accessibility after theme updates

The theme customization system provides the flexibility to create unique designs while maintaining consistency and accessibility across your entire application.

Theme Customization

On this page