Material Theme Preferences

Kotlin Multiplatform library for easy switching Dark/Light Material themes on Compose. Supported platforms:

• Android
• iOS
• Desktop JVM (MacOS, Linux, Windows)
• Web (wasm JS)

API Documentation · Web Demo

More…

Usage

Call composable functions to wrap your app, show theme preference items, and handle dialog state manually.

Show dialog directly: Use ThemeAlertDialog to show a dialog with theme preferences:

@Composable
funApp() =PreferableMaterialTheme {
var showDialog by remember { mutableStateOf(false) }
SettingsScaffold(onThemeClick = { showDialog =true }) {
Column {
ThemePreferencesCategory() // subtitleThemePreferenceItem(onClick = { showDialog =true }) // menu item
}
}
if (showDialog) {
ThemeAlertDialog(dismissDialog = { showDialog =false })
}
}

With navigation frameworks: Use ThemeDialogContent as the content of a dialog destination:

@Composable
funApp() =PreferableMaterialTheme {
val navController = rememberNavController()
NavHost(navController = navController) {
composable<AppNavGraph.Settings> {
SettingsBody(onThemeClick = { navController.navigate(route =AppNavGraph.ThemeDialog) })
}
dialog<AppNavGraph.ThemeDialog> {
ThemeDialogContent(dismissDialog = navController::popBackStack)
}
}
}

Check the sample app for using with Material Design versions 2 & 3.

The NoteDelight app is a real example.

Installation

The latest release is available on Maven Central.

Gradle

1. Add the Maven Central repository if it is not already there:

repositories {
mavenCentral()
}

2. In multiplatform projects, add a dependency to the commonMain source set dependencies

commonMain {
dependencies {
implementation("io.github.softartdev:theme-material:$latestVersion") // Material Design 2
implementation("io.github.softartdev:theme-material3:$latestVersion") // Material Design 3
implementation("io.github.softartdev:theme-prefs:$latestVersion") // optional, if you need only preferences
}
}

Implementation

Used compose-multiplatform-resources library for many languages (currently Russian and English are supported).

Persisting preferences is implemented using SharedPreferences on Android, and Java Preference API on JVM Desktop.

// common:expectvar themeEnum:ThemeEnum// android:privateval preferences:SharedPreferences=PreferenceManager.getDefaultSharedPreferences(context)
actualvar themeEnum:ThemeEnum
get() = preferences.getInt(THEME_KEY, ThemeEnum.SystemDefault.ordinal).let(ThemeEnum.values()::get)
set(value) = preferences.edit().putInt(THEME_KEY, value.ordinal).apply()
// desktop java:privatevar preferences:Preferences=Preferences.userNodeForPackage(ThemeEnum::class.java)
actualvar themeEnum:ThemeEnum
get() = preferences.getInt(THEME_KEY, ThemeEnum.SystemDefault.ordinal).let(ThemeEnum.values()::get)
set(value) = preferences.putInt(THEME_KEY, value.ordinal)
// ios:privateval preferences:NSUserDefaults=NSUserDefaults.standardUserDefaults
actualvar themeEnum:ThemeEnum
get() = preferences.integerForKey(THEME_KEY).let(ThemeEnum.values()::get)
set(value) = preferences.setInteger(value.ordinal, THEME_KEY)
// wasm js:privateval storage:Storage= window.localStorage
actualvar themeEnum:ThemeEnum
get() = storage.getItem(THEME_KEY)?.toIntOrNull()?.let(ThemeEnum.values()::get) ?:ThemeEnum.SystemDefault
set(value) = storage.setItem(THEME_KEY, value.ordinal.toString())

Also used composition local for access from theme-scoped as an implicit way:

val themePrefs:ThemePrefs=LocalThemePrefs.current