Add dynamic color/theme support for android

SimonSchubert · SimonSchubert · commit c78a2c5ff8e4 · 2026-03-12T11:52:42.000+01:00
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -59,6 +59,7 @@ kotlin {
                 implementation(libs.koin.androidx.compose)
                 implementation(libs.androidx.activity.compose)
                 implementation(libs.androidx.preference)
+                implementation(libs.androidx.material3)
             }
         }
 
diff --git a/composeApp/src/androidMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.android.kt b/composeApp/src/androidMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.android.kt
@@ -0,0 +1,45 @@
+package com.linuxcommandlibrary.app.ui.theme
+
+import android.os.Build
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+
+@Composable
+actual fun dynamicThemeColors(darkTheme: Boolean): DynamicThemeColors? {
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) return null
+
+    val context = LocalContext.current
+    val m3Scheme = if (darkTheme) {
+        dynamicDarkColorScheme(context)
+    } else {
+        dynamicLightColorScheme(context)
+    }
+
+    val colors = if (darkTheme) {
+        darkColors(
+            primary = BrandRed,
+            primaryVariant = BrandDarkRed,
+            secondary = m3Scheme.onSurface,
+            background = m3Scheme.background,
+            surface = m3Scheme.surface,
+        )
+    } else {
+        lightColors(
+            primary = BrandRed,
+            primaryVariant = BrandDarkRed,
+            secondary = m3Scheme.onSurface,
+            background = m3Scheme.background,
+            surface = m3Scheme.surface,
+        )
+    }
+
+    val customColors = CustomColors(
+        navBarBackground = m3Scheme.surfaceContainer,
+    )
+
+    return DynamicThemeColors(colors = colors, customColors = customColors)
+}
diff --git a/composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/App.kt b/composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/App.kt
@@ -105,7 +105,7 @@ fun App(initialDeeplink: String? = null) {
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .background(MaterialTheme.colors.primary)
+                .background(LocalCustomColors.current.topBarBackground)
                 .statusBarsPadding()
                 .background(LocalCustomColors.current.navBarBackground)
                 .navigationBarsPadding()
@@ -363,8 +363,9 @@ private fun GenericTopBar(
                 overflow = TextOverflow.Ellipsis,
             )
         },
