​
Basic Theme Configuration

SuggestKitView()
    .suggestKitTheme(
        primaryColor: .blue,
        backgroundColor: .systemBackground,
        textColor: .label,
        cornerRadius: 12
    )

​
Advanced Theme Customization

let customTheme = SuggestKitTheme(
    // Colors
    primaryColor: Color(hex: "#007AFF"),
    secondaryColor: Color(hex: "#34C759"),
    backgroundColor: Color(hex: "#F2F2F7"),
    cardBackground: Color.white,
    textColor: Color(hex: "#1C1C1E"),
    secondaryTextColor: Color(hex: "#8E8E93"),
    errorColor: Color(hex: "#FF3B30"),
    successColor: Color(hex: "#34C759"),
    
    // Typography
    titleFont: .custom("YourCustomFont-Bold", size: 18),
    bodyFont: .custom("YourCustomFont-Regular", size: 16),
    captionFont: .custom("YourCustomFont-Light", size: 14),
    
    // Spacing & Layout
    cornerRadius: 16,
    cardSpacing: 12,
    contentPadding: 16,
    
    // Shadows & Effects
    shadowColor: Color.black.opacity(0.1),
    shadowRadius: 8,
    shadowOffset: CGSize(width: 0, height: 2)
)

SuggestKitView()
    .suggestKitTheme(customTheme)

​
Color Customization

​
Using System Colors

SuggestKitView()
    .suggestKitTheme(
        primaryColor: .systemBlue,
        backgroundColor: .systemBackground,
        textColor: .label,
        cardBackground: .secondarySystemBackground
    )

​
Using Hex Colors

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

SuggestKitView()
    .suggestKitTheme(
        primaryColor: Color(hex: "#007AFF"),
        backgroundColor: Color(hex: "#F2F2F7")
    )

​
Dark Mode Support

let lightTheme = SuggestKitTheme(
    primaryColor: Color(hex: "#007AFF"),
    backgroundColor: Color(hex: "#F2F2F7"),
    textColor: Color(hex: "#1C1C1E"),
    cardBackground: Color.white
)

let darkTheme = SuggestKitTheme(
    primaryColor: Color(hex: "#0A84FF"),
    backgroundColor: Color(hex: "#1C1C1E"),
    textColor: Color(hex: "#FFFFFF"),
    cardBackground: Color(hex: "#2C2C2E")
)

SuggestKitView()
    .suggestKitTheme(
        light: lightTheme,
        dark: darkTheme
    )

​
Button Styling

let primaryButtonStyle = SuggestKitButtonStyle(
    backgroundColor: Color.blue,
    foregroundColor: Color.white,
    cornerRadius: 8,
    padding: EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 24),
    font: .headline,
    shadowRadius: 2
)

let secondaryButtonStyle = SuggestKitButtonStyle(
    backgroundColor: Color.clear,
    foregroundColor: Color.blue,
    cornerRadius: 8,
    padding: EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 24),
    font: .body,
    borderColor: Color.blue,
    borderWidth: 1
)

SuggestKitView()
    .suggestKitButtonStyle(.primary, primaryButtonStyle)
    .suggestKitButtonStyle(.secondary, secondaryButtonStyle)

​
Input Field Styling

SuggestKitView()
    .textFieldStyle(
        backgroundColor: Color.gray.opacity(0.1),
        borderColor: Color.blue,
        borderWidth: 1,
        cornerRadius: 8,
        padding: 12,
        font: .body,
        placeholderColor: Color.gray
    )

​
Suggestion Card Styling

let cardStyle = SuggestKitCardStyle(
    backgroundColor: Color.white,
    borderColor: Color.gray.opacity(0.2),
    borderWidth: 1,
    cornerRadius: 12,
    shadowColor: Color.black.opacity(0.05),
    shadowRadius: 4,
    shadowOffset: CGSize(width: 0, height: 2),
    padding: 16
)

SuggestKitView()
    .cardStyle(cardStyle)

​
Vote Button Styling

SuggestKitView()
    .voteButtonStyle(
        unselected: VoteButtonStyle(
            backgroundColor: Color.clear,
            foregroundColor: Color.gray,
            borderColor: Color.gray.opacity(0.3),
            icon: "heart"
        ),
        selected: VoteButtonStyle(
            backgroundColor: Color.red.opacity(0.1),
            foregroundColor: Color.red,
            borderColor: Color.red,
            icon: "heart.fill"
        )
    )

​
Custom Typography

Register custom fonts in your Info.plist: 
<key>UIAppFonts</key>
<array>
    <string>YourCustomFont-Bold.otf</string>
    <string>YourCustomFont-Regular.otf</string>
    <string>YourCustomFont-Light.otf</string>
</array>
Then use them in your theme: 
let typography = SuggestKitTypography(
    largeTitle: Font.custom("YourFont-Bold", size: 22),
    title: Font.custom("YourFont-Semibold", size: 18),
    headline: Font.custom("YourFont-Medium", size: 16),
    body: Font.custom("YourFont-Regular", size: 16),
    caption: Font.custom("YourFont-Light", size: 14)
)

