主题套件

Requirements

Installation

Swift Package Manager. In Xcode: File ▸ Add Package Dependencies… and enter the repository URL, or add it to your Package.swift:

dependencies: [
    .package(url: "https://github.com/isamercan/ThemeKit.git", from: "0.3.0"),
],
targets: [
    .target(
        name: "MyApp",
        dependencies: [
            .product(name: "ThemeKit", package: "ThemeKit"),
            // Optional — only if you need Lottie-backed animations:
            // .product(name: "ThemeKitLottie", package: "ThemeKit"),
        ]
    ),
]

Quick start

Install the theme once at the root, then build with token-bound views:

@main
struct MyApp: App {
    init() { Theme.shared.applyPersistedConfig() }   // restore last-used theme (optional)
    var body: some Scene {
        WindowGroup {
            ContentView().themeKit()            // inject + repaint on theme change
        }
    }
}

struct ContentView: View {
    @ThemeContext private var theme
    var body: some View {
        VStack(spacing: theme.spacing(.md)) {
            Text("Welcome").textStyle(.headingBase)
            PrimaryButton("Get started") { await signIn() }
        }
        .padding(theme.spacing(.base))
        .background(theme.background(.bgElevatorPrimary))
        .cornerRadius(.base)
        .themeShadow(.elevated)
    }
}

Theme.shared.loadTheme(named: "oceanTheme")          // runtime switch

Screenshots

The demo app on device — the component catalog, live theming, the design-token gallery, and a full booking flow built entirely from ThemeKit components.

Component catalog	Live theming · 33 presets	Design-token gallery	Theme Generator
Button · variants	DataTable · sort/paginate	Example · search	Example · detail

Real screens from the bundled Demo app, not mockups — every pixel is a ThemeKit component reading live design tokens.

Demo

Demo/ — a SwiftUI app (local package reference) with Components (gallery), Themes (the ThemePicker + a live preview), Colors (token gallery + live Theme Configurator), Type, Layout (spacing / radius / shadow tokens), and Example (a full flow built from the real components), plus a light/dark switcher.

Theming your app (Configurator export)

The library ships a runtime token generator (ThemeGenerator, a Swift port of tools/gen_tokens.py): from a handful of inputs it regenerates the whole palette, neutral ramp, surfaces, borders, text, and radius / spacing / font / shadow ramps — on device, no Python and no baked palette files.

The Demo's Theme Configurator (Colors tab) lets you dial in an accent color + tint + scale knobs + font + dark and exports a ThemeConfig recipe. To apply one:

// a) one-liner (paste the configurator's "Apply (Swift)" export)
Theme.shared.applyGenerated(primaryHex: "ff0d87", tint: 0.13, radiusScale: 1.0, font: "Montserrat")

// b) ship the Codable recipe as a resource (the configurator's `theme.json`)
let cfg = try ThemeConfig(jsonData: Data(contentsOf: themeJSONURL))
Theme.shared.apply(cfg)
Theme.shared.persistConfig()                            // remember across launches

// c) generator-free: bundle the pre-baked token JSON ("Copy full token JSON")
Theme.shared.setTheme(jsonData: Data(contentsOf: tokensURL))

ThemeConfig is Codable / Sendable / Equatable — persist it, sync it, A/B it.

Components

135 token-bound components, grouped by complexity:

- Atoms (34) — Badge, Chip, Avatar, Icon, Rating, Spinner, StatusDot, ProgressBar, PriceTag, PointsBadge, CountdownTimer, QRCode, Barcode… - Molecules (51) — TextInput, OTPInput, Select, Checkbox, RangeSlider, SearchBar, TimeField, GuestSelector, PriceHistogram, InstallmentSelector, CurrencyPicker, buttons… - Organisms (50) — Card, Carousel, DataTable, Accordion, Timeline, NavigationBar, Sidebar, FlightCard, FareSummary, ReviewCard, LoyaltyCard, SeatMap, LocationCard…

Every component is curated by category in the DocC catalog.

Component gallery

Rendered straight from the library via ImageRenderer (plain <img> so they render everywhere, including the GitHub mobile app) — regenerate with make screenshots. Interactive overlays (Dialog, Drawer, Tour, BottomSheet…) and media components are best seen live in the Demo app.