Member-only story
ThemeManager in Jetpack Compose: Inspired by Mantine
Jetpack Compose has revolutionized how we build Android UIs by making it declarative and intuitive. One of the most powerful features of Compose is the ability to define and manage themes. In the previous article, we explored how to create a ThemeData system in Jetpack Compose to provide per-component theming and customizations.
Now, we’re taking it a step further by introducing a ThemeManager. Inspired by Mantine, a React-based UI framework, our ThemeManager will enable dynamic theme switching and centralized theme control in Compose apps.
A Quick Note About This Article
While the idea for this article is mine, I used AI assistance to refine the code and structure. This approach allowed me to focus on sharing the concept clearly while generating code snippets more efficiently. If you’re here for inspiration or a starting point for your project, feel free to build on the ideas shared below!
Why ThemeManager?
The ThemeData system we built earlier is great for defining component-specific themes. However, managing multiple themes and dynamically switching between them across an app requires an additional layer of abstraction.
Enter ThemeManager:
• Dynamic Theme Switching: Switch themes in real-time, e.g., light, dark, or custom themes.
• Global Theme Management: Ensure consistency while allowing flexibility for specific components.
• Seamless Integration: Built directly into the ThemeData structure.
Step 1: Expanding ThemeData
We’ll use the same ThemeData structure from the previous article but enhance it with dynamic capabilities. For example:
data class ThemeData(
val colors: Colors,
val typography: Typography,
val shapes: Shapes,
val buttonTheme: ButtonTheme,
val textFieldTheme: TextFieldTheme,
// Add themes for other components
)Step 2: Building the ThemeManager
The ThemeManager will hold the current ThemeData and provide methods to switch between multiple themes.
class ThemeManager(initialTheme…