SuggestKitView()
    .typography(typography)

​
Custom Spacing

let spacing = SuggestKitSpacing(
    tiny: 4,
    small: 8,
    medium: 16,
    large: 24,
    extraLarge: 32
)

SuggestKitView()
    .spacing(spacing)

​
Layout Configuration

SuggestKitView()
    .layout(
        showHeader: true,
        showCategories: true,
        showSearch: true,
        compactMode: false,
        maxSuggestions: 50,
        suggestionsPerPage: 20
    )

​
Custom Animations

SuggestKitView()
    .animations(
        cardAppear: .easeInOut(duration: 0.3),
        voteButton: .spring(response: 0.4, dampingFraction: 0.8),
        statusChange: .easeInOut(duration: 0.5),
        pageTransition: .slide
    )

#if os(iOS)
SuggestKitView()
    .navigationBarAppearance(
        backgroundColor: UIColor.systemBackground,
        titleColor: UIColor.label,
        tintColor: UIColor.systemBlue,
        shadowColor: UIColor.clear
    )
    .statusBarStyle(.darkContent)
#endif

​
Accessibility Customization

SuggestKitView()
    .accessibility(
        // Voice Over labels
        submitButtonLabel: "Submit your feedback",
        voteButtonLabel: "Vote for this suggestion",
        searchFieldLabel: "Search suggestions",
        
        // Font scaling
        dynamicType: true,
        minimumScaleFactor: 0.8,
        maximumScaleFactor: 2.0,
        
        // Contrast
        highContrastMode: true,
        reduceMotion: true
    )

​
Custom Components

​
Custom Suggestion Card

struct CustomSuggestionCard: View {
    let suggestion: Suggestion
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack {
                VStack(alignment: .leading, spacing: 4) {
                    Text(suggestion.title)
                        .font(.headline)
                        .foregroundColor(.primary)
                    
                    Text(suggestion.description)
                        .font(.body)
                        .foregroundColor(.secondary)
                        .lineLimit(3)
                }
                
                Spacer()
                
                StatusBadge(status: suggestion.status)
            }
            
            HStack {
                CustomVoteButton(suggestion: suggestion)
                
                Spacer()
                
                Text(suggestion.createdAt.formatted(.relative(presentation: .named)))
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
        }
        .padding()
        .background(Color(.systemBackground))
        .cornerRadius(12)
        .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
    }
}

// Use custom card
SuggestKitView()
    .customCard { suggestion in
        CustomSuggestionCard(suggestion: suggestion)
    }

​
Custom Vote Button

struct CustomVoteButton: View {
    @ObservedObject var suggestion: Suggestion
    
    var body: some View {
        Button(action: {
            Task {
                await suggestion.toggleVote()
            }
        }) {
            HStack(spacing: 6) {
                Image(systemName: suggestion.hasVoted ? "heart.fill" : "heart")
                    .foregroundColor(suggestion.hasVoted ? .red : .gray)
                
                Text("\(suggestion.voteCount)")
                    .foregroundColor(.primary)
                    .font(.caption.weight(.medium))
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 6)
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .fill(suggestion.hasVoted ? Color.red.opacity(0.1) : Color.gray.opacity(0.1))
            )
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(suggestion.hasVoted ? Color.red : Color.gray.opacity(0.3), lineWidth: 1)
            )
        }
        .disabled(suggestion.isLoading)
        .scaleEffect(suggestion.isLoading ? 0.95 : 1.0)
        .animation(.easeInOut(duration: 0.2), value: suggestion.isLoading)
    }
}

​
Testing Customizations

Create previews to test your customizations: 
struct CustomSuggestKitView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            // Light mode
            SuggestKitView()
                .suggestKitTheme(yourCustomTheme)
                .previewDisplayName("Light Mode")
            
            // Dark mode
            SuggestKitView()
                .suggestKitTheme(yourCustomTheme)
                .preferredColorScheme(.dark)
                .previewDisplayName("Dark Mode")
            
            // Accessibility - Large Text
            SuggestKitView()
                .suggestKitTheme(yourCustomTheme)
                .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
                .previewDisplayName("Large Text")
            
            // Compact mode
            SuggestKitView()
                .suggestKitTheme(yourCustomTheme)
                .layout(compactMode: true)
                .previewDisplayName("Compact Mode")
        }
    }
}

​
Platform-Specific Styling

​
iOS-Specific

#if os(iOS)
SuggestKitView()
    .navigationBarTitleDisplayMode(.large)
    .toolbarBackground(.visible, for: .navigationBar)
    .toolbarColorScheme(.dark, for: .navigationBar)
#endif

​
iPad-Specific

SuggestKitView()
    .suggestKitLayout(
        iPad: .sidebar, // Show sidebar on iPad
        iPhone: .stack  // Stack layout on iPhone
    )

​
Next Steps

📊 Advanced Features

Offline support, analytics, and more

🧪 Testing

Test your integration