Themes - LuxeUI

How It Works

LuxeUI uses SwiftUI's Environment system to provide global theming. Set a theme once at the root level and it automatically flows down to all LuxeUI components. No prop drilling, no context providers—just pure SwiftUI.

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .luxeTheme(.midnight)  // Apply theme here
        }
    }
}

Built-in Themes

LuxeUI comes with 8 carefully crafted theme presets:

Default

Clean, professional design with indigo accents. Perfect for business apps.

.luxeTheme(.default)

Midnight

Deep purples and magentas. Elegant and mysterious, great for creative apps.

.luxeTheme(.midnight)

Sunset

Warm oranges and reds. Energetic and inviting for lifestyle apps.

.luxeTheme(.sunset)

Ocean

Cool teals and cyans. Calm and focused for productivity apps.

.luxeTheme(.ocean)

Monochrome

Elegant grayscale. Minimal and sophisticated for premium apps.

.luxeTheme(.monochrome)

Forest

Natural greens. Calming and organic, perfect for health apps.

.luxeTheme(.forest)

Neon

Vibrant cyberpunk aesthetic. High contrast and glowing elements.

.luxeTheme(.neon)

Light

Clean and airy. A polished light mode alternative.

.luxeTheme(.light)

Custom Themes

Create your own theme with full control over 20+ design tokens:

let customTheme = Theme(
    // Colors
    primaryColor: Color(red: 0.2, green: 0.6, blue: 1.0),
    secondaryColor: .purple,
    backgroundColor: Color(red: 0.05, green: 0.05, blue: 0.1),
    surfaceColor: Color.white.opacity(0.05),
    textColor: .white,
    textSecondaryColor: Color.white.opacity(0.7),
    
    // Typography
    fontName: "SF Pro Rounded",
    headingWeight: .bold,
    bodyWeight: .regular,
    
    // Spacing
    spacingUnit: 8,
    
    // Corner Radius
    cornerRadiusSmall: 8,
    cornerRadiusMedium: 16,
    cornerRadiusLarge: 24,
    
    // Shadows
    shadowRadius: 20,
    shadowOpacity: 0.3,
    
    // Animation
    animationSpeed: 0.3,
    springDamping: 0.7
)

ContentView()
    .luxeTheme(customTheme)

Design Tokens

Full list of customizable tokens in the Theme struct:

Colors

primaryColor - Main accent color
secondaryColor - Secondary accent
backgroundColor - App background
surfaceColor - Card/surface fill
textColor - Primary text
textSecondaryColor - Muted text

Typography

fontName - Font family name
headingWeight - Heading font weight
bodyWeight - Body font weight

Spacing

spacingUnit - Base spacing unit
spacingXS - 0.5x unit
spacingSM - 1x unit
spacingMD - 2x unit
spacingLG - 3x unit
spacingXL - 4x unit

Border Radius

cornerRadiusSmall - Small elements
cornerRadiusMedium - Cards, buttons
cornerRadiusLarge - Containers

Shadows

shadowRadius - Blur radius
shadowOpacity - Shadow opacity
shadowOffsetY - Vertical offset

Animation

animationSpeed - Duration multiplier
springResponse - Spring response
springDamping - Spring damping

Accessing Theme in Views

Use the environment to access theme values in your custom views:

struct CustomView: View {
    @Environment(\.luxeTheme) private var theme
    
    var body: some View {
        Text("Themed Text")
            .foregroundColor(theme.primaryColor)
            .padding(theme.spacingMD)
            .background(
                RoundedRectangle(cornerRadius: theme.cornerRadiusMedium)
                    .fill(theme.surfaceColor)
            )
    }
}

Dynamic Theme Switching

Switch themes at runtime with smooth transitions:

struct ThemeSwitcherView: View {
    @State private var currentTheme: Theme = .midnight
    
    var body: some View {
        VStack {
            ContentView()
            
            Picker("Theme", selection: $currentTheme) {
                Text("Midnight").tag(Theme.midnight)
                Text("Sunset").tag(Theme.sunset)
                Text("Ocean").tag(Theme.ocean)
            }
        }
        .luxeTheme(currentTheme)
        .animation(.spring(), value: currentTheme)
    }
}