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 yourInfo.plist:
<key>UIAppFonts</key>
<array>
<string>YourCustomFont-Bold.otf</string>
<string>YourCustomFont-Regular.otf</string>
<string>YourCustomFont-Light.otf</string>
</array>
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
)
Navigation Bar Appearance
#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