-        backgroundColor = MaterialTheme.colors.primary,
-        contentColor = Color.White,
+        backgroundColor = LocalCustomColors.current.topBarBackground,
+        contentColor = LocalCustomColors.current.topBarContent,
+        elevation = 0.dp,
         navigationIcon = if (showBackIcon) {
             {
                 IconButton(
@@ -422,8 +423,9 @@ private fun DetailTopBar(
                 overflow = TextOverflow.Ellipsis,
             )
         },
-        backgroundColor = MaterialTheme.colors.primary,
-        contentColor = Color.White,
+        backgroundColor = LocalCustomColors.current.topBarBackground,
+        contentColor = LocalCustomColors.current.topBarContent,
+        elevation = 0.dp,
         navigationIcon = {
             IconButton(
                 modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
@@ -476,10 +478,11 @@ private fun SearchTopBar(
 ) {
     val focusRequester = remember { FocusRequester() }
 
+    val topBarContent = LocalCustomColors.current.topBarContent
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .background(MaterialTheme.colors.primary)
+            .background(LocalCustomColors.current.topBarBackground)
             .heightIn(min = 56.dp)
             .padding(horizontal = 4.dp),
         verticalAlignment = Alignment.CenterVertically,
@@ -495,7 +498,7 @@ private fun SearchTopBar(
                 Icon(
                     imageVector = backIcon,
                     contentDescription = "Back",
-                    tint = Color.White,
+                    tint = topBarContent,
                 )
             }
             OutlinedTextField(
@@ -505,17 +508,17 @@ private fun SearchTopBar(
                     .weight(1f)
                     .focusRequester(focusRequester)
                     .padding(start = 8.dp, end = 8.dp),
-                placeholder = { Text("Search...", color = Color.White.copy(alpha = 0.7f)) },
-                textStyle = MaterialTheme.typography.subtitle1.copy(color = Color.White),
+                placeholder = { Text("Search...", color = topBarContent.copy(alpha = 0.7f)) },
+                textStyle = MaterialTheme.typography.subtitle1.copy(color = topBarContent),
                 colors = TextFieldDefaults.outlinedTextFieldColors(
-                    textColor = Color.White,
-                    cursorColor = Color.White,
+                    textColor = topBarContent,
+                    cursorColor = topBarContent,
                     focusedBorderColor = Color.Transparent,
                     unfocusedBorderColor = Color.Transparent,
                     disabledBorderColor = Color.Transparent,
                     backgroundColor = Color.Transparent,
-                    trailingIconColor = LocalContentColor.current.copy(alpha = LocalContentAlpha.current),
-                    placeholderColor = LocalContentColor.current.copy(alpha = 0.7f),
+                    trailingIconColor = topBarContent.copy(alpha = LocalContentAlpha.current),
+                    placeholderColor = topBarContent.copy(alpha = 0.7f),
                 ),
                 maxLines = 1,
                 singleLine = true,
@@ -528,7 +531,7 @@ private fun SearchTopBar(
                     Icon(
                         imageVector = Icons.Filled.Close,
                         contentDescription = "Clear",
-                        tint = Color.White,
+                        tint = topBarContent,
                     )
                 }
             }
@@ -539,10 +542,10 @@ private fun SearchTopBar(
                     .weight(1f)
                     .padding(start = 16.dp)
                     .semantics { contentDescription = "TopAppBarTitle" },
-                style = MaterialTheme.typography.h6.copy(color = LocalContentColor.current),
+                style = MaterialTheme.typography.h6,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
-                color = Color.White,
+                color = topBarContent,
             )
             IconButton(
                 modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
@@ -551,7 +554,7 @@ private fun SearchTopBar(
                 Icon(
                     imageVector = Icons.Filled.Search,
                     contentDescription = "Search",
-                    tint = Color.White,
+                    tint = topBarContent,
                 )
             }
         }
diff --git a/composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.kt b/composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.kt
@@ -0,0 +1,12 @@
+package com.linuxcommandlibrary.app.ui.theme
+
+import androidx.compose.material.Colors
+import androidx.compose.runtime.Composable
+
+data class DynamicThemeColors(
+    val colors: Colors,
+    val customColors: CustomColors,
+)
+
+@Composable
+expect fun dynamicThemeColors(darkTheme: Boolean): DynamicThemeColors?
diff --git a/composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/theme/LinuxTheme.kt b/composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/theme/LinuxTheme.kt
@@ -17,8 +17,13 @@ import com.linuxcommandlibrary.app.resources.Res
 import com.linuxcommandlibrary.app.resources.share_tech_mono
 import org.jetbrains.compose.resources.Font
 
+val BrandRed = Color(0xFFe45151)
+val BrandDarkRed = Color(0xFFc62828)
+
 data class CustomColors(
     val navBarBackground: Color = Color(0xFF00695C),
+    val topBarBackground: Color = BrandRed,
+    val topBarContent: Color = Color.White,
 )
 
 val LocalCustomColors = compositionLocalOf { CustomColors() }
@@ -27,18 +32,19 @@ val LocalCustomColors = compositionLocalOf { CustomColors() }
 fun LinuxTheme(content: @Composable () -> Unit) {
     val darkMode = isSystemInDarkTheme()
     val darkColors = darkColors(
-        primary = Color(0xFFe45151),
+        primary = BrandRed,
         secondary = Color.White,
         background = Color(0xFF262626),
         surface = Color(0xFF262626),
     )
     val lightColors = lightColors(
-        primary = Color(0xFFe45151),
+        primary = BrandRed,
         secondary = Color.Black,
         background = Color.White,
         surface = Color.White,
     )
-    val colorSchema = if (darkMode) darkColors else lightColors
+    val dynamicColors = dynamicThemeColors(darkMode)
+    val colorSchema = dynamicColors?.colors ?: if (darkMode) darkColors else lightColors
 
     val techMonoFont = FontFamily(
         Font(Res.font.share_tech_mono),
@@ -55,7 +61,7 @@ fun LinuxTheme(content: @Composable () -> Unit) {
         subtitle2 = codeTextStyle,
     )
 
-    val customColors = if (darkMode) {
+    val customColors = dynamicColors?.customColors ?: if (darkMode) {
         CustomColors(
             navBarBackground = Color(0xFF2D2D2D),
         )
diff --git a/composeApp/src/desktopMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.desktop.kt b/composeApp/src/desktopMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.desktop.kt
@@ -0,0 +1,6 @@
+package com.linuxcommandlibrary.app.ui.theme
+
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun dynamicThemeColors(darkTheme: Boolean): DynamicThemeColors? = null
diff --git a/composeApp/src/iosMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.ios.kt b/composeApp/src/iosMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.ios.kt
@@ -0,0 +1,6 @@
+package com.linuxcommandlibrary.app.ui.theme
+
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun dynamicThemeColors(darkTheme: Boolean): DynamicThemeColors? = null
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -18,12 +18,14 @@ uiToolingPreview = "1.10.5"
 spotless = "8.3.0"
 kotlinxCollectionsImmutable = "0.4.0"
 benManesVersions = "0.53.0"
+material3 = "1.4.0"
 mordant = "3.0.2"
 
 
 [libraries]
 kotlinx-serialization-core = { module = "org.jetbrains.kotlinx:kotlinx-serialization-core", version.ref = "kotlinxSerializationCore" }
 mordant = { module = "com.github.ajalt.mordant:mordant", version.ref = "mordant" }
+androidx-material3 = { module = "androidx.compose.material3:material3", version.ref = "material3" }
 accompanist-appcompat-theme = { module = "com.google.accompanist:accompanist-appcompat-theme", version.ref = "accompanistAppcompatTheme" }
 accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanistAppcompatTheme" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "activityCompose" }
diff --git a/iosApp/iosApp.xcodeproj/project.xcworkspace/xcuserdata/simon.xcuserdatad/UserInterfaceState.xcuserstate b/iosApp/iosApp.xcodeproj/project.xcworkspace/xcuserdata/simon.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/iosApp/iosApp/Info.plist b/iosApp/iosApp/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>3.5.14</string>
+	<string>3.5.16</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,7 @@ kotlin {`
`59`	`59`	`implementation(libs.koin.androidx.compose)`
`60`	`60`	`implementation(libs.androidx.activity.compose)`
`61`	`61`	`implementation(libs.androidx.preference)`
	`62`	`+ implementation(libs.androidx.material3)`
`62`	`63`	`}`
`63`	`64`	`}`
`64`	`65`