Theme Selection

Themes control the overall look and feel of your project. Choose from pre-built themes or create your own custom design system.

Available Themes

Weldship includes several pre-built themes:

  • Default - Clean, modern design with neutral colors
  • Dark - Dark background with light text
  • Minimal - Stripped-down, content-focused design
  • Vibrant - Bold colors and dynamic gradients
  • Corporate - Professional look for business applications
  • Creative - Artistic design with unique typography
  • Elegant - Sophisticated design with refined details
  • Playful - Fun, colorful design for casual applications

Selecting a Theme

You can select a theme at different stages:

  • Project creation - Choose a theme when starting a new project
  • In the builder - Change themes through project settings
  • Via prompt - Ask the AI to apply a different theme

Theme Switching

Switching themes doesn't affect your content or layout - only the visual styling changes. Feel free to experiment!

What Themes Control

Each theme defines:

  • Color Palette - Primary, secondary, accent, and neutral colors
  • Typography - Font families, sizes, and line heights
  • Spacing - Padding, margins, and gaps
  • Border Radius - Corner rounding on elements
  • Shadows - Drop shadows and elevation effects
  • Component Styles - Button, card, input appearances

Customizing Themes

Customize any theme to match your brand:

Colors

Adjust the color palette:

  • Primary - Main brand color for CTAs and highlights
  • Secondary - Supporting color for secondary elements
  • Accent - Attention-grabbing color for special elements
  • Background - Page and section backgrounds
  • Foreground - Text and icon colors

Typography

Customize fonts and text styles:

  • Heading Font - Font for titles and headers
  • Body Font - Font for paragraphs and content
  • Code Font - Monospace font for code blocks

Dark Mode Support

All themes support dark mode:

  • Automatic dark/light switching based on system preference
  • Manual toggle for user control
  • Optimized colors for each mode

Automatic Contrast

Dark mode automatically adjusts text and background colors to maintain readability and accessibility standards.

Using AI for Theming

You can also customize themes through prompts:

  • "Use a blue and white color scheme"
  • "Apply a dark theme with purple accents"
  • "Make it look more modern and minimalist"
  • "Use rounded corners and soft shadows"

Next Steps

PreviousURL ImportsNextVoice Input