Modularize Design System as Compose Multiplatform UI Library with Dynamic Theming

Description

Refactor and extract the current designsystem into a standalone Compose Multiplatform UI library module, responsible for hosting all reusable UI components, design tokens, and theming logic. This will promote modularity, reusability, and consistent UI behavior across all platforms (Android, Desktop, iOS, Web).

As part of this modularization, introduce a flexible dynamic theming system to support:

  • Light and Dark modes

  • User-selected themes from a defined color palette

  • Runtime theme switching (e.g., through settings or system theme detection)

This module will serve as the single source of truth for design primitives (colors, typography, spacing) and UI components (buttons, cards, text fields, etc.) across all apps and platforms using Compose Multiplatform.


Acceptance Criteria:

  • Create a new :designsystem module as a Compose Multiplatform library

  • Move all UI components and tokens (colors, typography, spacing, shapes) into this module

  • Implement light and dark theme support using Compose theming APIs

  • Add support for user-selectable themes (color palette options)

  • Expose a simple API for consuming apps to toggle and apply themes

  • Add previews and sample usage for each component across themes

  • Update documentation on how to use and contribute to the design system module


📂 Suggested Module Structure:

designsystem/ ├── theme/ │ ├── ColorPalette.kt │ ├── Typography.kt │ ├── Shapes.kt │ └── ThemeProvider.kt ├── components/ │ ├── MifosButton.kt │ ├── MifosCard.kt │ └── MifosTextField.kt └── preview/ └── ThemePreviews.kt

🧰 Tools & Tech:

  • Compose Multiplatform

  • Material 3 APIs (or custom theme system)

  • Kotlin Multiplatform Module setup

  • Local Storage (optional for persisting theme preference)

Activity

Show:

Details

Assignee

Reporter

Priority

More fields

Created February 9, 2025 at 12:57 AM
Updated 4 days ago

Flag notifications