Introducing ‘Themeable’: A SwiftUI Theming Demo App

SwiftUI makes it easier than ever to build beautiful and responsive apps. Yet, managing dynamic and scalable themes consistently across your entire application can still be challenging. To address this common developer pain point, I’ve created Themeable, a SwiftUI demonstration app designed to showcase a clean, maintainable, and scalable theming architecture.

In this post, I’ll introduce Themeable, explain why it matters, and walk you through its features and practical implementation.

Why a Theming Demo App?

When developing apps, we often need the flexibility to switch themes dynamically, support dark and light modes seamlessly, and enable customization without scattering theme logic throughout our codebase. Themeable provides a structured solution to these challenges, demonstrating best practices and clean architecture that simplify theming in SwiftUI.

Core Features of Themeable

1. Dynamic Theme Switching

Easily switch between multiple predefined themes at runtime with smooth animations.

2. JSON-Based Theme Customization

Themes are defined in structured JSON files, enabling easy customization and scalability without touching SwiftUI code. Themeable’s JSON structure closely follows guidelines suggested by Material Design 3 (M3), particularly adhering to the color schemes recommended on M3’s Choosing a Scheme page. This ensures consistency, accessibility, and aesthetic appeal aligned with modern design standards.

3. Adaptive UI

Themeable automatically adapts themes according to device color schemes, supporting both dark and light modes out of the box.

4. Persistent Preferences

User-selected themes persist across app sessions, ensuring a consistent user experience.

5. Structured Theming Architecture

Clear separation of concerns with defined protocols and a theme manager, promoting maintainability and scalability.

Visual Demonstration

Here’s how Themeable looks in action:

This quick demonstration highlights how smoothly users can switch themes and how immediately UI elements reflect these changes.

Practical Implementation

Here’s how you can quickly integrate Themeable into your own SwiftUI projects:

Step 1: Clone and Set Up

git clone https://github.com/cashoefman/Themeable.git
cd Themeable
open Themeable.xcodeproj

Step 2: Customize or Define New Themes

Themes are defined using simple JSON structures. Here’s an example:

{
  "id": "custom.theme.id",
  "displayName": "Custom Theme",
  "lightColors": {
    "primary": "#6750A4",
    "onPrimary": "#FFFFFF",
    "background": "#FFFBFF",
    "onBackground": "#1C1B1F"
  },
  "darkColors": {
    "primary": "#D0BCFF",
    "onPrimary": "#381E72",
    "background": "#1C1B1F",
    "onBackground": "#E6E0E6"
  }
}

Simply modify or add new JSON entries to adjust your themes effortlessly.

Step 3: Enjoy Seamless Integration

Your themes automatically adapt to the user’s system settings for dark or light modes. Themeable handles all the heavy lifting, ensuring your app always looks great.

Best Practices and Scalability

Themeable not only provides a practical solution but also illustrates best practices for theming:

• Centralized theme definitions
• Clear protocols for maintainability
• Minimal dependency on UI code

This design approach ensures that your theming infrastructure scales effortlessly as your app grows.

Comparing Themeable to Other Solutions

Unlike many ad-hoc theming solutions, Themeable leverages JSON for theme configuration and clearly defined protocols for maintaining theme consistency, making it a superior choice for large-scale or complex applications.

Get Involved

I welcome contributions, feedback, and suggestions from the SwiftUI community. Whether you have ideas for new themes, improvements to the architecture, or insights into enhancing Themeable further, please consider contributing via the GitHub repository.

Conclusion

Special thanks to Simon for his insightful Medium article that originally inspired me to build this app.

Themeable provides a comprehensive, easy-to-use theming architecture designed specifically for SwiftUI apps. Whether you’re a seasoned developer or just getting started with theming, Themeable can significantly streamline your workflow and improve your app’s user experience.

Start exploring Themeable today and bring effortless, powerful theming capabilities to your SwiftUI apps!