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

> Customize Palmier Pro's user interface by editing constants in AppTheme.swift. Control colors, fonts, spacing, and shadows for a personalized SwiftUI app.

- Repository: [Palmier/palmier-pro](https://github.com/palmier-io/palmier-pro)
- Tags: how-to-guide
- Published: 2026-06-22

---

**You customize Palmier Pro’s interface by editing constants in [`AppTheme.swift`](https://github.com/palmier-io/palmier-pro/blob/main/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`](https://github.com/palmier-io/palmier-pro/blob/main/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`](https://github.com/palmier-io/palmier-pro/blob/main/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:

```swift
// 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`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/Toolbar/ToolbarView.swift), apply the brand color to a button:

```swift
// 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:

```swift
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`](https://github.com/palmier-io/palmier-pro/blob/main/SidebarRowButton.swift):

```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`](https://github.com/palmier-io/palmier-pro/blob/main/ToolbarView.swift) with a button that uses your new accent color:

```swift
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:

```swift
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`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/UI/AppTheme.swift)** – Central design system containing all color, spacing, font, radius, and shadow definitions.
- **[`Sources/PalmierPro/UI/SidebarRowButton.swift`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/UI/SidebarRowButton.swift)** – Reference implementation showing how sidebar components consume `AppTheme` values for layout and hover highlights.
- **[`Sources/PalmierPro/Toolbar/ToolbarView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/Toolbar/ToolbarView.swift)** – Main toolbar implementation demonstrating theme constants applied to buttons, sliders, and icons.
- **[`Sources/PalmierPro/UI/GeneratingOverlay.swift`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/UI/GeneratingOverlay.swift)** – Example of gradient and shadow usage from `AppTheme` in overlay panels.
- **[`Sources/PalmierPro/Utilities/Constants.swift`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/Utilities/Constants.swift)** – Miscellaneous global constants used across the UI layer.

## Summary

- **Centralized theming** occurs in [`AppTheme.swift`](https://github.com/palmier-io/palmier-pro/blob/main/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`](https://github.com/palmier-io/palmier-pro/blob/main/ToolbarView.swift) and [`SidebarRowButton.swift`](https://github.com/palmier-io/palmier-pro/blob/main/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`](https://github.com/palmier-io/palmier-pro/blob/main/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`](https://github.com/palmier-io/palmier-pro/blob/main/SidebarRowButton.swift).

### Can I modify the toolbar button sizes?

Yes. Toolbar buttons in [`Sources/PalmierPro/Toolbar/ToolbarView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/Sources/PalmierPro/Toolbar/ToolbarView.swift) use `AppTheme.FontSize` for icon sizing and `AppTheme.Spacing` for layout gaps. Modify these constants in [`AppTheme.swift`](https://github.com/palmier-io/palmier-pro/blob/main/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.