A modern, token-driven design system framework for SwiftUI
Easily create consistent, themeable user interfaces with full customization power — powered by a scalable design token system and environment-based styling.

SwiftThemeKit.com

SwiftUI offers flexibility, but theming across an entire app is hard to scale. SwiftThemeKit solves this by:

• 🔄 Applying themes globally using @Environment
• 🧱 Using design tokens (color, spacing, typography, shape, etc.)
• 🔧 Letting you override just what you need—no subclassing or brittle modifiers
• 🧪 Supporting previewing themes and snapshot testing

• 🎨 Complete light & dark theming system with token override support
• 🧩 Drop-in UI components: Button, TextField, Checkbox, Card, RadioGroup, etc.
• 💡 Declarative .applyTheme*Style() modifiers for composability
• ♿️ Built with accessibility and contrast in mind
• 🔌 Plug-and-play: just add ThemeProvider and you're ready

1. Wrap your root view with ThemeProvider:

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ThemeProvider {
                ContentView()
            }
        }
    }
}

1. Use themed components:

struct ContentView: View {
    @State private var isEnabled = false
    @State private var username = ""

    var body: some View {
        VStack {
            Button("Primary Button") { }
                .applyThemeButtonStyle()

            Checkbox(isChecked: $isEnabled, label: "Enable Feature")

            TextField("Username", text: $username)
                .applyThemeTextFieldStyle()
        }
    }
}

SwiftThemeKit uses a modular token-based system:

• primary, secondary, error, background, surface
• On-color variants: onPrimary, onError, etc.

• Display, headline, body, label, button fonts
• Font sizes, weights, line spacing

• Spacing: xs, sm, md, lg, xl, xxl
• Radius: corner tokens (sm, md, lg)
• Shadow elevations: level1, level2, none

• Variants: .filled, .tonal, .outlined, .elevated, .text
• Role support (e.g., .destructive uses error color tokens)

• TextField: outlined, filled, underlined
• Checkbox, RadioButton, RadioGroup

• Customizable padding, elevation, background
• Shadow and shape tokens applied via environment

You can create your own themes using token structs:

let customTheme = Theme(
    colors: .customColors,
    typography: .customTypography,
    spacing: .customSpacing,
    shapes: .customShapes
)

Or override parts of the environment:

MyView()
    .font(.headlineMedium)
    .padding(.xl)
    .clipShape(.rounded)

Use Swift Package Manager and select the latest release:

dependencies: [
  .package(url: "https://github.com/Charlyk/swift-theme-kit.git", from: "<latest_version>")
]

Click to view full-size previews from snapshot tests:

• Typography
• Buttons
• Cards
• Checkboxes

• Prefer .applyTheme*Style() over custom modifiers
• Use semantic tokens (e.g., themeColor.primary) instead of raw colors
• Override per-view styles using View.theme*() modifiers
• Preview multiple themes using SwiftUI ForEach

• iOS 14+, macOS 11+, tvOS 15+, watchOS 7+
• Swift 5.5+

We welcome issues and PRs!
Check the CONTRIBUTING.md for setup and guidelines.

MIT. See LICENSE for details.

swift, swiftui, design-system, ui-kit, dark-mode, theme, component-library, design-token, sdk