# Theme Settings Powerlily's theme system gives you complete control over your brand's visual identity. Customize colors, fonts, spacing, effects, and more to create a unique experience for your customers. ## Why Theme Customization Matters Your proposals and public pages are often the first impression potential customers have of your business. A professional, branded appearance: - **Builds Trust** - Polished design shows attention to detail - **Increases Conversions** - Consistent branding improves recognition - **Stands Out** - Differentiate from competitors using generic templates - **Reflects Your Brand** - Match your existing marketing materials ## Theme Editor Overview Access theme settings from your company settings page. The theme editor features: - **Live Preview** - See changes instantly before saving - **Tabbed Interface** - Organize settings by category - **Pre-configured Themes** - Start with professional templates - **Per-Quote Themes** - Apply different themes to individual quotes ## Pre-configured Themes Start with one of these professional themes and customize as needed: ### Powerlily Light (Default) Warm, welcoming light theme with orange accents - Best for: Residential solar companies - Feel: Friendly, approachable, professional ### Powerlily Dark Modern dark theme with vibrant chart colors - Best for: Tech-forward companies, commercial solar - Feel: Sleek, modern, high-tech ### Lightmode Clean, minimal light theme with blue accents - Best for: Corporate, professional services - Feel: Clean, trustworthy, corporate ### Darkmode GitHub-inspired dark theme - Best for: Developer-focused, technical audiences - Feel: Technical, sophisticated, modern ### Seasonal Themes Winter, Spring, Summer, Autumn - themed color palettes - Best for: Marketing campaigns, seasonal promotions - Feel: Seasonal, festive, dynamic ## Theme Customization Categories ### General Settings **Background Colour** - Main page background color - Affects: Entire page backdrop - Tips: Use subtle colors, avoid pure white (#ffffff) for reduced eye strain **Card Colour** - Background color for content cards - Affects: Proposal sections, information panels - Tips: Should contrast with background, typically lighter or darker **Text Colour** - Default text color throughout - Affects: Headings, paragraphs, labels - Tips: Ensure high contrast ratio (4.5:1 minimum) for readability **Border Colour** - Color for card borders and dividers - Affects: Card outlines, separators - Tips: Subtle colors work best, 10-20% darker/lighter than card color **Border Radius** - Roundness of corners (0-30px) - Affects: Cards, buttons, images - Tips: 0px = square, 5-10px = modern, 15-20px = friendly, 25+px = very rounded ### Navigation Bar **Primary Colour** - Navigation bar background - Affects: Top navigation area - Tips: Use your brand's primary color **Nav Text** - Navigation link color (default state) - Affects: Navigation text - Tips: Ensure good contrast with primary colour **Nav Text Hover** - Navigation link color on hover - Affects: Interactive feedback - Tips: Use accent color or lighter/darker shade ### Buttons **Secondary Colour** - Primary button background - Affects: Call-to-action buttons, "Get Quote" buttons - Tips: Use high-contrast, attention-grabbing color **Tertiary Colour** - Button text color - Affects: Text on buttons - Tips: Must contrast strongly with secondary colour **Button Hover** - Button background on hover - Affects: Hover state feedback - Tips: Slightly lighter or darker than secondary colour **Button Hover Text** - Button text color on hover - Affects: Hover state text **Button Radius** - Button corner roundness (0-30px) - Affects: All buttons - Tips: Match or complement border radius ### Charts & Data Visualization **Production Colour** - Solar energy production in charts - Affects: Production bars, chart lines - Tips: Use green, orange, or yellow - positive, energy-related colors **Consumption Colour** - Energy consumption in charts - Affects: Consumption bars, usage graphs - Tips: Contrast with production (often gray, blue, or red) **Credit Colour** - Net metering credit display - Affects: Credit amounts, surplus energy - Tips: Often cyan, teal, or green **Purchase Colour** - Energy purchased from utility - Affects: Grid purchase amounts - Tips: Often red, orange, or gray ### Visual Effects **Box Shadow** - Shadow color for cards - Affects: Card depth and elevation - Tips: Use semi-transparent grays (#cccccc for light, #000000 for dark) **Horizontal Offset** - Shadow horizontal position (-20 to 20px) - Affects: Shadow direction - Tips: Positive = right, negative = left, 0 = centered **Vertical Offset** - Shadow vertical position (-20 to 20px) - Affects: Shadow direction - Tips: Positive = down, negative = up, 2-6px is typical **Blur Radius** - Shadow softness (0-30px) - Affects: Shadow edge hardness - Tips: 5-15px for soft shadows, 0-3px for sharp shadows **Ribbon** - Accent ribbon color - Affects: "Recommended" tags, special callouts - Tips: Use your accent/highlight color ### Sidebar (If Applicable) **Sidebar Colour** - Sidebar background - Affects: Side navigation panel **Sidebar Text** - Sidebar text/icon color - Affects: Navigation items **Sidebar Hover** - Sidebar hover state - Affects: Interactive feedback ### Tooltips **Tooltip Colour** - Tooltip background - Affects: Hover tooltips, help text **Tooltip Text** - Tooltip text color - Affects: Text inside tooltips ### Additional Elements **Scrollbar Colour** - Custom scrollbar color - Affects: Page scrollbars - Tips: Match your accent color ## Typography ### Font Options Choose from professional web fonts: - **Quicksand** (Default) - Rounded, friendly, modern - **Roboto** - Clean, neutral, highly readable - **Montserrat** - Geometric, modern, professional - **Lato** - Warm, humanist, versatile - **Open Sans** - Neutral, friendly, accessible - **Oswald** - Bold, condensed, impactful - **Slabo 27px** - Serif, traditional, elegant - **Spectral** - Serif, refined, editorial - **Poppins** - Geometric, clean, contemporary - **Arial** - Universal, safe, standard ### Font Selection Tips **Sans-Serif Fonts** (Quicksand, Roboto, Montserrat, Lato, Open Sans, Poppins) - Best for: Digital displays, modern brands, high readability - Use when: You want a clean, contemporary look **Serif Fonts** (Slabo, Spectral) - Best for: Traditional brands, editorial content, premium feel - Use when: You want to convey established, trustworthy, classic ## Using the Theme Editor ### Live Preview The preview pane shows your changes in real-time across multiple views: **General Tab** - Overall page appearance - Chart previews - Typography samples **Cards Tab** - Content card styles - Border and shadow effects - Spacing and layout **Buttons Tab** - Button states (default, hover) - Various button sizes - Interactive elements **Text Tab** - Typography hierarchy - Heading styles - Paragraph text **Charts Tab** - Energy production charts - Bill comparison graphs - Data visualization **Effects Tab** - Shadow previews - Visual effects - Tooltip styles ### Making Changes 1. **Select a Tab** - Choose the category you want to customize 2. **Adjust Settings** - Use color pickers, sliders, and dropdowns 3. **Preview Updates** - See changes instantly in the preview pane 4. **Save Theme** - Click "Save" to apply changes ### Color Pickers Two ways to select colors: - **Visual Picker** - Click the color square to open palette - **Hex Input** - Type hex codes directly (#ff5733) ### Sliders Use sliders for numerical values: - **Border Radius** - 0-30px - **Button Radius** - 0-30px - **Shadow Offsets** - -20 to 20px - **Blur Radius** - 0-30px ## Per-Quote Themes Apply different themes to individual quotes: 1. Go to quote customization page 2. Select theme from dropdown 3. Choose from your saved themes 4. Quote uses that theme instead of company default **Use Cases:** - Different themes for residential vs. commercial - Seasonal campaign themes - A/B testing different styles - Client-specific branding ## Best Practices ### Color Harmony **Choose Related Colors:** - Use color wheels or tools like Adobe Color - Stick to 3-5 main colors - Maintain consistent color relationships **Contrast is Critical:** - Text must be readable (4.5:1 contrast ratio) - Buttons should stand out from background - Test in different lighting conditions ### Consistency **Match Your Brand:** - Use your existing brand colors - Maintain consistency across materials - Include your logo and colors **Visual Hierarchy:** - Most important elements should stand out - Use color to guide attention - Don't overuse accent colors ### Accessibility **Readable Text:** - Minimum 16px font size for body text - High contrast ratios - Avoid text on busy backgrounds **Color Blindness:** - Don't rely on color alone for information - Test with color blindness simulators - Use patterns or icons in addition to color ### Performance **Optimize for Speed:** - Web fonts load quickly - Solid colors perform better than gradients - Minimal shadows reduce rendering load ## Troubleshooting ### Colors Look Different - Check display calibration - View on multiple devices - Consider sRGB color space ### Text Hard to Read - Increase contrast ratio - Adjust text color - Check font size ### Theme Not Saving - Ensure all required fields filled - Check for validation errors - Try refreshing page ### Preview Not Updating - Wait a moment for changes to apply - Try clicking "Update Preview" - Refresh browser if needed ## Advanced: Custom CSS For additional customization, quotes support custom CSS. Use this for: - Fine-tuning specific elements - Adding animations - Complex layout adjustments - Advanced styling > **Note:** Custom CSS requires web development knowledge and can break layouts if used incorrectly. --- **Next:** Set up your [[Domain Settings]] to use a custom domain for your Powerlily site.