diff --git a/app/src/main/java/io/nekohasekai/sagernet/ktx/Dialogs.kt b/app/src/main/java/io/nekohasekai/sagernet/ktx/Dialogs.kt
index 3dbc532d5..24e5a40a1 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ktx/Dialogs.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ktx/Dialogs.kt
@@ -18,7 +18,7 @@ fun Fragment.alert(text: String) = requireContext().alert(text)
 
 fun AlertDialog.tryToShow() {
     try {
-        val activity = context as Activity
+        val activity = context.unwrap<Activity>()
         if (!activity.isFinishing) {
             show()
         }
diff --git a/app/src/main/java/io/nekohasekai/sagernet/ktx/Utils.kt b/app/src/main/java/io/nekohasekai/sagernet/ktx/Utils.kt
index 8c43f98b8..2906e4e56 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ktx/Utils.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ktx/Utils.kt
@@ -63,6 +63,21 @@ import kotlin.reflect.KProperty0
 
 fun String?.blankAsNull(): String? = if (isNullOrBlank()) null else this
 
+/**
+ * Resolve the hosting object of type [T] (e.g. the Activity / LifecycleOwner) from a View's
+ * Context. Material 3 themes wrap the view context in a ContextThemeWrapper, so a direct
+ * `context as Activity` cast throws ClassCastException; walk the ContextWrapper.baseContext
+ * chain instead.
+ */
+inline fun <reified T> Context.unwrap(): T {
+    var ctx: Context? = this
+    while (ctx != null) {
+        if (ctx is T) return ctx
+        ctx = (ctx as? android.content.ContextWrapper)?.baseContext
+    }
+    error("Could not unwrap ${T::class.java.simpleName} from context")
+}
+
 inline fun <T> Iterable<T>.forEachTry(action: (T) -> Unit) {
     var result: Exception? = null
     for (element in this) try {
diff --git a/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt b/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
index 15d72f221..1825b7385 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
@@ -12,6 +12,7 @@ import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.updatePadding
 import com.google.android.material.appbar.AppBarLayout
+import com.google.android.material.color.DynamicColors
 import com.google.android.material.snackbar.Snackbar
 import io.nekohasekai.sagernet.R
 import io.nekohasekai.sagernet.database.DataStore
@@ -33,6 +34,11 @@ abstract class ThemedActivity : AppCompatActivity {
         }
         Theme.applyNightTheme()
 
+        // Only the explicit Dynamic (Material You) theme should use wallpaper colors.
+        // The hand-picked themes keep their legacy palettes instead of being reseeded
+        // into Material 3's generated tonal roles.
+        if (!isDialog) applyDynamicColors()
+
         super.onCreate(savedInstanceState)
 
         uiMode = resources.configuration.uiMode
@@ -63,6 +69,18 @@ abstract class ThemedActivity : AppCompatActivity {
         themeResId = resId
     }
 
+    /**
+     * Apply Material 3 dynamic color ONLY when the user explicitly picks the Dynamic
+     * (Material You) theme, and only on Android 12+ where a wallpaper palette exists.
+     * The hand-designed themes keep their own colors untouched — forcing a content-based
+     * reseed on them mangled their palettes into arbitrary M3 tones.
+     */
+    private fun applyDynamicColors() {
+        if (DataStore.appTheme == Theme.DYNAMIC) {
+            DynamicColors.applyToActivityIfAvailable(this)
+        }
+    }
+
     override fun onConfigurationChanged(newConfig: Configuration) {
         super.onConfigurationChanged(newConfig)
 
diff --git a/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt b/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
index 0f24ad364..2e228a58c 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
@@ -32,6 +32,7 @@ object Theme {
     const val BLACK = 21
     const val VERDANT_MINT = 22
     const val DRACULA = 23
+    const val DYNAMIC = 24
 
     private fun defaultTheme() = PINK_SSR
 
@@ -76,6 +77,7 @@ object Theme {
             BLACK -> R.style.Theme_SagerNet_Black
             VERDANT_MINT -> R.style.Theme_SagerNet_VerdantMint
             DRACULA -> R.style.Theme_SagerNet_Dracula
+            DYNAMIC -> R.style.Theme_SagerNet
             else -> getTheme(defaultTheme())
         }
     }
@@ -105,6 +107,7 @@ object Theme {
             BLACK -> R.style.Theme_SagerNet_Dialog_Black
             VERDANT_MINT -> R.style.Theme_SagerNet_Dialog_VerdantMint
             DRACULA -> R.style.Theme_SagerNet_Dialog_Dracula
+            DYNAMIC -> R.style.Theme_SagerNet_Dialog
             else -> getDialogTheme(defaultTheme())
         }
     }
diff --git a/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt b/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
index 6a578a823..d5b69e7e2 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
@@ -20,6 +20,7 @@ import com.google.android.material.progressindicator.BaseProgressIndicator
 import io.nekohasekai.sagernet.R
 import io.nekohasekai.sagernet.bg.BaseService
 import io.nekohasekai.sagernet.ktx.getColorAttr
+import io.nekohasekai.sagernet.ktx.unwrap
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
@@ -66,11 +67,12 @@ class ServiceButton @JvmOverloads constructor(
     private val iconConnecting by lazy {
         AnimatedState(R.drawable.ic_service_connecting) {
             hideProgress()
-            delayedAnimation = (context as LifecycleOwner).lifecycleScope.launch {
+            val owner = context.unwrap<LifecycleOwner>()
+            delayedAnimation = owner.lifecycleScope.launch {
                 delay(context.resources.getInteger(android.R.integer.config_mediumAnimTime) + 1000L)
                 // Gate the UI mutation on STARTED so a delayed progress reveal doesn't run
                 // while the activity is stopped (the old launchWhenStarted suspended here).
-                (context as LifecycleOwner).withStarted {
+                owner.withStarted {
                     isIndeterminate = true
                     show()
                 }
diff --git a/app/src/main/java/io/nekohasekai/sagernet/widget/StatsBar.kt b/app/src/main/java/io/nekohasekai/sagernet/widget/StatsBar.kt
index a6cdde97a..c3db54ab2 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/widget/StatsBar.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/widget/StatsBar.kt
@@ -122,7 +122,7 @@ class StatsBar @JvmOverloads constructor(
     }
 
     fun changeState(state: BaseService.State) {
-        val activity = context as MainActivity
+        val activity = context.unwrap<MainActivity>()
         fun postWhenStarted(what: () -> Unit) = activity.lifecycleScope.launch(Dispatchers.Main) {
             delay(100L)
             activity.withStarted { what() }
@@ -172,7 +172,7 @@ class StatsBar @JvmOverloads constructor(
     }
 
     fun testConnection() {
-        val activity = context as MainActivity
+        val activity = context.unwrap<MainActivity>()
         isEnabled = false
         // "Testing…" in the testing color.
         statusText.setTextColor(context.getColorAttr(R.attr.statusTestingColor))
diff --git a/app/src/main/res/layout/layout_app_list.xml b/app/src/main/res/layout/layout_app_list.xml
index 2370531fb..976e405c9 100644
--- a/app/src/main/res/layout/layout_app_list.xml
+++ b/app/src/main/res/layout/layout_app_list.xml
@@ -28,7 +28,7 @@
                 android:theme="?actionBarTheme"
                 android:touchscreenBlocksFocus="false"
                 app:layout_collapseMode="pin"
-                app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight"
+                app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
                 app:title="@string/app_name" />
 
             <LinearLayout
@@ -56,7 +56,7 @@
 
                             <com.google.android.material.chip.Chip
                                 android:id="@+id/show_system_apps"
-                                style="@style/Widget.MaterialComponents.Chip.Filter"
+                                style="@style/Widget.Material3.Chip.Filter"
                                 android:layout_width="wrap_content"
                                 android:layout_height="wrap_content"
                                 android:layout_marginBottom="4dp"
diff --git a/app/src/main/res/layout/layout_appbar.xml b/app/src/main/res/layout/layout_appbar.xml
index a8df256bd..d9f5e8eff 100644
--- a/app/src/main/res/layout/layout_appbar.xml
+++ b/app/src/main/res/layout/layout_appbar.xml
@@ -15,6 +15,6 @@
         android:background="?attr/colorPrimary"
         android:theme="?actionBarTheme"
         android:touchscreenBlocksFocus="false"
-        app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight"
+        app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
         app:title="@string/app_name" />
 </com.google.android.material.appbar.AppBarLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/layout_apps.xml b/app/src/main/res/layout/layout_apps.xml
index 67463768d..41c9f2f83 100644
--- a/app/src/main/res/layout/layout_apps.xml
+++ b/app/src/main/res/layout/layout_apps.xml
@@ -28,7 +28,7 @@
                 android:theme="?actionBarTheme"
                 android:touchscreenBlocksFocus="false"
                 app:layout_collapseMode="pin"
-                app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight"
+                app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
                 app:title="@string/app_name" />
 
             <LinearLayout
@@ -85,7 +85,7 @@
 
                             <com.google.android.material.chip.Chip
                                 android:id="@+id/show_system_apps"
-                                style="@style/Widget.MaterialComponents.Chip.Filter"
+                                style="@style/Widget.Material3.Chip.Filter"
                                 android:layout_width="wrap_content"
                                 android:layout_height="wrap_content"
                                 android:layout_marginEnd="8dp"
diff --git a/app/src/main/res/layout/layout_main.xml b/app/src/main/res/layout/layout_main.xml
index 3becd92e9..c7eaaa930 100644
--- a/app/src/main/res/layout/layout_main.xml
+++ b/app/src/main/res/layout/layout_main.xml
@@ -19,31 +19,6 @@
             android:layout_width="match_parent"
             android:layout_height="match_parent" />
 
-        <!-- We double trackThickness as half of it will be invisible -->
-        <com.google.android.material.progressindicator.CircularProgressIndicator
-            android:id="@+id/fabProgress"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:max="1"
-            android:visibility="invisible"
-            app:indicatorColor="?primaryOrTextSecondary"
-            app:layout_anchor="@+id/fab"
-            app:layout_anchorGravity="center"
-            app:layout_behavior="io.nekohasekai.sagernet.widget.FabProgressBehavior"
-            app:trackCornerRadius="@dimen/mtrl_progress_track_thickness"
-            app:trackThickness="8dp" />
-
-        <io.nekohasekai.sagernet.widget.ServiceButton
-            android:id="@+id/fab"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:elevation="6dp"
-            android:nextFocusDown="@+id/stats"
-            app:backgroundTint="?colorPrimary"
-            app:layout_anchor="@id/stats"
-            app:pressedTranslationZ="6dp"
-            app:srcCompat="@drawable/ic_service_idle" />
-
         <io.nekohasekai.sagernet.widget.StatsBar
             android:id="@+id/stats"
             android:layout_width="match_parent"
@@ -52,6 +27,8 @@
             android:nextFocusUp="@+id/fab"
             app:backgroundTint="?colorPrimary"
             app:contentInsetStart="0dp"
+            app:fabAlignmentMode="center"
+            app:fabAnchorMode="cradle"
             app:hideOnScroll="true"
             app:layout_scrollFlags="enterAlways|scroll">
 
@@ -99,6 +76,35 @@
 
         </io.nekohasekai.sagernet.widget.StatsBar>
 
+        <!-- FAB + its progress are declared AFTER the StatsBar so the airplane draws on top
+             of the bottom bar and wins touch in the overlap region. StatsBar opts into the
+             legacy BottomAppBar cradle so the centered FAB docks into the bar. -->
+        <!-- We double trackThickness as half of it will be invisible -->
+        <com.google.android.material.progressindicator.CircularProgressIndicator
+            android:id="@+id/fabProgress"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:max="1"
+            android:visibility="invisible"
+            app:indicatorColor="?primaryOrTextSecondary"
+            app:layout_anchor="@+id/fab"
+            app:layout_anchorGravity="center"
+            app:layout_behavior="io.nekohasekai.sagernet.widget.FabProgressBehavior"
+            app:trackCornerRadius="@dimen/mtrl_progress_track_thickness"
+            app:trackThickness="8dp" />
+
+        <io.nekohasekai.sagernet.widget.ServiceButton
+            android:id="@+id/fab"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:elevation="6dp"
+            android:nextFocusDown="@+id/stats"
+            app:backgroundTint="?attr/fabColorBackground"
+            app:tint="?attr/fabStoppedColor"
+            app:layout_anchor="@id/stats"
+            app:pressedTranslationZ="6dp"
+            app:srcCompat="@drawable/ic_service_idle" />
+
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
     <com.google.android.material.navigation.NavigationView
diff --git a/app/src/main/res/layout/layout_network.xml b/app/src/main/res/layout/layout_network.xml
index 8dd35c9c3..e5a6fb695 100644
--- a/app/src/main/res/layout/layout_network.xml
+++ b/app/src/main/res/layout/layout_network.xml
@@ -48,7 +48,7 @@
 
                 <Button
                     android:id="@+id/stunTest"
-                    style="@style/Widget.AppCompat.Button.Borderless"
+                    style="@style/Widget.Material3.Button.TextButton"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_marginEnd="8dp"
diff --git a/app/src/main/res/layout/layout_stun.xml b/app/src/main/res/layout/layout_stun.xml
index c10b04a92..f69b13576 100644
--- a/app/src/main/res/layout/layout_stun.xml
+++ b/app/src/main/res/layout/layout_stun.xml
@@ -115,7 +115,7 @@
 
                     <Button
                         android:id="@+id/stunTest"
-                        style="@style/Widget.AppCompat.Button.Borderless"
+                        style="@style/Widget.Material3.Button.TextButton"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_marginEnd="8dp"
diff --git a/app/src/main/res/layout/layout_webdav_settings.xml b/app/src/main/res/layout/layout_webdav_settings.xml
index 7a4bf9067..7e1f9c042 100644
--- a/app/src/main/res/layout/layout_webdav_settings.xml
+++ b/app/src/main/res/layout/layout_webdav_settings.xml
@@ -9,14 +9,14 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:fitsSystemWindows="true"
-        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
+        android:theme="@style/ThemeOverlay.Material3.Dark.ActionBar">
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             android:background="?attr/colorPrimary"
-            app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />
+            app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup" />
 
     </com.google.android.material.appbar.AppBarLayout>
 
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index b14f9246c..cb7b8dfa0 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -5,6 +5,11 @@
     <!-- 卡片默认细边框：约 12% 白 -->
     <color name="card_stroke">#1FFFFFFF</color>
 
+    <!-- M3 colorOutline (night): neutral light-gray for borders/dividers on dark surfaces.
+         This is the strong colorOutline role (M3 dark #938F99); the subtler
+         colorOutlineVariant maps to card_stroke (12% white) instead. -->
+    <color name="m3_outline">#938F99</color>
+
     <!-- 路由规则类型颜色（夜间，稍浅） -->
     <color name="color_route_block">#EF5350</color>   <!-- 屏蔽：浅红 -->
     <color name="color_route_direct">#66BB6A</color>  <!-- 直连：浅绿 -->
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index e146ce488..c1abd02a6 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -26,6 +26,18 @@
         <item name="android:colorBackground">@color/dracula_background</item>
         <item name="colorOnBackground">@color/dracula_on_surface</item>
         <item name="android:windowBackground">@color/dracula_background</item>
+        <!-- M3 container/variant roles on the dark canvas (the base defaults point
+             at the light color_dracula_100 tint, which clashes with light-on-dark
+             text in night mode). -->
+        <item name="colorPrimaryContainer">@color/color_dracula_container</item>
+        <item name="colorOnPrimaryContainer">@color/dracula_on_surface</item>
+        <item name="colorSecondaryContainer">@color/color_dracula_container</item>
+        <item name="colorOnSecondaryContainer">@color/dracula_on_surface</item>
+        <item name="colorTertiaryContainer">@color/color_dracula_container</item>
+        <item name="colorOnTertiaryContainer">@color/dracula_on_surface</item>
+        <item name="colorSurfaceVariant">@color/color_dracula_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/dracula_on_surface</item>
+        <item name="colorOutline">@color/color_dracula_outline</item>
         <!-- Night is Dracula's active code path (it forces night mode on), so the
              semantic color overrides must live here too, not only day. -->
         <item name="protocolColor">@color/color_dracula_green</item>
@@ -54,6 +66,15 @@
         <item name="colorOnSurface">@color/dracula_on_surface</item>
         <item name="android:colorBackground">@color/dracula_background</item>
         <item name="colorOnBackground">@color/dracula_on_surface</item>
+        <item name="colorPrimaryContainer">@color/color_dracula_container</item>
+        <item name="colorOnPrimaryContainer">@color/dracula_on_surface</item>
+        <item name="colorSecondaryContainer">@color/color_dracula_container</item>
+        <item name="colorOnSecondaryContainer">@color/dracula_on_surface</item>
+        <item name="colorTertiaryContainer">@color/color_dracula_container</item>
+        <item name="colorOnTertiaryContainer">@color/dracula_on_surface</item>
+        <item name="colorSurfaceVariant">@color/color_dracula_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/dracula_on_surface</item>
+        <item name="colorOutline">@color/color_dracula_outline</item>
         <item name="protocolColor">@color/color_dracula_green</item>
         <item name="profileNameColor">@color/color_dracula_yellow</item>
         <item name="statusConnectedColor">@color/color_dracula_green</item>
diff --git a/app/src/main/res/values-v26/themes.xml b/app/src/main/res/values-v26/themes.xml
index 58a704e87..895cc4c39 100644
--- a/app/src/main/res/values-v26/themes.xml
+++ b/app/src/main/res/values-v26/themes.xml
@@ -1,7 +1,9 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme for API 26+ -->
-    <style name="Theme.SagerNet" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-        <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
+    <style name="Theme.SagerNet" parent="Theme.Material3.DayNight.NoActionBar">
+        <item name="actionBarStyle">@style/Widget.Material3.ActionBar.Solid</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar</item>
+        <item name="floatingActionButtonStyle">@style/Widget.SagerNet.FloatingActionButton</item>
         <!-- Default nav-drawer selected-item fill; satisfies the
              ?itemShapeFillColor self-reference in @color/navigation_item. -->
         <item name="itemShapeFillColor">?colorPrimary</item>
@@ -26,12 +28,32 @@
         <item name="colorPrimary">@color/material_pink_500</item>
         <item name="colorPrimaryDark">@color/material_pink_700</item>
         <item name="colorAccent">@color/material_pink_accent_200</item>
+        <item name="colorOnPrimary">@color/white</item>
 
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
 
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
 
+        <!-- Material 3 color roles. Derived from each theme's own palette so the
+             hand-picked themes keep their look while M3 widgets resolve a real role
+             instead of falling back to the library's generated grayscale tones.
+             Special themes override these explicitly. -->
+        <item name="colorPrimaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnPrimaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorSecondary">?colorAccent</item>
+        <item name="colorOnSecondary">?attr/colorOnPrimary</item>
+        <item name="colorSecondaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnSecondaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorTertiary">?colorAccent</item>
+        <item name="colorOnTertiary">?attr/colorOnPrimary</item>
+        <item name="colorTertiaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnTertiaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorSurfaceVariant">?attr/colorSurface</item>
+        <item name="colorOnSurfaceVariant">?android:attr/textColorSecondary</item>
+        <item name="colorOutline">@color/m3_outline</item>
+        <item name="colorOutlineVariant">@color/card_stroke</item>
+
         <item name="accentOrTextSecondary">?colorAccent</item>
         <item name="accentOrTextPrimary">?colorAccent</item>
         <item name="primaryOrTextSecondary">?colorPrimary</item>
@@ -52,10 +74,10 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
 
-        <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Choice.SagerNet</item>
+        <item name="chipStyle">@style/Widget.SagerNet.Chip.Choice</item>
 
         <item name="itemShapeAppearance">
-            @style/ShapeAppearance.MaterialComponents.MediumComponent
+            @style/ShapeAppearance.Material3.MediumComponent
         </item>
 
         <item name="alertDialogTheme">
@@ -63,7 +85,7 @@
         </item>
 
         <item name="materialAlertDialogTheme">
-            @style/ThemeOverlay.MaterialComponents.MaterialAlertDialog.SagerNet
+            @style/ThemeOverlay.SagerNet.MaterialAlertDialog
         </item>
 
         <item name="materialCardViewStyle">@style/Widget.SagerNet.CardView</item>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 3ddd0856b..926a2500f 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -27,6 +27,7 @@
         <item>@color/material_light_black</item>
         <item>@color/color_verdant_mint</item>
         <item>@color/color_dracula</item>
+        <item>@color/color_dynamic_swatch</item>
     </integer-array>
 
     <color name="material_amber_100">#FFECB3</color>
@@ -296,6 +297,9 @@
          pink accent. Surfaces are overridden in values-night for the true
          #282a36 canvas; see Theme.SagerNet.Dracula. -->
     <color name="color_dracula">#BD93F9</color>
+    <!-- Representative swatch for the Dynamic (Material You) theme option (wallpaper-based on
+         Android 12+); a neutral system-accent stand-in since it has no fixed color. -->
+    <color name="color_dynamic_swatch">#5E6472</color>
     <color name="color_dracula_dark">#6272A4</color>
     <color name="color_dracula_accent">#FF79C6</color>
     <color name="color_dracula_100">#E9DDFB</color>
@@ -312,6 +316,15 @@
     <color name="color_ng_black_accent">#9E9E9E</color>
     <color name="color_ng_black_primary">#2B2B2B</color>
 
+    <!-- M3 container/surface-variant roles for the special themes, so M3 widgets
+         (chips, tonal buttons, cards) don't fall back to library grayscale.
+         Dracula: dark purple container on its #282A36 canvas; Black: near-black. -->
+    <color name="color_dracula_container">#44355E</color>
+    <color name="color_dracula_surface_variant">#3C3F52</color>
+    <color name="color_dracula_outline">#6272A4</color>
+    <color name="color_ng_black_container">#383838</color>
+    <color name="color_ng_black_surface_variant">#2E2E2E</color>
+
     <!-- 路由规则类型颜色（日间）-->
     <color name="color_route_block">#E53935</color>   <!-- 屏蔽：红色 -->
     <color name="color_route_direct">#43A047</color>  <!-- 直连：绿色 -->
@@ -323,6 +336,10 @@
     <!-- 卡片默认细边框：约 12% 黑（低对比分隔线），夜间见 values-night/colors.xml -->
     <color name="card_stroke">#1F000000</color>
 
+    <!-- M3 colorOutline: neutral mid-gray for borders/dividers on light surfaces.
+         Night equivalent in values-night/colors.xml. -->
+    <color name="m3_outline">#79747E</color>
+
     <!-- Elevated-card tonal surface colors (light: white base + ~8% primary tint);
          see values-night/colors.xml for the dark equivalents. -->
     <color name="card_elevated_pink">#FDEDF3</color>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index f0e4e8c83..793bc7eaa 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,7 +1,11 @@
 <resources>
-    <!-- Base application theme. -->
-    <style name="Theme.SagerNet" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-        <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
+    <!-- Base application theme. Migrated to Material 3 while keeping the app's
+         hand-picked legacy palettes. Components that need legacy behavior get
+         explicit SagerNet widget styles instead of relying on generated M3 tones. -->
+    <style name="Theme.SagerNet" parent="Theme.Material3.DayNight.NoActionBar">
+        <item name="actionBarStyle">@style/Widget.Material3.ActionBar.Solid</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar</item>
+        <item name="floatingActionButtonStyle">@style/Widget.SagerNet.FloatingActionButton</item>
         <!-- Protocol/type label color; defaults to accent, Dracula overrides green. -->
         <item name="protocolColor">?attr/accentOrTextSecondary</item>
         <!-- Per-theme semantic colors; default to primary text (no visible change),
@@ -28,11 +32,32 @@
         <item name="colorPrimary">@color/material_pink_500</item>
         <item name="colorPrimaryDark">@color/material_pink_700</item>
         <item name="colorAccent">@color/material_pink_accent_200</item>
+        <item name="colorOnPrimary">@color/white</item>
 
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
 
+        <!-- Material 3 color roles. Derived from each theme's own palette so the
+             hand-picked themes keep their look while M3 widgets (Chip, FilledButton,
+             Cards, NavigationView, dialogs) resolve a real role instead of falling
+             back to the library's generated grayscale tones. Special themes
+             (Dracula, Black, black-on-light accents) override these explicitly. -->
+        <item name="colorPrimaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnPrimaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorSecondary">?colorAccent</item>
+        <item name="colorOnSecondary">?attr/colorOnPrimary</item>
+        <item name="colorSecondaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnSecondaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorTertiary">?colorAccent</item>
+        <item name="colorOnTertiary">?attr/colorOnPrimary</item>
+        <item name="colorTertiaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnTertiaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorSurfaceVariant">?attr/colorSurface</item>
+        <item name="colorOnSurfaceVariant">?android:attr/textColorSecondary</item>
+        <item name="colorOutline">@color/m3_outline</item>
+        <item name="colorOutlineVariant">@color/card_stroke</item>
+
         <item name="accentOrTextSecondary">?colorAccent</item>
         <item name="accentOrTextPrimary">?colorAccent</item>
         <item name="primaryOrTextSecondary">?colorPrimary</item>
@@ -53,10 +78,10 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
 
-        <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Choice.SagerNet</item>
+        <item name="chipStyle">@style/Widget.SagerNet.Chip.Choice</item>
 
         <item name="itemShapeAppearance">
-            @style/ShapeAppearance.MaterialComponents.MediumComponent
+            @style/ShapeAppearance.Material3.MediumComponent
         </item>
 
         <item name="alertDialogTheme">
@@ -64,7 +89,7 @@
         </item>
 
         <item name="materialAlertDialogTheme">
-            @style/ThemeOverlay.MaterialComponents.MaterialAlertDialog.SagerNet
+            @style/ThemeOverlay.SagerNet.MaterialAlertDialog
         </item>
 
         <item name="materialCardViewStyle">@style/Widget.SagerNet.CardView</item>
@@ -76,8 +101,10 @@
 
     </style>
 
-    <style name="Theme.SagerNet.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
-        <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
+    <style name="Theme.SagerNet.Dialog" parent="Theme.Material3.DayNight.Dialog.Alert">
+        <item name="actionBarStyle">@style/Widget.Material3.ActionBar.Solid</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar</item>
+        <item name="floatingActionButtonStyle">@style/Widget.SagerNet.FloatingActionButton</item>
         <item name="protocolColor">?attr/accentOrTextSecondary</item>
         <item name="profileNameColor">?android:attr/textColorPrimary</item>
         <item name="statusConnectedColor">?attr/colorOnPrimary</item>
@@ -97,11 +124,32 @@
         <item name="colorPrimary">@color/material_pink_500</item>
         <item name="colorPrimaryDark">@color/material_pink_700</item>
         <item name="colorAccent">@color/material_pink_accent_200</item>
+        <item name="colorOnPrimary">@color/white</item>
 
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
 
+        <!-- Material 3 color roles. Derived from each theme's own palette so the
+             hand-picked themes keep their look while M3 widgets (Chip, FilledButton,
+             Cards, NavigationView, dialogs) resolve a real role instead of falling
+             back to the library's generated grayscale tones. Special themes
+             (Dracula, Black, black-on-light accents) override these explicitly. -->
+        <item name="colorPrimaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnPrimaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorSecondary">?colorAccent</item>
+        <item name="colorOnSecondary">?attr/colorOnPrimary</item>
+        <item name="colorSecondaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnSecondaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorTertiary">?colorAccent</item>
+        <item name="colorOnTertiary">?attr/colorOnPrimary</item>
+        <item name="colorTertiaryContainer">?attr/colorMaterial100</item>
+        <item name="colorOnTertiaryContainer">?android:attr/textColorPrimary</item>
+        <item name="colorSurfaceVariant">?attr/colorSurface</item>
+        <item name="colorOnSurfaceVariant">?android:attr/textColorSecondary</item>
+        <item name="colorOutline">@color/m3_outline</item>
+        <item name="colorOutlineVariant">@color/card_stroke</item>
+
         <item name="accentOrTextSecondary">?colorAccent</item>
         <item name="accentOrTextPrimary">?colorAccent</item>
         <item name="primaryOrTextSecondary">?colorPrimary</item>
@@ -122,10 +170,10 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
 
-        <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Choice.SagerNet</item>
+        <item name="chipStyle">@style/Widget.SagerNet.Chip.Choice</item>
 
         <item name="itemShapeAppearance">
-            @style/ShapeAppearance.MaterialComponents.MediumComponent
+            @style/ShapeAppearance.Material3.MediumComponent
         </item>
 
         <item name="alertDialogTheme">
@@ -133,7 +181,7 @@
         </item>
 
         <item name="materialAlertDialogTheme">
-            @style/ThemeOverlay.MaterialComponents.MaterialAlertDialog.SagerNet
+            @style/ThemeOverlay.SagerNet.MaterialAlertDialog
         </item>
 
         <item name="materialCardViewStyle">@style/Widget.SagerNet.CardView</item>
@@ -154,28 +202,28 @@
         <item name="android:textStyle">bold</item>
     </style>
 
-    <style name="ThemeOverlay.MaterialComponents.MaterialAlertDialog.SagerNet">
+    <style name="ThemeOverlay.SagerNet.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
         <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.SagerNet.Dialog</item>
         <item name="buttonBarPositiveButtonStyle">
-            @style/Widget.MaterialComponents.Button.TextButton.Dialog.Primary
+            @style/Widget.SagerNet.Button.TextButton.Dialog
         </item>
         <item name="buttonBarNegativeButtonStyle">
-            @style/Widget.MaterialComponents.Button.TextButton.Dialog.Primary
+            @style/Widget.SagerNet.Button.TextButton.Dialog
         </item>
         <item name="buttonBarNeutralButtonStyle">
-            @style/Widget.MaterialComponents.Button.TextButton.Dialog.Flush.Primary
+            @style/Widget.SagerNet.Button.TextButton.Dialog.Flush
         </item>
     </style>
 
-    <style name="Widget.MaterialComponents.Button.TextButton.Dialog.Primary">
+    <style name="Widget.SagerNet.Button.TextButton.Dialog" parent="Widget.Material3.Button.TextButton.Dialog">
         <item name="android:textColor">?primaryOrTextPrimary</item>
     </style>
 
-    <style name="Widget.MaterialComponents.Button.TextButton.Dialog.Flush.Primary">
+    <style name="Widget.SagerNet.Button.TextButton.Dialog.Flush" parent="Widget.Material3.Button.TextButton.Dialog.Flush">
         <item name="android:textColor">?primaryOrTextPrimary</item>
     </style>
 
-    <style name="Widget.MaterialComponents.Chip.Choice.SagerNet">
+    <style name="Widget.SagerNet.Chip.Choice" parent="Widget.Material3.Chip.Suggestion">
         <item name="textStartPadding">30dp</item>
         <item name="textEndPadding">30dp</item>
         <item name="chipBackgroundColor">@color/chip_background</item>
@@ -184,7 +232,24 @@
         <item name="rippleColor">@color/chip_ripple_color</item>
     </style>
 
-    <style name="Widget.SagerNet.CardView" parent="Widget.MaterialComponents.CardView">
+    <style name="Widget.SagerNet.BottomAppBar" parent="Widget.Material3.BottomAppBar">
+        <item name="backgroundTint">?attr/colorPrimary</item>
+        <item name="fabAlignmentMode">center</item>
+        <item name="fabAlignmentModeEndMargin">@null</item>
+        <item name="fabAnchorMode">cradle</item>
+        <item name="menuAlignmentMode">auto</item>
+        <item name="removeEmbeddedFabElevation">false</item>
+    </style>
+
+    <style name="Widget.SagerNet.FloatingActionButton" parent="Widget.Material3.FloatingActionButton.Primary">
+        <item name="backgroundTint">?attr/fabColorBackground</item>
+        <item name="tint">?attr/colorOnPrimary</item>
+    </style>
+
+    <!-- Use the Material 3 *Outlined* card as the base so M3's surface-tint elevation
+         overlay is not applied; the app sets its own card background/stroke colors and an
+         olive tint was bleeding through Filled cards on the custom (non-M3-role) themes. -->
+    <style name="Widget.SagerNet.CardView" parent="Widget.Material3.CardView.Outlined">
         <item name="cardElevation">0dp</item>
         <item name="cardCornerRadius">@dimen/card_corner_radius</item>
         <item name="strokeColor">@color/card_stroke</item>
@@ -208,20 +273,26 @@
         <item name="cornerFamily">rounded</item>
         <item name="cornerSize">@dimen/input_corner_radius</item>
     </style>
-    <style name="Widget.SagerNet.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
+    <style name="Widget.SagerNet.TextInputLayout" parent="Widget.Material3.TextInputLayout.OutlinedBox">
         <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.SagerNet.Input</item>
     </style>
 
+    <!-- DayNight-aware popup overlay for the MaterialToolbar overflow menu. The
+         toolbar itself uses a Dark ActionBar overlay (icons/title on the colored
+         primary bar); the overflow dropdown should follow day/night surfaces
+         instead, the M3 replacement for the old ThemeOverlay.AppCompat.DayNight. -->
+    <style name="ThemeOverlay.SagerNet.Toolbar.Popup" parent="ThemeOverlay.Material3" />
+
     <style name="PopupMenuAnimation">
         <item name="android:windowEnterAnimation">@anim/popup_enter</item>
         <item name="android:windowExitAnimation">@anim/popup_exit</item>
     </style>
 
-    <style name="Widget.SagerNet.PopupMenu" parent="Widget.MaterialComponents.PopupMenu">
+    <style name="Widget.SagerNet.PopupMenu" parent="Widget.Material3.PopupMenu">
         <item name="android:popupBackground">@drawable/bg_popup_menu</item>
         <item name="android:popupAnimationStyle">@style/PopupMenuAnimation</item>
     </style>
-    <style name="Widget.SagerNet.PopupMenu.Overflow" parent="Widget.MaterialComponents.PopupMenu.Overflow">
+    <style name="Widget.SagerNet.PopupMenu.Overflow" parent="Widget.Material3.PopupMenu.Overflow">
         <item name="android:popupBackground">@drawable/bg_popup_menu</item>
         <item name="android:popupAnimationStyle">@style/PopupMenuAnimation</item>
     </style>
@@ -233,10 +304,10 @@
         <item name="cornerSizeBottomLeft">0dp</item>
         <item name="cornerSizeBottomRight">0dp</item>
     </style>
-    <style name="Widget.SagerNet.BottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
+    <style name="Widget.SagerNet.BottomSheet" parent="Widget.Material3.BottomSheet.Modal">
         <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.SagerNet.BottomSheet</item>
     </style>
-    <style name="ThemeOverlay.SagerNet.BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
+    <style name="ThemeOverlay.SagerNet.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
         <item name="bottomSheetStyle">@style/Widget.SagerNet.BottomSheet</item>
     </style>
 
@@ -244,16 +315,16 @@
         <item name="cornerFamily">rounded</item>
         <item name="cornerSize">@dimen/button_corner_radius</item>
     </style>
-    <style name="Widget.SagerNet.Button" parent="Widget.MaterialComponents.Button">
+    <style name="Widget.SagerNet.Button" parent="Widget.Material3.Button">
         <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.SagerNet.Button</item>
     </style>
 
-    <style name="ShapeAppearance.SagerNet.NavItem" parent="ShapeAppearance.MaterialComponents.SmallComponent">
+    <style name="ShapeAppearance.SagerNet.NavItem" parent="ShapeAppearance.Material3.SmallComponent">
         <item name="cornerFamily">rounded</item>
         <item name="cornerSize">@dimen/nav_item_corner_radius</item>
     </style>
 
-    <style name="ThemeOverlay.SagerNet.AlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog.SagerNet">
+    <style name="ThemeOverlay.SagerNet.AlertDialog" parent="ThemeOverlay.SagerNet.MaterialAlertDialog">
         <item name="android:windowBackground">@drawable/bg_dialog</item>
     </style>
 
@@ -270,6 +341,7 @@
         <item name="colorPrimary">@color/material_amber_500</item>
         <item name="colorPrimaryDark">@color/material_amber_700</item>
         <item name="colorAccent">@color/material_amber_accent_200</item>
+        <item name="colorOnPrimary">@color/black</item>
         <item name="colorMaterial100">@color/material_amber_100</item>
         <item name="colorMaterial300">@color/material_amber_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_amber</item>
@@ -378,6 +450,7 @@
         <item name="colorPrimary">@color/material_lime_500</item>
         <item name="colorPrimaryDark">@color/material_lime_700</item>
         <item name="colorAccent">@color/material_lime_accent_200</item>
+        <item name="colorOnPrimary">@color/black</item>
         <item name="colorMaterial100">@color/material_lime_100</item>
         <item name="colorMaterial300">@color/material_lime_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_lime</item>
@@ -423,6 +496,7 @@
         <item name="colorPrimary">@color/material_yellow_500</item>
         <item name="colorPrimaryDark">@color/material_yellow_700</item>
         <item name="colorAccent">@color/material_yellow_accent_200</item>
+        <item name="colorOnPrimary">@color/black</item>
         <item name="colorMaterial100">@color/material_yellow_100</item>
         <item name="colorMaterial300">@color/material_yellow_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_yellow</item>
@@ -433,6 +507,7 @@
         <item name="colorPrimary">@color/material_amber_500</item>
         <item name="colorPrimaryDark">@color/material_amber_700</item>
         <item name="colorAccent">@color/material_amber_accent_200</item>
+        <item name="colorOnPrimary">@color/black</item>
         <item name="colorMaterial100">@color/material_amber_100</item>
         <item name="colorMaterial300">@color/material_amber_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_amber</item>
@@ -541,6 +616,7 @@
         <item name="colorPrimary">@color/material_lime_500</item>
         <item name="colorPrimaryDark">@color/material_lime_700</item>
         <item name="colorAccent">@color/material_lime_accent_200</item>
+        <item name="colorOnPrimary">@color/black</item>
         <item name="colorMaterial100">@color/material_lime_100</item>
         <item name="colorMaterial300">@color/material_lime_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_lime</item>
@@ -595,6 +671,7 @@
         <item name="colorPrimary">@color/material_yellow_500</item>
         <item name="colorPrimaryDark">@color/material_yellow_700</item>
         <item name="colorAccent">@color/material_yellow_accent_200</item>
+        <item name="colorOnPrimary">@color/black</item>
         <item name="colorMaterial100">@color/material_yellow_100</item>
         <item name="colorMaterial300">@color/material_yellow_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_yellow</item>
@@ -610,10 +687,17 @@
         <item name="cardElevatedSurfaceColor">@color/card_elevated_black</item>
 
         <item name="selectedColorPrimary">@color/color_ng_black_accent</item>
-        <item name="fabColorBackground">@color/color_ng_black_accent</item>
+        <item name="fabColorBackground">@color/color_ng_black_primary</item>
         <item name="itemShapeFillColor">@color/color_ng_black_accent</item>
         <item name="navSelectedColor">@color/color_ng_black_accent</item>
 
+        <!-- Keep M3 surfaces on the Black palette (no library gray fallback). -->
+        <item name="colorPrimaryContainer">@color/color_ng_black_container</item>
+        <item name="colorSecondaryContainer">@color/color_ng_black_container</item>
+        <item name="colorTertiaryContainer">@color/color_ng_black_container</item>
+        <item name="colorSurfaceVariant">@color/color_ng_black_surface_variant</item>
+        <item name="colorOutline">@color/color_ng_black_accent</item>
+
         <item name="accentOrTextSecondary">?android:textColorSecondary</item>
         <item name="accentOrTextPrimary">?android:textColorPrimary</item>
         <item name="primaryOrTextSecondary">?android:textColorSecondary</item>
@@ -663,9 +747,16 @@
         <item name="cardElevatedSurfaceColor">@color/card_elevated_black</item>
 
         <item name="selectedColorPrimary">@color/color_ng_black_accent</item>
-        <item name="fabColorBackground">@color/color_ng_black_accent</item>
+        <item name="fabColorBackground">@color/color_ng_black_primary</item>
         <item name="itemShapeFillColor">@color/color_ng_black_accent</item>
 
+        <!-- Keep M3 surfaces on the Black palette (no library gray fallback). -->
+        <item name="colorPrimaryContainer">@color/color_ng_black_container</item>
+        <item name="colorSecondaryContainer">@color/color_ng_black_container</item>
+        <item name="colorTertiaryContainer">@color/color_ng_black_container</item>
+        <item name="colorSurfaceVariant">@color/color_ng_black_surface_variant</item>
+        <item name="colorOutline">@color/color_ng_black_accent</item>
+
         <item name="accentOrTextSecondary">?android:textColorSecondary</item>
         <item name="accentOrTextPrimary">?android:textColorPrimary</item>
         <item name="primaryOrTextSecondary">?android:textColorSecondary</item>
@@ -701,7 +792,7 @@
         <item name="routeProxyColor">@color/color_dracula_cyan</item>
     </style>
 
-    <style name="Theme.Start" parent="Theme.MaterialComponents.DayNight">
+    <style name="Theme.Start" parent="Theme.Material3.DayNight">
         <item name="android:navigationBarColor">@android:color/transparent</item>
         <item name="colorPrimary">@android:color/transparent</item>
         <item name="colorPrimaryDark">@android:color/transparent</item>