How to Customize the User Interface of Palmier Pro: Complete AppTheme Guide

You customize Palmier Pro’s interface by editing constants in AppTheme.swift, which centrally defines all colors, spacing, fonts, and shadows consumed by SwiftUI views throughout the application.

Palmier Pro provides a centralized design system that makes UI customization straightforward. By modifying the AppTheme structure in the palmier-io/palmier-pro repository, you can globally adjust the appearance of buttons, sidebars, toolbars, and panels without hunting through individual view files. This guide covers the exact source files and code patterns needed to customize the user interface of Palmier Pro effectively.

Understanding the AppTheme Architecture

Palmier Pro’s UI is built entirely on a centralized design system called AppTheme. All visual properties—including colors, spacing values, font sizes, corner radii, shadows, and animation durations—are defined in Sources/PalmierPro/UI/AppTheme.swift and referenced throughout the SwiftUI views and AppKit-based components.

The hierarchy organizes constants into nested enums for discoverability:

• AppTheme.Background – surface colors, raised backgrounds, overlay colors
• AppTheme.Text – primary and secondary text colors
• AppTheme.Accent – interactive accent colors and track colors
• AppTheme.Spacing – padding and gap constants (sm, md, lg)
• AppTheme.Radius – corner radius values for rounded corners
• AppTheme.FontSize – typography scale for titles, body, and captions
• AppTheme.Shadow – elevation shadows applied via the View.shadow(_:) extension

Step-by-Step Customization Workflow

Follow this three-phase process to modify the user interface while maintaining design consistency.

1. Modify AppTheme.swift Constants

Open Sources/PalmierPro/UI/AppTheme.swift and locate the section you want to tweak. To introduce a new brand accent color, add a static constant to the appropriate enum:

// In AppTheme.swift
enum Accent {
    static let brand = Color(red: 0.2, green: 0.6, blue: 0.9)
    static let sidebarHover = Color(red: 0.3, green: 0.5, blue: 0.8).opacity(0.2)
    // ... existing entries ...
}

2. Update Existing UI Components

Reference the new constant in views that require the updated styling. In Sources/PalmierPro/Toolbar/ToolbarView.swift, apply the brand color to a button:

// In ToolbarView.swift
Button(action: { /* action */ }) {
    Image(systemName: "star.circle")
        .font(.system(size: AppTheme.FontSize.md))
        .foregroundStyle(AppTheme.Accent.brand)
}
.tint(AppTheme.Accent.brand)

3. Create New Components Using AppTheme

When building custom views, import the theme and apply the hoverHighlight() view modifier for consistent interaction feedback:

struct CustomHeader: View {
    var title: String
    
    var body: some View {
        HStack {
            Text(title)
                .font(.system(size: AppTheme.FontSize.title1, weight: .bold))
                .foregroundStyle(AppTheme.Text.primaryColor)
                .padding(AppTheme.Spacing.md)
        }
        .background(AppTheme.Background.raisedColor)
        .shadow(AppTheme.Shadow.sm)
        .hoverHighlight(cornerRadius: AppTheme.Radius.sm)
    }
}

Practical Code Examples

Changing the Sidebar Highlight Color

Update the hover state in sidebar rows by modifying AppTheme.Accent and applying it in SidebarRowButton.swift:

// In AppTheme.swift
enum Accent {
    static let sidebarHover = Color(red: 0.3, green: 0.5, blue: 0.8).opacity(0.2)
}

// In SidebarRowButton.swift
.hoverHighlight(
    cornerRadius: AppTheme.Radius.sm,
    highlightColor: AppTheme.Accent.sidebarHover,
    isActive: isSelected
)

Adding a Custom Brand Button to the Toolbar

Extend ToolbarView.swift with a button that uses your new accent color:

private func brandButton() -> some View {
    Button(action: { print("Brand action") }) {
        Image(systemName: "star.circle")
            .font(.system(size: AppTheme.FontSize.md))
            .foregroundStyle(AppTheme.Accent.brand)
            .frame(width: 24, height: 24)
            .hoverHighlight()
    }
    .buttonStyle(.plain)
    .help("Brand Action")
}

Creating a Reusable Card View

Build a container component that adheres to the design system:

struct CardView<Content: View>: View {
    let content: Content
    
    var body: some View {
        content
            .padding(AppTheme.Spacing.lg)
            .background(AppTheme.Background.surfaceColor)
            .cornerRadius(AppTheme.Radius.md)
            .shadow(AppTheme.Shadow.md)
    }
}

Key Source Files for UI Customization

These files contain the implementation details necessary for customizing the user interface of Palmier Pro:

• Sources/PalmierPro/UI/AppTheme.swift – Central design system containing all color, spacing, font, radius, and shadow definitions.
• Sources/PalmierPro/UI/SidebarRowButton.swift – Reference implementation showing how sidebar components consume AppTheme values for layout and hover highlights.
• Sources/PalmierPro/Toolbar/ToolbarView.swift – Main toolbar implementation demonstrating theme constants applied to buttons, sliders, and icons.
• Sources/PalmierPro/UI/GeneratingOverlay.swift – Example of gradient and shadow usage from AppTheme in overlay panels.
• Sources/PalmierPro/Utilities/Constants.swift – Miscellaneous global constants used across the UI layer.

Summary

• Centralized theming occurs in AppTheme.swift, which acts as the single source of truth for all visual constants.
• Color customization involves editing nested enums like AppTheme.Accent and AppTheme.Background, then referencing them in SwiftUI views.
• Component updates require modifying files like ToolbarView.swift and SidebarRowButton.swift to apply new theme values.
• Consistency is maintained by using the hoverHighlight() modifier and AppTheme spacing constants when creating new UI elements.
• No hardcoded values should exist in custom views; always reference AppTheme to ensure future updates propagate correctly.

Frequently Asked Questions

Where are the color definitions stored in Palmier Pro?

All color definitions are stored in Sources/PalmierPro/UI/AppTheme.swift within nested enums such as AppTheme.Background, AppTheme.Text, and AppTheme.Accent. These static constants are referenced by SwiftUI views throughout the application rather than hardcoding color values inline.

How do I add a custom hover effect to sidebar items?

Use the hoverHighlight(cornerRadius:highlightColor:isActive:) view modifier available in the codebase. Import AppTheme, specify the corner radius from AppTheme.Radius, and provide a custom color from AppTheme.Accent for the highlight state, as implemented in SidebarRowButton.swift.

Can I modify the toolbar button sizes?

Yes. Toolbar buttons in Sources/PalmierPro/Toolbar/ToolbarView.swift use AppTheme.FontSize for icon sizing and AppTheme.Spacing for layout gaps. Modify these constants in AppTheme.swift or apply explicit frames using AppTheme values to adjust button dimensions.

What is the best way to create a new UI component that matches the existing design?

Create a new SwiftUI struct that imports and uses AppTheme constants for all styling—colors from AppTheme.Background or AppTheme.Text, padding from AppTheme.Spacing, corner radius from AppTheme.Radius, and shadows from AppTheme.Shadow. Apply the .hoverHighlight() modifier for interactive elements to ensure visual consistency with existing components.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}