UI：M3E风格-Done

Author: Fastace

source/app/src/main/kotlin/com/xayah/databackup/MainActivity.kt

@@ -16,6 +16,7 @@ import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navArgument
 import androidx.navigation.NavType
 import java.net.URLDecoder
+import com.xayah.core.ui.theme.DataBackupExpressiveTheme
 import com.xayah.core.ui.component.AnimatedNavHost
 import com.xayah.core.ui.route.MainRoutes
 import com.xayah.core.ui.theme.DataBackupTheme
@@ -103,7 +104,9 @@ class MainActivity : AppCompatActivity() {
                         startDestination = MainRoutes.Dashboard.route,
                     ) {
                         composable(MainRoutes.Dashboard.route) {
-                            PageDashboard()
+                            DataBackupExpressiveTheme {
+                                PageDashboard()
+                            }
                         }
                         composable(MainRoutes.Cloud.route) {
                             PageCloud()

source/core/ui/src/main/kotlin/com/xayah/core/ui/component/Common.kt

@@ -24,6 +24,7 @@ import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material.icons.outlined.Folder
 import androidx.compose.material.icons.outlined.Shield
 import androidx.compose.material.icons.rounded.MoreHoriz
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Checkbox
@@ -83,7 +84,7 @@ fun ActionButton(
     val interactionSource = remember { MutableInteractionSource() }
     Card(
         modifier = modifier.wrapContentHeight(),
-        shape = RoundedCornerShape(SizeTokens.Level18),
+        shape = MaterialTheme.shapes.medium,
         colors = CardDefaults.cardColors(containerColor = colorContainer.value.withState(enabled)),
         onClick = onClick,
         enabled = enabled,

source/core/ui/src/main/kotlin/com/xayah/core/ui/theme/Theme.kt

@@ -2,6 +2,8 @@ package com.xayah.core.ui.theme
 
 //import android.app.Activity
 import android.os.Build
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.MaterialExpressiveTheme
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
@@ -87,8 +89,8 @@ fun DataBackupTheme(
     //        val window = (view.context as Activity).window
     //        window.statusBarColor = colorScheme.primary.toArgb()
     //        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
-     //   }
-   // }
+    //   }
+    // }
 
     // Transparent system bars
     //val systemUiController = rememberSystemUiController()
@@ -98,11 +100,11 @@ fun DataBackupTheme(
     //        darkIcons = !darkTheme
     //    )
     //    systemUiController.setNavigationBarColor(
-     //       color = Color.Transparent,
-      //      darkIcons = !darkTheme,
-        //    navigationBarContrastEnforced = false
-        //)
-   // }
+    //       color = Color.Transparent,
+    //      darkIcons = !darkTheme,
+    //    navigationBarContrastEnforced = false
+    //)
+    // }
 
     MaterialTheme(
         colorScheme = colorScheme,
@@ -122,6 +124,55 @@ fun DataBackupTheme(
     )
 }
 
+/**
+ * Material 3 Expressive theme wrapper for the Dashboard page.
+ * Uses MaterialExpressiveTheme which provides expressive shapes, motion, and typography.
+ */
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+fun DataBackupExpressiveTheme(
+    content: @Composable () -> Unit,
+) {
+    val context = LocalContext.current
+    val darkTheme = darkTheme()
+
+    // Dynamic color is available on Android 12+
+    val dynamicColor by observeMonetEnabled()
+    val colorScheme = when {
+        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+        }
+
+        darkTheme -> darkColorScheme()
+        else -> lightColorScheme()
+    }
+    val themedColorScheme = when {
+        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            if (darkTheme) dynamicDarkThemedColorScheme(context) else dynamicLightThemedColorScheme(context)
+        }
+
+        darkTheme -> darkThemedColorScheme()
+        else -> lightThemedColorScheme()
+    }
+
+    MaterialExpressiveTheme(
+        colorScheme = colorScheme,
+        typography = Typography,
+        content = {
+            CompositionLocalProvider(
+                LocalThemedColorScheme provides themedColorScheme,
+            ) {
+                // LocalThemedColorScheme should be applied first.
+                val slotScope = rememberSlotScope()
+                CompositionLocalProvider(
+                    LocalSlotScope provides slotScope,
+                    content = content
+                )
+            }
+        }
+    )
+}
+
 @Composable
 fun observeCurrentTheme(): State<ThemeType> {
     return LocalContext.current.readThemeType().collectImmediatelyAsState()
@@ -138,4 +189,4 @@ private fun <T> Flow<T>.collectImmediatelyAsState(): State<T> = produceState(
     key1 = this,
 ) {
     drop(1).collect { value = it }
-}
+}

source/gradle/libs.versions.toml

@@ -16,6 +16,7 @@ androidx-test-ext-junit = "1.2.1"
 espresso-core = "3.6.1"
 junit = "4.13.2"
 compose-bom = "2025.12.00"
+material3 = "1.5.0-alpha16"
 core-ktx = "1.16.0"
 core-splashscreen = "1.0.1"
 gson = "2.10.1"
@@ -78,7 +79,8 @@ androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
 androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
 androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
 androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
-androidx-compose-material3 = { module = "androidx.compose.material3:material3" }
+#androidx-compose-material3 = { module = "androidx.compose.material3:material3" }
+androidx-compose-material3 = { module = "androidx.compose.material3:material3", version.ref = "material3" }
 androidx-compose-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" }
 androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigation-compose" }
 androidx-palette = { module = "androidx.palette:palette", version.ref = "palette" }