Kotlin Multiplatform library for easy switching Dark/Light Material themes on Compose. Supported platforms:
- Android
- iOS
- Desktop JVM (MacOS, Linux, Windows)
- Web (wasm JS)
More…
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 fun App() = PreferableMaterialTheme { var showDialog by remember { mutableStateOf(false) } SettingsScaffold(onThemeClick = { showDialog = true }) { Column { ThemePreferencesCategory() // subtitle ThemePreferenceItem(onClick = { showDialog = true }) // menu item } } if (showDialog) { ThemeAlertDialog(dismissDialog = { showDialog = false }) } }With navigation frameworks: Use ThemeDialogContent as the content of a dialog destination:
@Composable fun App() = 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.
The latest release is available on Maven Central.
- Add the Maven Central repository if it is not already there:
repositories { mavenCentral() }- 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 } }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: expect var themeEnum: ThemeEnum // android: private val preferences: SharedPreferences = PreferenceManager.getDefaultSharedPreferences(context) actual var 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: private var preferences: Preferences = Preferences.userNodeForPackage(ThemeEnum::class.java) actual var themeEnum: ThemeEnum get() = preferences.getInt(THEME_KEY, ThemeEnum.SystemDefault.ordinal).let(ThemeEnum.values()::get) set(value) = preferences.putInt(THEME_KEY, value.ordinal) // ios: private val preferences: NSUserDefaults = NSUserDefaults.standardUserDefaults actual var themeEnum: ThemeEnum get() = preferences.integerForKey(THEME_KEY).let(ThemeEnum.values()::get) set(value) = preferences.setInteger(value.ordinal, THEME_KEY) // wasm js: private val storage: Storage = window.localStorage actual var 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