Ktheme

ktheme is a Compose Multiplatform library written to provide material design 3 (MD3) based theme, with essential components to configure it.

Functionality

• DynamicTheme support for Android (with Amoled).
• Material Design Color Scheme support for other platforms (You must provide a color seed).
• The theme settings persist over sessions (clientSide).
• Pre-assembled components for configuration.

Kotlin Multiplatform Support Maps

Platform	Support
Android	✅
Desktop	✅
iOSX64/iOSArm64/iosSimulatorArm64	✅
macosX64/macosArm64	✅
js/WasmJs	✅

Configuration

1. Paste this code to your .toml file

[versions]

ktheme = "0.0.3"

[libraries]

ktheme = { module = "com.feraxhp.ktheme:ktheme-compose", version.ref = "ktheme" }

2. Then paste this other code into your build.gradle.kts in kotlin > sourceSets > commonMain.dependencies

implementation(libs.ktheme)

3. Sync Project with Gradle
4. Now you can add DynamicTheme { } anywhere in your project, here is an example on your App.kt

import com.feraxhp.ktheme.DynamicTheme

@Composable
internal fun App() = DynamicTheme { // base color default is: 0X4C662B, to change it call baseColor: Int 
  // Your KMP App content
}

5. Update settings

val dts = LocalThemeSettings.currentOrThrow // Provider

// Access Settings

val seedColor by dts.seedColor.collectAsState()
val secondary by dts.secondary.collectAsState()
val tertiary by dts.tertiary.collectAsState()
val error by dts.error.collectAsState()
val theme by dts.theme.collectAsState()
val useDynamicColor by dts.useDynamicColor.collectAsState()
val useAmoled by dts.useAmoled.collectAsState()
val style by dts.style.collectAsState()
val contrastLevel by dts.contrastLevel.collectAsState()
val extendedFidelity by dts.extendedFidelity.collectAsState()
val hasAnimation by dts.hasAnimation.collectAsState()

// LocalThemeSettings: Provides set-functions to change every theme Setting.

Provider?

ktheme provides access to all the settings of the Dynamic Theme by accessing this 2 Composition Providers:

• LocalThemeIsDark: Boolean Use it to know if the current theme is light or dark, you can change the theme here without storing it.
• LocalThemeSettings: DynamicThemeSettings This provider give you access to the instance of the class in charge of store and modify the theme settings
  • All changes make here are stored in the local memory.
  • To change any setting, you must call the setter for that setting.
  • You can also track the changes to this settings calling the colectAsState() function any one
  • Settings:
    • seedColor || primaryColor: Color
      • Controls the current base color for the generated theme
      • Default is Color(0X4C662B)
    • secondaryColor: Color
      • Controls the current base color for the generated theme
      • Default null
    • errorColor: Color
      • Controls the current base color for the generated theme
      • Default null
    • theme: Boolean?
      • Controls which theme is active or if it is following the system theme.
      • Default is null
      • Values:
        • null -> Follow System Appearance
        • true -> Dark
        • false -> light
    • useDynamicColor: Boolean
      • Controls if the android app must use the system dynamic color, or use the seed color
    • useAmoled: Boolean
      • Controls if the theme must be amoled or not
      • Default is false
    • style: com.feraxhp.ktheme.PaletteStyles
      • Controls the style of the generated theme
      • Default: TonalSpot
    • contrastLevel: Double
      • Controls the contrast of the generated theme
      • Default: Compose Contrast Default
    • extendedFidelity: Boolean
      • See Material Design Docs for more information
    • hasAnimation: Boolean
      • Controls the transition between theme changes
      • This is triggered for any theme change in execution time.

To see a sample of the implementation you can access :sample:composeApp commonMain

Components

Since Version 0.0.3

• ThemeSelector: Is a segmented button with the options (system, dark, light)
• SegmentedButton: a implementation of SegmentedButton

---

This library is based on MaterialKolor