From 2f1f91571e15d3f4413103cc2660c5a110430267 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:01:18 -0400
Subject: [PATCH 1/6] feat(theme): migrate to Material 3

Move the theme stack from Theme.MaterialComponents.* to Theme.Material3.*:
- base Theme.SagerNet (values + values-v26), Theme.SagerNet.Dialog, Theme.Start
- widget parents: CardView -> Material3.CardView.Filled, Button, TextInputLayout
  OutlinedBox, PopupMenu(.Overflow), BottomSheet.Modal, BottomSheetDialog overlay,
  ShapeAppearance Small/Medium. Custom style *names* are unchanged (they're identifiers).
- Material 1.12.0 accepts the existing M2 attrs (colorAccent/colorPrimaryDark/etc.),
  and the ~25 per-theme color variants + Dracula keep working.

Fix a latent crash surfaced by M3: M3 wraps a View's Context in a ContextThemeWrapper,
so  /  in StatsBar, ServiceButton and
Dialogs threw ClassCastException on launch. Added Context.unwrap<T>() (walks the
ContextWrapper.baseContext chain) and used it at those sites.

Verified on-device: app launches; main list, Settings, profile Edit + input dialog, QR
generation (MaterialAlertDialog), and the remove-confirm alert all render with no inflation
or cast crashes; lintVitalOssRelease passes.
---
 .../io/nekohasekai/sagernet/ktx/Dialogs.kt    |  2 +-
 .../java/io/nekohasekai/sagernet/ktx/Utils.kt | 15 +++++++++
 .../sagernet/widget/ServiceButton.kt          |  5 +--
 .../nekohasekai/sagernet/widget/StatsBar.kt   |  4 +--
 app/src/main/res/values-v26/themes.xml        |  4 +--
 app/src/main/res/values/themes.xml            | 31 ++++++++++---------
 6 files changed, 40 insertions(+), 21 deletions(-)

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/widget/ServiceButton.kt b/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
index 6a578a823..509841b07 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,11 @@ class ServiceButton @JvmOverloads constructor(
     private val iconConnecting by lazy {
         AnimatedState(R.drawable.ic_service_connecting) {
             hideProgress()
-            delayedAnimation = (context as LifecycleOwner).lifecycleScope.launch {
+            delayedAnimation = context.unwrap<LifecycleOwner>().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 {
+                context.unwrap<LifecycleOwner>().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/values-v26/themes.xml b/app/src/main/res/values-v26/themes.xml
index 58a704e87..9041833d1 100644
--- a/app/src/main/res/values-v26/themes.xml
+++ b/app/src/main/res/values-v26/themes.xml
@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme for API 26+ -->
-    <style name="Theme.SagerNet" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="Theme.SagerNet" parent="Theme.Material3.DayNight.NoActionBar">
         <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
         <!-- Default nav-drawer selected-item fill; satisfies the
              ?itemShapeFillColor self-reference in @color/navigation_item. -->
@@ -55,7 +55,7 @@
         <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Choice.SagerNet</item>
 
         <item name="itemShapeAppearance">
-            @style/ShapeAppearance.MaterialComponents.MediumComponent
+            @style/ShapeAppearance.Material3.MediumComponent
         </item>
 
         <item name="alertDialogTheme">
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index f0e4e8c83..70db612b0 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,6 +1,9 @@
 <resources>
-    <!-- Base application theme. -->
-    <style name="Theme.SagerNet" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <!-- Base application theme. Migrated to Material 3. M3 derives the accent/variant
+         roles from colorPrimary, but this app sets explicit per-theme palettes, so the
+         key M3 color roles are populated below and per-theme overrides follow in each
+         Theme.SagerNet.* variant. -->
+    <style name="Theme.SagerNet" parent="Theme.Material3.DayNight.NoActionBar">
         <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
         <!-- Protocol/type label color; defaults to accent, Dracula overrides green. -->
         <item name="protocolColor">?attr/accentOrTextSecondary</item>
@@ -56,7 +59,7 @@
         <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Choice.SagerNet</item>
 
         <item name="itemShapeAppearance">
-            @style/ShapeAppearance.MaterialComponents.MediumComponent
+            @style/ShapeAppearance.Material3.MediumComponent
         </item>
 
         <item name="alertDialogTheme">
@@ -76,7 +79,7 @@
 
     </style>
 
-    <style name="Theme.SagerNet.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
+    <style name="Theme.SagerNet.Dialog" parent="Theme.Material3.DayNight.Dialog.Alert">
         <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
         <item name="protocolColor">?attr/accentOrTextSecondary</item>
         <item name="profileNameColor">?android:attr/textColorPrimary</item>
@@ -125,7 +128,7 @@
         <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Choice.SagerNet</item>
 
         <item name="itemShapeAppearance">
-            @style/ShapeAppearance.MaterialComponents.MediumComponent
+            @style/ShapeAppearance.Material3.MediumComponent
         </item>
 
         <item name="alertDialogTheme">
@@ -184,7 +187,7 @@
         <item name="rippleColor">@color/chip_ripple_color</item>
     </style>
 
-    <style name="Widget.SagerNet.CardView" parent="Widget.MaterialComponents.CardView">
+    <style name="Widget.SagerNet.CardView" parent="Widget.Material3.CardView.Filled">
         <item name="cardElevation">0dp</item>
         <item name="cardCornerRadius">@dimen/card_corner_radius</item>
         <item name="strokeColor">@color/card_stroke</item>
@@ -208,7 +211,7 @@
         <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>
 
@@ -217,11 +220,11 @@
         <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 +236,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,11 +247,11 @@
         <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>
@@ -701,7 +704,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>

From 5fe66d927d05e5ee99dc06f9a8642cc9f653e50a Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:09:37 -0400
Subject: [PATCH 2/6] review: unwrap LifecycleOwner once in ServiceButton
 (avoid double unwrap)

---
 .../java/io/nekohasekai/sagernet/widget/ServiceButton.kt     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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 509841b07..d5b69e7e2 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
@@ -67,11 +67,12 @@ class ServiceButton @JvmOverloads constructor(
     private val iconConnecting by lazy {
         AnimatedState(R.drawable.ic_service_connecting) {
             hideProgress()
-            delayedAnimation = context.unwrap<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.unwrap<LifecycleOwner>().withStarted {
+                owner.withStarted {
                     isIndeterminate = true
                     show()
                 }

From fbecb5e1e450649926a659cd2c3bb8410fe9c5a9 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:41:56 -0400
Subject: [PATCH 3/6] feat(theme): full M3 color (dynamic color + content-based
 palettes); fix invisible/untappable FAB

M3 color, to the bone:
- Apply Material 3 dynamic color in ThemedActivity. New DYNAMIC (Material You) theme
  option seeds the palette from the wallpaper on Android 12+; every other theme seeds a
  content-based M3 palette from its own colorPrimary, so all M3 roles (primaryContainer/
  surfaceVariant/outline/...) are generated correctly on all API levels without hand-
  authoring 21 palettes.
- Add DYNAMIC theme (id 24) to Theme.kt (activity + dialog mapping) and a picker swatch.

FAB fix (regressed by M3 BottomAppBar dropping the FAB cradle):
- The airplane FAB was declared BEFORE the StatsBar in the CoordinatorLayout, so the bar
  drew on top and intercepted its touches when connected (invisible + needed a swipe to
  reach). Reordered the FAB (and its progress) to draw AFTER the bar, and tint it with
  colorTertiaryContainer/onTertiaryContainer so it contrasts the colorPrimary bar.

Verified on-device: launch/connect/disconnect/reconnect clean; the FAB is visible and
disconnects on tap while connected without swiping; no crashes.
---
 .../nekohasekai/sagernet/ui/ThemedActivity.kt | 43 ++++++++++++++
 .../io/nekohasekai/sagernet/utils/Theme.kt    |  3 +
 app/src/main/res/layout/layout_main.xml       | 57 +++++++++++--------
 app/src/main/res/values/colors.xml            |  4 ++
 4 files changed, 82 insertions(+), 25 deletions(-)

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..4d9fb30ec 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
@@ -3,6 +3,7 @@ package io.nekohasekai.sagernet.ui
 import android.content.res.Configuration
 import android.os.Build
 import android.os.Bundle
+import android.util.TypedValue
 import android.widget.TextView
 import androidx.annotation.StringRes
 import androidx.appcompat.app.AppCompatActivity
@@ -12,6 +13,8 @@ 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.color.DynamicColorsOptions
 import com.google.android.material.snackbar.Snackbar
 import io.nekohasekai.sagernet.R
 import io.nekohasekai.sagernet.database.DataStore
@@ -33,6 +36,13 @@ abstract class ThemedActivity : AppCompatActivity {
         }
         Theme.applyNightTheme()
 
+        // Material 3 "to the bone": derive a full, correct M3 tonal palette for the active
+        // theme. When the user picks the Dynamic (Material You) theme on Android 12+, seed
+        // from the system wallpaper; otherwise seed from the selected theme's colorPrimary so
+        // every theme (and pre-12 device) gets proper M3 roles (container/surface-variant/
+        // outline/...) generated from its seed instead of hand-authored values.
+        if (!isDialog) applyDynamicColors()
+
         super.onCreate(savedInstanceState)
 
         uiMode = resources.configuration.uiMode
@@ -63,6 +73,39 @@ abstract class ThemedActivity : AppCompatActivity {
         themeResId = resId
     }
 
+    /**
+     * Apply Material 3 dynamic colors. For the Dynamic (Material You) theme on Android 12+ the
+     * palette comes from the system wallpaper; for every other theme we seed a content-based
+     * palette from the theme's own colorPrimary so all M3 roles are generated correctly
+     * (works on all API levels, no hand-authored per-theme palettes).
+     */
+    private fun applyDynamicColors() {
+        if (DataStore.appTheme == Theme.DYNAMIC) {
+            // Wallpaper-based; only takes effect on Android 12+, otherwise a no-op and the
+            // base theme's colors stand.
+            DynamicColors.applyToActivityIfAvailable(this)
+            return
+        }
+        val seed = resolveColorAttr(com.google.android.material.R.attr.colorPrimary)
+        if (seed == 0) return
+        DynamicColors.applyToActivityIfAvailable(
+            this,
+            DynamicColorsOptions.Builder()
+                .setContentBasedSource(seed)
+                .build()
+        )
+    }
+
+    private fun resolveColorAttr(attr: Int): Int {
+        val tv = TypedValue()
+        theme.resolveAttribute(attr, tv, true)
+        return if (tv.resourceId != 0) {
+            androidx.core.content.ContextCompat.getColor(this, tv.resourceId)
+        } else {
+            tv.data
+        }
+    }
+
     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/res/layout/layout_main.xml b/app/src/main/res/layout/layout_main.xml
index 3becd92e9..b8906667a 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"
@@ -99,6 +74,38 @@
 
         </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. (M2's BottomAppBar cut a
+             cradle hole for the FAB; M3's bar fills it, so without this the bar covered and
+             intercepted the FAB when connected.) -->
+        <!-- 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:layout_margin="16dp"
+            android:elevation="6dp"
+            android:nextFocusDown="@+id/stats"
+            app:backgroundTint="?attr/colorTertiaryContainer"
+            app:tint="?attr/colorOnTertiaryContainer"
+            app:layout_anchor="@id/stats"
+            app:layout_anchorGravity="top|end"
+            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/values/colors.xml b/app/src/main/res/values/colors.xml
index 3ddd0856b..f70dfa347 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>

From 547e891888c474b0cedb2500218899486f31962b Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Sun, 21 Jun 2026 16:45:02 -0400
Subject: [PATCH 4/6] fix(theme): restore Material 3 FAB theming

---
 .../nekohasekai/sagernet/ui/ThemedActivity.kt | 39 ++++---------------
 app/src/main/res/layout/layout_main.xml       | 13 +++----
 app/src/main/res/values-v26/themes.xml        |  3 ++
 app/src/main/res/values/themes.xml            | 38 +++++++++++++++---
 4 files changed, 49 insertions(+), 44 deletions(-)

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 4d9fb30ec..1825b7385 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
@@ -3,7 +3,6 @@ package io.nekohasekai.sagernet.ui
 import android.content.res.Configuration
 import android.os.Build
 import android.os.Bundle
-import android.util.TypedValue
 import android.widget.TextView
 import androidx.annotation.StringRes
 import androidx.appcompat.app.AppCompatActivity
@@ -14,7 +13,6 @@ 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.color.DynamicColorsOptions
 import com.google.android.material.snackbar.Snackbar
 import io.nekohasekai.sagernet.R
 import io.nekohasekai.sagernet.database.DataStore
@@ -36,11 +34,9 @@ abstract class ThemedActivity : AppCompatActivity {
         }
         Theme.applyNightTheme()
 
-        // Material 3 "to the bone": derive a full, correct M3 tonal palette for the active
-        // theme. When the user picks the Dynamic (Material You) theme on Android 12+, seed
-        // from the system wallpaper; otherwise seed from the selected theme's colorPrimary so
-        // every theme (and pre-12 device) gets proper M3 roles (container/surface-variant/
-        // outline/...) generated from its seed instead of hand-authored values.
+        // 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)
@@ -74,35 +70,14 @@ abstract class ThemedActivity : AppCompatActivity {
     }
 
     /**
-     * Apply Material 3 dynamic colors. For the Dynamic (Material You) theme on Android 12+ the
-     * palette comes from the system wallpaper; for every other theme we seed a content-based
-     * palette from the theme's own colorPrimary so all M3 roles are generated correctly
-     * (works on all API levels, no hand-authored per-theme palettes).
+     * 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) {
-            // Wallpaper-based; only takes effect on Android 12+, otherwise a no-op and the
-            // base theme's colors stand.
             DynamicColors.applyToActivityIfAvailable(this)
-            return
-        }
-        val seed = resolveColorAttr(com.google.android.material.R.attr.colorPrimary)
-        if (seed == 0) return
-        DynamicColors.applyToActivityIfAvailable(
-            this,
-            DynamicColorsOptions.Builder()
-                .setContentBasedSource(seed)
-                .build()
-        )
-    }
-
-    private fun resolveColorAttr(attr: Int): Int {
-        val tv = TypedValue()
-        theme.resolveAttribute(attr, tv, true)
-        return if (tv.resourceId != 0) {
-            androidx.core.content.ContextCompat.getColor(this, tv.resourceId)
-        } else {
-            tv.data
         }
     }
 
diff --git a/app/src/main/res/layout/layout_main.xml b/app/src/main/res/layout/layout_main.xml
index b8906667a..c7eaaa930 100644
--- a/app/src/main/res/layout/layout_main.xml
+++ b/app/src/main/res/layout/layout_main.xml
@@ -27,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">
 
@@ -75,9 +77,8 @@
         </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. (M2's BottomAppBar cut a
-             cradle hole for the FAB; M3's bar fills it, so without this the bar covered and
-             intercepted the FAB when connected.) -->
+             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"
@@ -96,13 +97,11 @@
             android:id="@+id/fab"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_margin="16dp"
             android:elevation="6dp"
             android:nextFocusDown="@+id/stats"
-            app:backgroundTint="?attr/colorTertiaryContainer"
-            app:tint="?attr/colorOnTertiaryContainer"
+            app:backgroundTint="?attr/fabColorBackground"
+            app:tint="?attr/fabStoppedColor"
             app:layout_anchor="@id/stats"
-            app:layout_anchorGravity="top|end"
             app:pressedTranslationZ="6dp"
             app:srcCompat="@drawable/ic_service_idle" />
 
diff --git a/app/src/main/res/values-v26/themes.xml b/app/src/main/res/values-v26/themes.xml
index 9041833d1..24f759eea 100644
--- a/app/src/main/res/values-v26/themes.xml
+++ b/app/src/main/res/values-v26/themes.xml
@@ -2,6 +2,8 @@
     <!-- Base application theme for API 26+ -->
     <style name="Theme.SagerNet" parent="Theme.Material3.DayNight.NoActionBar">
         <item name="actionBarStyle">@style/Widget.MaterialComponents.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,6 +28,7 @@
         <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>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 70db612b0..ad857335d 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,10 +1,11 @@
 <resources>
-    <!-- Base application theme. Migrated to Material 3. M3 derives the accent/variant
-         roles from colorPrimary, but this app sets explicit per-theme palettes, so the
-         key M3 color roles are populated below and per-theme overrides follow in each
-         Theme.SagerNet.* variant. -->
+    <!-- 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.MaterialComponents.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),
@@ -31,6 +32,7 @@
         <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>
@@ -81,6 +83,8 @@
 
     <style name="Theme.SagerNet.Dialog" parent="Theme.Material3.DayNight.Dialog.Alert">
         <item name="actionBarStyle">@style/Widget.MaterialComponents.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>
@@ -100,6 +104,7 @@
         <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>
@@ -187,7 +192,24 @@
         <item name="rippleColor">@color/chip_ripple_color</item>
     </style>
 
-    <style name="Widget.SagerNet.CardView" parent="Widget.Material3.CardView.Filled">
+    <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>
@@ -273,6 +295,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>
@@ -381,6 +404,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>
@@ -426,6 +450,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>
@@ -436,6 +461,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>
@@ -544,6 +570,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>
@@ -598,6 +625,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>

From 3287546eb243c18c42756f5cd1a2bc03ffdb4a9c Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Sun, 21 Jun 2026 16:58:52 -0400
Subject: [PATCH 5/6] fix(theme): preserve black FAB contrast

---
 app/src/main/res/values/themes.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index ad857335d..40ecaacdd 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -641,7 +641,7 @@
         <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>
 
@@ -694,7 +694,7 @@
         <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="accentOrTextSecondary">?android:textColorSecondary</item>

From 392517b8835ad05846d11e800e4f8af9641738ca Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Sun, 21 Jun 2026 18:12:32 -0400
Subject: [PATCH 6/6] feat(theme): complete Material 3 color-role migration

Finish the M3 transition started on this branch. The base theme was
already Theme.Material3.DayNight; this fills in the full M3 color-role
model and removes the remaining Material 2 widget styles, without
breaking the hand-picked themes.

Color roles:
- Add colorPrimaryContainer/onPrimaryContainer, colorSecondary(+Container),
  colorTertiary(+Container), colorSurfaceVariant/onSurfaceVariant,
  colorOutline/outlineVariant to the base theme (values, values-v26,
  values-night). Each role derives from values the theme already owns so
  the standard themes keep their look and M3 widgets stop falling back to
  the library's generated grayscale tones.
- Explicit role overrides for the special themes: Dracula (dark-canvas
  containers/surfaceVariant/outline), Black (near-black containers, no
  gray). Black-on-light accents (Yellow/Lime/Amber) keep correct contrast
  via the base defaults.
- New colors: m3_outline (light + night), Dracula and Black container/
  surface-variant/outline swatches.

Widgets (Material 2 -> Material 3):
- themes.xml: Chip.Choice -> Widget.Material3.Chip.Suggestion;
  MaterialAlertDialog overlay -> ThemeOverlay.Material3.MaterialAlertDialog;
  dialog TextButtons -> Widget.Material3.Button.TextButton.Dialog(.Flush);
  ActionBar.Solid -> Widget.Material3.ActionBar.Solid; add a DayNight-aware
  toolbar popup overlay.
- 6 layouts: Chip.Filter, borderless buttons, and AppCompat/
  MaterialComponents popup overlays -> their Material 3 equivalents.

Verified on Android across the standard themes plus Dracula, Black, the
black-on-light accents, and Dynamic, in light and dark, covering the
profile list, nav drawer, settings, switches, cards, FAB, and the
theme-picker dialog. No regressions beyond the intended slight M3
container/outline tones on selected cards.
---
 app/src/main/res/layout/layout_app_list.xml   |  4 +-
 app/src/main/res/layout/layout_appbar.xml     |  2 +-
 app/src/main/res/layout/layout_apps.xml       |  4 +-
 app/src/main/res/layout/layout_network.xml    |  2 +-
 app/src/main/res/layout/layout_stun.xml       |  2 +-
 .../res/layout/layout_webdav_settings.xml     |  4 +-
 app/src/main/res/values-night/colors.xml      |  5 ++
 app/src/main/res/values-night/themes.xml      | 21 +++++
 app/src/main/res/values-v26/themes.xml        | 25 +++++-
 app/src/main/res/values/colors.xml            | 13 +++
 app/src/main/res/values/themes.xml            | 88 ++++++++++++++++---
 11 files changed, 144 insertions(+), 26 deletions(-)

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_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 24f759eea..895cc4c39 100644
--- a/app/src/main/res/values-v26/themes.xml
+++ b/app/src/main/res/values-v26/themes.xml
@@ -1,7 +1,7 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme for API 26+ -->
     <style name="Theme.SagerNet" parent="Theme.Material3.DayNight.NoActionBar">
-        <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
+        <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
@@ -35,6 +35,25 @@
 
         <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>
@@ -55,7 +74,7 @@
         <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.Material3.MediumComponent
@@ -66,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 f70dfa347..926a2500f 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -316,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>  <!-- 直连：绿色 -->
@@ -327,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 40ecaacdd..793bc7eaa 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -3,7 +3,7 @@
          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.MaterialComponents.ActionBar.Solid</item>
+        <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. -->
@@ -38,6 +38,26 @@
         <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>
@@ -58,7 +78,7 @@
         <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.Material3.MediumComponent
@@ -69,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>
@@ -82,7 +102,7 @@
     </style>
 
     <style name="Theme.SagerNet.Dialog" parent="Theme.Material3.DayNight.Dialog.Alert">
-        <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
+        <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>
@@ -110,6 +130,26 @@
         <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>
@@ -130,7 +170,7 @@
         <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.Material3.MediumComponent
@@ -141,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>
@@ -162,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>
@@ -237,6 +277,12 @@
         <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>
@@ -278,7 +324,7 @@
         <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>
 
@@ -645,6 +691,13 @@
         <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>
@@ -697,6 +750,13 @@
         <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>