From 762083f78cae17aaa2e8677822d2fbd7a7cdc71b Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 14:16:39 -0400
Subject: [PATCH 01/15] Add two-tier theme picker (modern named list + Classic
 colors grid)

Replace the single color-swatch grid with a ThemePickerPreference that
opens a modern named list of full-fledged Material 3 themes (preview
swatch + name), with a trailing 'Classic colors...' row that opens the
original swatch grid for the legacy single-accent palettes.

- New ThemePickerPreference supersedes ColorPickerPreference (removed).
- Theme.MODERN_THEMES declarative catalog (Dynamic for now); legacy
  grid skips any id present in the modern list so there's no duplication.
- Persistence unchanged: same appTheme int key, same persist-then-notify
  ordering, so theme apply/recreate behavior is identical.

No theme behavior changes; this is an isolated picker refactor.
---
 .../sagernet/ui/SettingsPreferenceFragment.kt |   2 +-
 .../io/nekohasekai/sagernet/utils/Theme.kt    |  18 ++
 .../matsuri/nb4a/ui/ColorPickerPreference.kt  | 118 ---------
 .../matsuri/nb4a/ui/ThemePickerPreference.kt  | 225 ++++++++++++++++++
 app/src/main/res/values/strings.xml           |   2 +
 app/src/main/res/xml/global_preferences.xml   |   2 +-
 6 files changed, 247 insertions(+), 120 deletions(-)
 delete mode 100644 app/src/main/java/moe/matsuri/nb4a/ui/ColorPickerPreference.kt
 create mode 100644 app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt

diff --git a/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt b/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt
index e245e658e..d54b10878 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt
@@ -64,7 +64,7 @@ class SettingsPreferenceFragment : PreferenceFragmentCompat() {
         DataStore.initGlobal()
         addPreferencesFromResource(R.xml.global_preferences)
 
-        val appTheme = findPreference<ColorPickerPreference>(Key.APP_THEME)!!
+        val appTheme = findPreference<ThemePickerPreference>(Key.APP_THEME)!!
         val nightTheme = findPreference<SimpleMenuPreference>(Key.NIGHT_THEME)!!
         appTheme.setOnPreferenceChangeListener { _, newTheme ->
             if (DataStore.serviceState.started) {
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 2e228a58c..9880e556a 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
@@ -36,6 +36,24 @@ object Theme {
 
     private fun defaultTheme() = PINK_SSR
 
+    /**
+     * Metadata for a theme shown in the modern named picker.
+     *
+     * @param id          one of the Theme int constants above (persisted to appTheme)
+     * @param nameRes     display name string resource
+     * @param previewColor color resource for the preview swatch shown next to the name
+     */
+    data class ThemeInfo(val id: Int, val nameRes: Int, val previewColor: Int)
+
+    /**
+     * Modern, full-fledged M3 themes presented by name in the picker dialog.
+     * The legacy single-accent palettes stay behind the "Classic colors…" grid.
+     * Order here is the display order in the dialog.
+     */
+    val MODERN_THEMES: List<ThemeInfo> = listOf(
+        ThemeInfo(DYNAMIC, R.string.theme_dynamic, R.color.color_dynamic_swatch),
+    )
+
     fun apply(context: Context) {
         context.setTheme(getTheme())
     }
diff --git a/app/src/main/java/moe/matsuri/nb4a/ui/ColorPickerPreference.kt b/app/src/main/java/moe/matsuri/nb4a/ui/ColorPickerPreference.kt
deleted file mode 100644
index da87e9c24..000000000
--- a/app/src/main/java/moe/matsuri/nb4a/ui/ColorPickerPreference.kt
+++ /dev/null
@@ -1,118 +0,0 @@
-package moe.matsuri.nb4a.ui
-
-import android.content.Context
-import android.content.res.Resources
-import android.graphics.drawable.Drawable
-import android.util.AttributeSet
-import android.view.Gravity
-import android.view.View
-import android.view.ViewGroup
-import android.widget.GridLayout
-import android.widget.ImageView
-import android.widget.LinearLayout
-import androidx.appcompat.app.AlertDialog
-import androidx.core.content.res.ResourcesCompat
-import androidx.core.content.res.TypedArrayUtils
-import androidx.core.graphics.drawable.DrawableCompat
-import androidx.core.view.setPadding
-import androidx.preference.Preference
-import androidx.preference.PreferenceViewHolder
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
-import io.nekohasekai.sagernet.R
-import io.nekohasekai.sagernet.ktx.getColorAttr
-import kotlin.math.roundToInt
-
-class ColorPickerPreference
-@JvmOverloads constructor(
-    context: Context, attrs: AttributeSet? = null, defStyle: Int = TypedArrayUtils.getAttr(
-        context,
-        androidx.preference.R.attr.editTextPreferenceStyle,
-        android.R.attr.editTextPreferenceStyle
-    )
-) : Preference(
-    context, attrs, defStyle
-) {
-
-    var inited = false
-
-    override fun onBindViewHolder(holder: PreferenceViewHolder) {
-        super.onBindViewHolder(holder)
-
-        val widgetFrame = holder.findViewById(android.R.id.widget_frame) as LinearLayout
-
-        if (!inited) {
-            inited = true
-
-            widgetFrame.addView(
-                getNekoImageViewAtColor(
-                    context.getColorAttr(R.attr.colorPrimary),
-                    48,
-                    0
-                )
-            )
-            widgetFrame.visibility = View.VISIBLE
-        }
-    }
-
-    fun getNekoImageViewAtColor(color: Int, sizeDp: Int, paddingDp: Int): ImageView {
-        // dp to pixel
-        val factor = context.resources.displayMetrics.density
-        val size = (sizeDp * factor).roundToInt()
-        val paddingSize = (paddingDp * factor).roundToInt()
-
-        return ImageView(context).apply {
-            layoutParams = ViewGroup.LayoutParams(size, size)
-            setPadding(paddingSize)
-            setImageDrawable(getNekoAtColor(resources, color))
-        }
-    }
-
-    fun getNekoAtColor(res: Resources, color: Int): Drawable {
-        val neko = ResourcesCompat.getDrawable(
-            res,
-            R.drawable.ic_baseline_fiber_manual_record_24,
-            null
-        )!!
-        DrawableCompat.setTint(neko.mutate(), color)
-        return neko
-    }
-
-    override fun onClick() {
-        super.onClick()
-
-        lateinit var dialog: AlertDialog
-
-        val grid = GridLayout(context).apply {
-            columnCount = 4
-
-            val colors = context.resources.getIntArray(R.array.material_colors)
-            var i = 0
-
-            for (color in colors) {
-                i++ //Theme.kt
-
-                val themeId = i
-                val view = getNekoImageViewAtColor(color, 64, 0).apply {
-                    setOnClickListener {
-                        persistInt(themeId)
-                        dialog.dismiss()
-                        callChangeListener(themeId)
-                    }
-                }
-                addView(view)
-            }
-
-        }
-
-        dialog = MaterialAlertDialogBuilder(context).setTitle(title)
-            .setView(LinearLayout(context).apply {
-                gravity = Gravity.CENTER
-                layoutParams = ViewGroup.LayoutParams(
-                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
-                )
-                addView(grid)
-            })
-            .setNegativeButton(android.R.string.cancel, null)
-            .show()
-    }
-}
diff --git a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
new file mode 100644
index 000000000..9ed695af2
--- /dev/null
+++ b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
@@ -0,0 +1,225 @@
+package moe.matsuri.nb4a.ui
+
+import android.content.Context
+import android.content.res.Resources
+import android.graphics.drawable.Drawable
+import android.util.AttributeSet
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.GridLayout
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.appcompat.app.AlertDialog
+import androidx.core.content.res.ResourcesCompat
+import androidx.core.content.res.TypedArrayUtils
+import androidx.core.graphics.drawable.DrawableCompat
+import androidx.core.view.setPadding
+import androidx.preference.Preference
+import androidx.preference.PreferenceViewHolder
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import io.nekohasekai.sagernet.R
+import io.nekohasekai.sagernet.ktx.getColorAttr
+import io.nekohasekai.sagernet.utils.Theme
+import kotlin.math.roundToInt
+
+/**
+ * Two-tier theme picker.
+ *
+ * The preference opens a modern named list of full-fledged Material 3 themes
+ * (each row: preview swatch + name). A trailing "Classic colors…" row opens the
+ * legacy single-accent color grid (the original swatch-grid UX).
+ *
+ * Both paths persist the same int [Theme] id via [persistInt] so the rest of the
+ * app (Theme.getTheme / DataStore.appTheme) is unchanged.
+ */
+class ThemePickerPreference
+@JvmOverloads constructor(
+    context: Context, attrs: AttributeSet? = null, defStyle: Int = TypedArrayUtils.getAttr(
+        context,
+        androidx.preference.R.attr.editTextPreferenceStyle,
+        android.R.attr.editTextPreferenceStyle
+    )
+) : Preference(
+    context, attrs, defStyle
+) {
+
+    private var inited = false
+
+    override fun onBindViewHolder(holder: PreferenceViewHolder) {
+        super.onBindViewHolder(holder)
+
+        val widgetFrame = holder.findViewById(android.R.id.widget_frame) as LinearLayout
+
+        if (!inited) {
+            inited = true
+            widgetFrame.addView(
+                nekoImageView(context.getColorAttr(R.attr.colorPrimary), 48, 0)
+            )
+            widgetFrame.visibility = View.VISIBLE
+        }
+    }
+
+    private fun nekoImageView(color: Int, sizeDp: Int, paddingDp: Int): ImageView {
+        val factor = context.resources.displayMetrics.density
+        val size = (sizeDp * factor).roundToInt()
+        val paddingSize = (paddingDp * factor).roundToInt()
+
+        return ImageView(context).apply {
+            layoutParams = ViewGroup.LayoutParams(size, size)
+            setPadding(paddingSize)
+            setImageDrawable(nekoAtColor(resources, color))
+        }
+    }
+
+    private fun nekoAtColor(res: Resources, color: Int): Drawable {
+        val neko = ResourcesCompat.getDrawable(
+            res, R.drawable.ic_baseline_fiber_manual_record_24, null
+        )!!
+        DrawableCompat.setTint(neko.mutate(), color)
+        return neko
+    }
+
+    private fun dp(value: Int): Int =
+        (value * context.resources.displayMetrics.density).roundToInt()
+
+    override fun onClick() {
+        super.onClick()
+        showModernDialog()
+    }
+
+    /** Modern named list: one row per [Theme.MODERN_THEMES] entry + a "Classic colors…" row. */
+    private fun showModernDialog() {
+        lateinit var dialog: AlertDialog
+
+        val container = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            setPadding(dp(8), dp(8), dp(8), dp(8))
+        }
+
+        for (info in Theme.MODERN_THEMES) {
+            container.addView(
+                buildRow(
+                    name = context.getString(info.nameRes),
+                    swatchColor = ResourcesCompat.getColor(context.resources, info.previewColor, context.theme),
+                ) {
+                    select(info.id)
+                    dialog.dismiss()
+                }
+            )
+        }
+
+        // Trailing entry: open the legacy single-accent color grid.
+        container.addView(
+            buildRow(
+                name = context.getString(R.string.theme_classic_colors),
+                swatchColor = null,
+                icon = R.drawable.ic_baseline_color_lens_24,
+            ) {
+                dialog.dismiss()
+                showClassicGrid()
+            }
+        )
+
+        dialog = MaterialAlertDialogBuilder(context)
+            .setTitle(title)
+            .setView(container)
+            .setNegativeButton(android.R.string.cancel, null)
+            .show()
+    }
+
+    private fun buildRow(
+        name: String,
+        swatchColor: Int?,
+        icon: Int? = null,
+        onClick: () -> Unit,
+    ): View {
+        return LinearLayout(context).apply {
+            orientation = LinearLayout.HORIZONTAL
+            gravity = Gravity.CENTER_VERTICAL
+            isClickable = true
+            isFocusable = true
+            setPadding(dp(16), dp(14), dp(16), dp(14))
+            // Selectable item background for ripple feedback.
+            val outValue = android.util.TypedValue()
+            context.theme.resolveAttribute(
+                android.R.attr.selectableItemBackground, outValue, true
+            )
+            setBackgroundResource(outValue.resourceId)
+
+            val leading = when {
+                swatchColor != null -> nekoImageView(swatchColor, 28, 0)
+                icon != null -> ImageView(context).apply {
+                    layoutParams = ViewGroup.LayoutParams(dp(28), dp(28))
+                    setImageDrawable(
+                        ResourcesCompat.getDrawable(resources, icon, context.theme)?.also {
+                            DrawableCompat.setTint(
+                                it.mutate(), context.getColorAttr(android.R.attr.textColorPrimary)
+                            )
+                        }
+                    )
+                }
+                else -> View(context).apply {
+                    layoutParams = ViewGroup.LayoutParams(dp(28), dp(28))
+                }
+            }
+            addView(leading)
+
+            addView(TextView(context).apply {
+                text = name
+                setPadding(dp(16), 0, 0, 0)
+                textSize = 16f
+                setTextColor(context.getColorAttr(android.R.attr.textColorPrimary))
+                layoutParams = LinearLayout.LayoutParams(
+                    0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f
+                )
+            })
+
+            setOnClickListener { onClick() }
+        }
+    }
+
+    /** Legacy single-accent color grid (the original swatch-grid UX). */
+    private fun showClassicGrid() {
+        lateinit var dialog: AlertDialog
+
+        val grid = GridLayout(context).apply {
+            columnCount = 4
+
+            val colors = context.resources.getIntArray(R.array.material_colors)
+            for ((index, color) in colors.withIndex()) {
+                // Swatch index+1 is the Theme id (see Theme.kt). Skip themes that
+                // are presented in the modern named list instead of the grid.
+                val themeId = index + 1
+                if (Theme.MODERN_THEMES.any { it.id == themeId }) continue
+
+                addView(nekoImageView(color, 64, 0).apply {
+                    setOnClickListener {
+                        select(themeId)
+                        dialog.dismiss()
+                    }
+                })
+            }
+        }
+
+        dialog = MaterialAlertDialogBuilder(context)
+            .setTitle(R.string.theme_classic_colors)
+            .setView(LinearLayout(context).apply {
+                gravity = Gravity.CENTER
+                layoutParams = ViewGroup.LayoutParams(
+                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
+                )
+                addView(grid)
+            })
+            .setNegativeButton(android.R.string.cancel, null)
+            .show()
+    }
+
+    private fun select(themeId: Int) {
+        // Match the legacy swatch-grid ordering: persist first, then notify the
+        // change listener (SettingsPreferenceFragment applies/recreates).
+        persistInt(themeId)
+        callChangeListener(themeId)
+    }
+}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index bedec5863..d3df83dcf 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -14,6 +14,8 @@
     <string name="menu_group">Group</string>
     <string name="menu_about">About</string>
     <string name="theme">Theme</string>
+    <string name="theme_dynamic">Dynamic (Material You)</string>
+    <string name="theme_classic_colors">Classic colors…</string>
     <string name="document">Document</string>
     <string name="group_default">Ungrouped</string>
     <string name="quick_toggle">Toggle</string>
diff --git a/app/src/main/res/xml/global_preferences.xml b/app/src/main/res/xml/global_preferences.xml
index bd9d9e463..87d9320fc 100644
--- a/app/src/main/res/xml/global_preferences.xml
+++ b/app/src/main/res/xml/global_preferences.xml
@@ -8,7 +8,7 @@
             app:key="isAutoConnect"
             app:summary="@string/auto_connect_summary"
             app:title="@string/auto_connect" />
-        <moe.matsuri.nb4a.ui.ColorPickerPreference
+        <moe.matsuri.nb4a.ui.ThemePickerPreference
             android:title="@string/theme"
             app:icon="@drawable/ic_baseline_color_lens_24"
             app:key="appTheme" />

From fa9a271d8e2f8775c8b7ee9c43491d4fa93b507b Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 14:22:45 -0400
Subject: [PATCH 02/15] Harden theme picker: null-safe widget cast +
 accessibility

Address CodeRabbit findings:
- Use safe cast (as?) with early return for the widget_frame lookup.
- Add contentDescription to modern list rows (theme name) and classic
  grid swatches (Color theme %d) for screen-reader support.
---
 .../main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt | 7 ++++++-
 app/src/main/res/values/strings.xml                        | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
index 9ed695af2..832cf3444 100644
--- a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
+++ b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
@@ -50,7 +50,8 @@ class ThemePickerPreference
     override fun onBindViewHolder(holder: PreferenceViewHolder) {
         super.onBindViewHolder(holder)
 
-        val widgetFrame = holder.findViewById(android.R.id.widget_frame) as LinearLayout
+        val widgetFrame = holder.findViewById(android.R.id.widget_frame) as? LinearLayout
+            ?: return
 
         if (!inited) {
             inited = true
@@ -147,6 +148,8 @@ class ThemePickerPreference
                 android.R.attr.selectableItemBackground, outValue, true
             )
             setBackgroundResource(outValue.resourceId)
+            // Announce the theme name to screen readers when the row is focused.
+            contentDescription = name
 
             val leading = when {
                 swatchColor != null -> nekoImageView(swatchColor, 28, 0)
@@ -195,6 +198,8 @@ class ThemePickerPreference
                 if (Theme.MODERN_THEMES.any { it.id == themeId }) continue
 
                 addView(nekoImageView(color, 64, 0).apply {
+                    contentDescription =
+                        context.getString(R.string.theme_classic_color_swatch, themeId)
                     setOnClickListener {
                         select(themeId)
                         dialog.dismiss()
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index d3df83dcf..17b3f047e 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -16,6 +16,7 @@
     <string name="theme">Theme</string>
     <string name="theme_dynamic">Dynamic (Material You)</string>
     <string name="theme_classic_colors">Classic colors…</string>
+    <string name="theme_classic_color_swatch">Color theme %1$d</string>
     <string name="document">Document</string>
     <string name="group_default">Ungrouped</string>
     <string name="quick_toggle">Toggle</string>

From 37661e190d39e4003add5f033d1abfe65b9eacd6 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 14:31:24 -0400
Subject: [PATCH 03/15] Theme picker: scrollable modern list + robust swatch
 binding

Address Greptile review:
- Wrap the modern theme list in a ScrollView so it stays usable on
  compact screens as Theme.MODERN_THEMES grows.
- Bind the preference swatch off the holder's actual view state
  (widgetFrame.childCount) instead of an instance flag, so a recycled/
  re-inflated holder still gets its swatch. Drops the unused 'inited' field.
---
 .../moe/matsuri/nb4a/ui/ThemePickerPreference.kt    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
index 832cf3444..c79cb44c2 100644
--- a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
+++ b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
@@ -10,6 +10,7 @@ import android.view.ViewGroup
 import android.widget.GridLayout
 import android.widget.ImageView
 import android.widget.LinearLayout
+import android.widget.ScrollView
 import android.widget.TextView
 import androidx.appcompat.app.AlertDialog
 import androidx.core.content.res.ResourcesCompat
@@ -45,16 +46,16 @@ class ThemePickerPreference
     context, attrs, defStyle
 ) {
 
-    private var inited = false
-
     override fun onBindViewHolder(holder: PreferenceViewHolder) {
         super.onBindViewHolder(holder)
 
         val widgetFrame = holder.findViewById(android.R.id.widget_frame) as? LinearLayout
             ?: return
 
-        if (!inited) {
-            inited = true
+        // Key off the holder's actual view state, not an instance flag: the
+        // RecyclerView can recycle/re-inflate this row's holder, in which case a
+        // stale instance flag would leave the new frame without its swatch.
+        if (widgetFrame.childCount == 0) {
             widgetFrame.addView(
                 nekoImageView(context.getColorAttr(R.attr.colorPrimary), 48, 0)
             )
@@ -125,7 +126,9 @@ class ThemePickerPreference
 
         dialog = MaterialAlertDialogBuilder(context)
             .setTitle(title)
-            .setView(container)
+            // Wrap in a ScrollView so the list stays usable on compact screens as
+            // Theme.MODERN_THEMES grows beyond the dialog's height.
+            .setView(ScrollView(context).apply { addView(container) })
             .setNegativeButton(android.R.string.cancel, null)
             .show()
     }

From 3bd385495743e67a4a9cc4e605fff950a8cc9c8f Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 14:47:15 -0400
Subject: [PATCH 04/15] Add Material 3 Dark High Contrast theme (OLED black)

A full-fledged M3 dark-only theme on a true black (#000000) canvas:
green-primary action accent (GitHub style) with a bright blue secondary
for links/selection and high-contrast near-white text.

- Theme.DARK_HIGH_CONTRAST (id 25) mapped to new Theme.SagerNet.
  DarkHighContrast styles (day declares the full dark canvas so it never
  flashes light; night repeats it as the active forced-night path).
- Full M3 role overrides: surface/background/containers, surfaceVariant,
  outline/outlineVariant, secondary/tertiary, plus status semantics
  (green/red/yellow) and route/proxy blue.
- Generalize the dark-only night-mode handling: selecting any theme in
  Theme.DARK_ONLY_THEMES (Dracula, Dark High Contrast) forces night mode
  on and restores the prior setting on exit. Storage key kept for compat.
- Surfaced by name in the modern picker list (green preview swatch);
  excluded from the classic grid.
- Picker select() now follows the standard Preference contract
  (notify-then-persist) so the fragment sees the true previous theme.
---
 .../java/io/nekohasekai/sagernet/Constants.kt |  6 +-
 .../sagernet/database/DataStore.kt            |  5 +-
 .../sagernet/ui/SettingsPreferenceFragment.kt | 19 ++--
 .../io/nekohasekai/sagernet/utils/Theme.kt    | 12 +++
 .../matsuri/nb4a/ui/ThemePickerPreference.kt  | 11 ++-
 app/src/main/res/values-night/themes.xml      | 85 +++++++++++++++++
 app/src/main/res/values/colors.xml            | 26 ++++++
 app/src/main/res/values/strings.xml           |  1 +
 app/src/main/res/values/themes.xml            | 93 +++++++++++++++++++
 9 files changed, 242 insertions(+), 16 deletions(-)

diff --git a/app/src/main/java/io/nekohasekai/sagernet/Constants.kt b/app/src/main/java/io/nekohasekai/sagernet/Constants.kt
index 44ad8071f..84f0e76fd 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/Constants.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/Constants.kt
@@ -14,8 +14,10 @@ object Key {
     const val APP_EXPERT = "isExpert"
     const val APP_THEME = "appTheme"
     const val NIGHT_THEME = "nightTheme"
-    // Remembers the user's night-mode setting before the dark-only Dracula theme
-    // forced it on, so it can be restored when switching to another theme.
+    // Remembers the user's night-mode setting before a dark-only theme (Dracula
+    // or Dark High Contrast) forced it on, so it can be restored when switching
+    // to another theme. Storage key kept as "nightThemeBeforeDracula" for
+    // backward compatibility with previously persisted values.
     const val NIGHT_THEME_BEFORE_DRACULA = "nightThemeBeforeDracula"
     const val APP_LANGUAGE = "appLanguage"
     const val SERVICE_MODE = "serviceMode"
diff --git a/app/src/main/java/io/nekohasekai/sagernet/database/DataStore.kt b/app/src/main/java/io/nekohasekai/sagernet/database/DataStore.kt
index 38b72f84f..23b822c56 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/database/DataStore.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/database/DataStore.kt
@@ -103,8 +103,9 @@ object DataStore : OnPreferenceDataStoreChangeListener {
     var isExpert by configurationStore.boolean(Key.APP_EXPERT)
     var appTheme by configurationStore.int(Key.APP_THEME)
     var nightTheme by configurationStore.stringToInt(Key.NIGHT_THEME)
-    // -1 = not set (no Dracula override active). Otherwise holds the night-mode
-    // value to restore when leaving the dark-only Dracula theme.
+    // -1 = not set (no dark-only-theme override active). Otherwise holds the
+    // night-mode value to restore when leaving a dark-only theme (Dracula or
+    // Dark High Contrast). Key name kept for backward compatibility.
     var nightThemeBeforeDracula by configurationStore.int(Key.NIGHT_THEME_BEFORE_DRACULA) { -1 }
     var appLanguage by configurationStore.string(Key.APP_LANGUAGE) { "" }
     var serviceMode by configurationStore.string(Key.SERVICE_MODE) { Key.MODE_VPN }
diff --git a/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt b/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt
index d54b10878..2251cb551 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/SettingsPreferenceFragment.kt
@@ -72,11 +72,14 @@ class SettingsPreferenceFragment : PreferenceFragmentCompat() {
             }
             val themeId = newTheme as Int
             val previousTheme = DataStore.appTheme // still the old value at this point
-            // Dracula is a dark-only theme: force night mode on so its #282a36
-            // canvas (values-night) takes effect instead of a washed-out light surface.
-            // Remember the prior night-mode setting so it can be restored on exit.
-            if (themeId == Theme.DRACULA) {
-                if (previousTheme != Theme.DRACULA && DataStore.nightTheme != 1) {
+            // Dark-only themes (Dracula, Dark High Contrast) only look right in
+            // night mode: force it on so their dark canvas (values-night) takes
+            // effect instead of a washed-out light surface. Remember the prior
+            // night-mode setting so it can be restored when leaving such a theme.
+            val enteringDarkOnly = themeId in Theme.DARK_ONLY_THEMES
+            val leavingDarkOnly = previousTheme in Theme.DARK_ONLY_THEMES
+            if (enteringDarkOnly) {
+                if (!leavingDarkOnly && DataStore.nightTheme != 1) {
                     DataStore.nightThemeBeforeDracula = DataStore.nightTheme
                     Theme.currentNightMode = 1
                     // nightTheme.value persists to configurationStore (same key as
@@ -85,8 +88,8 @@ class SettingsPreferenceFragment : PreferenceFragmentCompat() {
                     nightTheme.value = "1"
                     Theme.applyNightTheme()
                 }
-            } else if (previousTheme == Theme.DRACULA) {
-                // Leaving Dracula: restore the night-mode setting we forced on.
+            } else if (leavingDarkOnly) {
+                // Leaving a dark-only theme: restore the night-mode setting we forced on.
                 val restore = DataStore.nightThemeBeforeDracula
                 if (restore != -1) {
                     DataStore.nightThemeBeforeDracula = -1
@@ -107,7 +110,7 @@ class SettingsPreferenceFragment : PreferenceFragmentCompat() {
         nightTheme.setOnPreferenceChangeListener { _, newTheme ->
             Theme.currentNightMode = (newTheme as String).toInt()
             // A manual night-mode change takes precedence: drop any pending
-            // Dracula restore so we don't override the user's choice later.
+            // dark-only-theme restore so we don't override the user's choice later.
             DataStore.nightThemeBeforeDracula = -1
             Theme.applyNightTheme()
             true
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 9880e556a..be1ba3389 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
@@ -33,6 +33,15 @@ object Theme {
     const val VERDANT_MINT = 22
     const val DRACULA = 23
     const val DYNAMIC = 24
+    const val DARK_HIGH_CONTRAST = 25
+
+    /**
+     * Themes that only make sense in dark mode: selecting one forces night mode
+     * on so its dark canvas (values-night) takes effect, and the prior night
+     * setting is restored on exit (see SettingsPreferenceFragment). Dracula was
+     * the first such theme; Dark High Contrast (OLED black) is dark-only too.
+     */
+    val DARK_ONLY_THEMES = setOf(DRACULA, DARK_HIGH_CONTRAST)
 
     private fun defaultTheme() = PINK_SSR
 
@@ -51,6 +60,7 @@ object Theme {
      * Order here is the display order in the dialog.
      */
     val MODERN_THEMES: List<ThemeInfo> = listOf(
+        ThemeInfo(DARK_HIGH_CONTRAST, R.string.theme_dark_high_contrast, R.color.dhc_primary),
         ThemeInfo(DYNAMIC, R.string.theme_dynamic, R.color.color_dynamic_swatch),
     )
 
@@ -95,6 +105,7 @@ object Theme {
             BLACK -> R.style.Theme_SagerNet_Black
             VERDANT_MINT -> R.style.Theme_SagerNet_VerdantMint
             DRACULA -> R.style.Theme_SagerNet_Dracula
+            DARK_HIGH_CONTRAST -> R.style.Theme_SagerNet_DarkHighContrast
             DYNAMIC -> R.style.Theme_SagerNet
             else -> getTheme(defaultTheme())
         }
@@ -125,6 +136,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
+            DARK_HIGH_CONTRAST -> R.style.Theme_SagerNet_Dialog_DarkHighContrast
             DYNAMIC -> R.style.Theme_SagerNet_Dialog
             else -> getDialogTheme(defaultTheme())
         }
diff --git a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
index c79cb44c2..841a6d473 100644
--- a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
+++ b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
@@ -225,9 +225,12 @@ class ThemePickerPreference
     }
 
     private fun select(themeId: Int) {
-        // Match the legacy swatch-grid ordering: persist first, then notify the
-        // change listener (SettingsPreferenceFragment applies/recreates).
-        persistInt(themeId)
-        callChangeListener(themeId)
+        // Notify the change listener first (while DataStore.appTheme still holds the
+        // previous theme, which SettingsPreferenceFragment reads to drive dark-only
+        // night-mode handling), then persist if accepted. This is the standard
+        // Preference contract; the listener always returns true here.
+        if (callChangeListener(themeId)) {
+            persistInt(themeId)
+        }
     }
 }
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index c1abd02a6..a0080db3c 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -87,4 +87,89 @@
         <item name="statusTestingColor">@color/color_dracula_yellow</item>
         <item name="routeProxyColor">@color/color_dracula_cyan</item>
     </style>
+
+    <!-- Dark High Contrast (OLED) night variant. Night is this theme's active path
+         (it forces night mode on), so the full canvas + M3 roles are repeated here
+         to match the day style declared in values/themes.xml. -->
+    <style name="Theme.SagerNet.DarkHighContrast" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
+        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorOnPrimary">@color/dhc_on_primary</item>
+        <item name="colorMaterial100">@color/dhc_100</item>
+        <item name="colorMaterial300">@color/dhc_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_dhc</item>
+
+        <item name="colorSurface">@color/dhc_surface</item>
+        <item name="colorOnSurface">@color/dhc_on_surface</item>
+        <item name="android:colorBackground">@color/dhc_background</item>
+        <item name="colorOnBackground">@color/dhc_on_surface</item>
+        <item name="android:windowBackground">@color/dhc_background</item>
+        <item name="colorPrimaryContainer">@color/dhc_container</item>
+        <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondaryContainer">@color/dhc_container</item>
+        <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
+        <item name="colorTertiary">@color/dhc_blue</item>
+        <item name="colorTertiaryContainer">@color/dhc_container</item>
+        <item name="colorOnTertiaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSurfaceVariant">@color/dhc_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/dhc_on_surface_variant</item>
+        <item name="colorOutline">@color/dhc_outline</item>
+        <item name="colorOutlineVariant">@color/dhc_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/dhc_accent</item>
+        <item name="accentOrTextPrimary">@color/dhc_accent</item>
+        <item name="primaryOrTextSecondary">@color/dhc_primary</item>
+        <item name="primaryOrTextPrimary">@color/dhc_primary</item>
+        <item name="protocolColor">@color/dhc_green</item>
+        <item name="profileNameColor">@color/dhc_on_surface</item>
+        <item name="statusConnectedColor">@color/dhc_green</item>
+        <item name="statusStoppedColor">@color/dhc_red</item>
+        <item name="statusConnectingColor">@color/dhc_yellow</item>
+        <item name="testFailColor">@color/dhc_red</item>
+        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusTestingColor">@color/dhc_yellow</item>
+        <item name="routeProxyColor">@color/dhc_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.DarkHighContrast" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
+        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorOnPrimary">@color/dhc_on_primary</item>
+        <item name="colorMaterial100">@color/dhc_100</item>
+        <item name="colorMaterial300">@color/dhc_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_dhc</item>
+
+        <item name="colorSurface">@color/dhc_surface</item>
+        <item name="colorOnSurface">@color/dhc_on_surface</item>
+        <item name="android:colorBackground">@color/dhc_background</item>
+        <item name="colorOnBackground">@color/dhc_on_surface</item>
+        <item name="colorPrimaryContainer">@color/dhc_container</item>
+        <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondaryContainer">@color/dhc_container</item>
+        <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
+        <item name="colorTertiary">@color/dhc_blue</item>
+        <item name="colorTertiaryContainer">@color/dhc_container</item>
+        <item name="colorOnTertiaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSurfaceVariant">@color/dhc_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/dhc_on_surface_variant</item>
+        <item name="colorOutline">@color/dhc_outline</item>
+        <item name="colorOutlineVariant">@color/dhc_outline_variant</item>
+        <item name="protocolColor">@color/dhc_green</item>
+        <item name="profileNameColor">@color/dhc_on_surface</item>
+        <item name="statusConnectedColor">@color/dhc_green</item>
+        <item name="statusStoppedColor">@color/dhc_red</item>
+        <item name="statusConnectingColor">@color/dhc_yellow</item>
+        <item name="testFailColor">@color/dhc_red</item>
+        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusTestingColor">@color/dhc_yellow</item>
+        <item name="routeProxyColor">@color/dhc_blue</item>
+    </style>
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 926a2500f..16c6bf11a 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -374,4 +374,30 @@
     <color name="dracula_surface">#343746</color>
     <color name="dracula_on_surface">#F8F8F2</color>
 
+    <!-- Dark High Contrast (OLED): a full Material 3 dark-only theme on a true
+         black canvas. Green-primary (GitHub action-button style) with a bright
+         blue secondary for links/selection; maximally legible near-white text.
+         The theme forces night mode on, so the live canvas comes from
+         values-night; these base declarations exist only so resources always
+         resolve in a non-night configuration. -->
+    <color name="dhc_primary">#3FB950</color>          <!-- green action accent -->
+    <color name="dhc_primary_dark">#2EA043</color>     <!-- darker green (status bar) -->
+    <color name="dhc_on_primary">#0A0A0A</color> <!-- dark text on green -->
+    <color name="dhc_accent">#71B7FF</color>           <!-- bright blue secondary -->
+    <color name="dhc_blue">#4493F8</color>   <!-- link/route blue -->
+    <color name="dhc_background">#000000</color>       <!-- true OLED black -->
+    <color name="dhc_surface">#0D0D0D</color>
+    <color name="dhc_surface_variant">#161616</color>
+    <color name="dhc_container">#1C1C1C</color>
+    <color name="dhc_on_surface">#F0F6FC</color>      <!-- high-contrast near-white -->
+    <color name="dhc_on_surface_variant">#C9D1D9</color>
+    <color name="dhc_outline">#3D444D</color>
+    <color name="dhc_outline_variant">#21262D</color>
+    <color name="dhc_green">#3FB950</color>
+    <color name="dhc_red">#F85149</color>
+    <color name="dhc_yellow">#D29922</color>
+    <color name="dhc_100">#1C1C1C</color>            <!-- colorMaterial100 stand-in -->
+    <color name="dhc_300">#2EA043</color>            <!-- colorMaterial300 stand-in -->
+    <color name="card_elevated_dhc">#0D0D0D</color>
+
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 17b3f047e..917b33cd8 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -15,6 +15,7 @@
     <string name="menu_about">About</string>
     <string name="theme">Theme</string>
     <string name="theme_dynamic">Dynamic (Material You)</string>
+    <string name="theme_dark_high_contrast">Dark High Contrast</string>
     <string name="theme_classic_colors">Classic colors…</string>
     <string name="theme_classic_color_swatch">Color theme %1$d</string>
     <string name="document">Document</string>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 793bc7eaa..fed440270 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -738,6 +738,61 @@
         <item name="navSelectedColor">?attr/colorAccent</item>
     </style>
 
+    <!-- Dark High Contrast (OLED): full Material 3 dark-only theme on a true black
+         canvas. Green-primary action accent (GitHub style), bright blue secondary.
+         The full dark canvas is declared here too (not only values-night) so the
+         theme never flashes a light surface; selecting it also forces night mode
+         on (see SettingsPreferenceFragment). -->
+    <style name="Theme.SagerNet.DarkHighContrast" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
+        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorOnPrimary">@color/dhc_on_primary</item>
+        <item name="colorMaterial100">@color/dhc_100</item>
+        <item name="colorMaterial300">@color/dhc_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_dhc</item>
+
+        <!-- True OLED black canvas. -->
+        <item name="colorSurface">@color/dhc_surface</item>
+        <item name="colorOnSurface">@color/dhc_on_surface</item>
+        <item name="android:colorBackground">@color/dhc_background</item>
+        <item name="colorOnBackground">@color/dhc_on_surface</item>
+        <item name="android:windowBackground">@color/dhc_background</item>
+
+        <!-- M3 container/variant roles on the dark canvas. -->
+        <item name="colorPrimaryContainer">@color/dhc_container</item>
+        <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondaryContainer">@color/dhc_container</item>
+        <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
+        <item name="colorTertiary">@color/dhc_blue</item>
+        <item name="colorTertiaryContainer">@color/dhc_container</item>
+        <item name="colorOnTertiaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSurfaceVariant">@color/dhc_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/dhc_on_surface_variant</item>
+        <item name="colorOutline">@color/dhc_outline</item>
+        <item name="colorOutlineVariant">@color/dhc_outline_variant</item>
+
+        <!-- Semantic colors: green action accent reads on black, so primary text
+             accents use it; status uses GitHub-style green/red/yellow. -->
+        <item name="accentOrTextSecondary">@color/dhc_accent</item>
+        <item name="accentOrTextPrimary">@color/dhc_accent</item>
+        <item name="primaryOrTextSecondary">@color/dhc_primary</item>
+        <item name="primaryOrTextPrimary">@color/dhc_primary</item>
+        <item name="protocolColor">@color/dhc_green</item>
+        <item name="profileNameColor">@color/dhc_on_surface</item>
+        <item name="statusConnectedColor">@color/dhc_green</item>
+        <item name="statusStoppedColor">@color/dhc_red</item>
+        <item name="statusConnectingColor">@color/dhc_yellow</item>
+        <item name="testFailColor">@color/dhc_red</item>
+        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusTestingColor">@color/dhc_yellow</item>
+        <item name="routeProxyColor">@color/dhc_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
     <style name="Theme.SagerNet.Dialog.Black" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/color_ng_black_primary</item>
         <item name="colorPrimaryDark">@color/color_ng_black_primary</item>
@@ -792,6 +847,44 @@
         <item name="routeProxyColor">@color/color_dracula_cyan</item>
     </style>
 
+    <style name="Theme.SagerNet.Dialog.DarkHighContrast" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
+        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorOnPrimary">@color/dhc_on_primary</item>
+        <item name="colorMaterial100">@color/dhc_100</item>
+        <item name="colorMaterial300">@color/dhc_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_dhc</item>
+
+        <item name="colorSurface">@color/dhc_surface</item>
+        <item name="colorOnSurface">@color/dhc_on_surface</item>
+        <item name="android:colorBackground">@color/dhc_background</item>
+        <item name="colorOnBackground">@color/dhc_on_surface</item>
+        <item name="colorPrimaryContainer">@color/dhc_container</item>
+        <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondaryContainer">@color/dhc_container</item>
+        <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
+        <item name="colorTertiary">@color/dhc_blue</item>
+        <item name="colorTertiaryContainer">@color/dhc_container</item>
+        <item name="colorOnTertiaryContainer">@color/dhc_on_surface</item>
+        <item name="colorSurfaceVariant">@color/dhc_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/dhc_on_surface_variant</item>
+        <item name="colorOutline">@color/dhc_outline</item>
+        <item name="colorOutlineVariant">@color/dhc_outline_variant</item>
+        <item name="protocolColor">@color/dhc_green</item>
+        <item name="profileNameColor">@color/dhc_on_surface</item>
+        <item name="statusConnectedColor">@color/dhc_green</item>
+        <item name="statusStoppedColor">@color/dhc_red</item>
+        <item name="statusConnectingColor">@color/dhc_yellow</item>
+        <item name="testFailColor">@color/dhc_red</item>
+        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusTestingColor">@color/dhc_yellow</item>
+        <item name="routeProxyColor">@color/dhc_blue</item>
+    </style>
+
     <style name="Theme.Start" parent="Theme.Material3.DayNight">
         <item name="android:navigationBarColor">@android:color/transparent</item>
         <item name="colorPrimary">@android:color/transparent</item>

From 67636f377fcb10b5f889ca872c7f8eec7531d854 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:00:23 -0400
Subject: [PATCH 05/15] Dark High Contrast: M3 black chrome + visible connected
 FAB icon

Refine the OLED theme to match the intended high-contrast design and fix
two issues seen on-device:

- App bar / bottom status bar / status & nav bars now use the black
  surface instead of the green primary, via a new themable
  appBarBackgroundColor attr (defaults to colorPrimary, so all other
  themes are unchanged) wired into the shared appbar/toolbar/tab layouts.
  This reserves green for actions/selection and lets the blue/green/red
  status text read against black chrome (previously the cyan/blue detail
  text was washed out on the green bar).
- Fix the connect FAB airplane vanishing when connected: the green
  connected-icon tint was invisible on the green FAB. Add a dedicated
  fabConnectedColor attr (defaults to statusConnectedColor for back-compat)
  and set it to the dark on-primary color for Dark High Contrast so the
  icon stays visible, matching the stopped state.
- Black DHC bottom-bar style, dark ActionBar overlay, green tab
  selection/indicator on the OLED canvas.

Verified on Android across stopped/connected states.
---
 .../sagernet/widget/ServiceButton.kt          | 11 ++++---
 app/src/main/res/layout/layout_app_list.xml   |  4 +--
 app/src/main/res/layout/layout_appbar.xml     |  4 +--
 app/src/main/res/layout/layout_apps.xml       |  4 +--
 app/src/main/res/layout/layout_group_list.xml |  2 +-
 app/src/main/res/layout/layout_main.xml       |  2 +-
 app/src/main/res/layout/layout_tools.xml      |  2 +-
 .../res/layout/layout_webdav_settings.xml     |  2 +-
 app/src/main/res/values-night/themes.xml      |  9 ++++++
 app/src/main/res/values/attrs.xml             | 11 +++++++
 app/src/main/res/values/themes.xml            | 31 +++++++++++++++++++
 11 files changed, 68 insertions(+), 14 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 d5b69e7e2..37424aacd 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
@@ -141,11 +141,14 @@ class ServiceButton @JvmOverloads constructor(
     }
 
     private fun applyStateTint(state: BaseService.State) {
-        // Tint the connect FAB icon by state: connected=green, stopped=red. For
-        // transient states (and on non-Dracula themes) fall back to colorOnPrimary,
-        // which is the FAB's normal icon color, so those themes look unchanged.
+        // Tint the connect FAB icon by state. Connected uses fabConnectedColor
+        // (defaults to the green connected status color, but themes whose FAB
+        // background is that same green — e.g. Dark High Contrast — override it
+        // with a contrasting color so the icon stays visible). Stopped uses
+        // fabStoppedColor. Transient states fall back to colorOnPrimary, the FAB's
+        // normal icon color, so unaffected themes look unchanged.
         val attr = when (state) {
-            BaseService.State.Connected -> R.attr.statusConnectedColor
+            BaseService.State.Connected -> R.attr.fabConnectedColor
             BaseService.State.Stopped -> R.attr.fabStoppedColor
             else -> com.google.android.material.R.attr.colorOnPrimary
         }
diff --git a/app/src/main/res/layout/layout_app_list.xml b/app/src/main/res/layout/layout_app_list.xml
index 976e405c9..73b4a1633 100644
--- a/app/src/main/res/layout/layout_app_list.xml
+++ b/app/src/main/res/layout/layout_app_list.xml
@@ -11,7 +11,7 @@
         android:id="@+id/appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?attr/colorPrimary">
+        android:background="?attr/appBarBackgroundColor">
 
         <com.google.android.material.appbar.CollapsingToolbarLayout
             android:layout_width="match_parent"
@@ -23,7 +23,7 @@
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
                 android:layout_height="?attr/actionBarSize"
-                android:background="?attr/colorPrimary"
+                android:background="?attr/appBarBackgroundColor"
                 android:elevation="0dp"
                 android:theme="?actionBarTheme"
                 android:touchscreenBlocksFocus="false"
diff --git a/app/src/main/res/layout/layout_appbar.xml b/app/src/main/res/layout/layout_appbar.xml
index d9f5e8eff..42bc445f3 100644
--- a/app/src/main/res/layout/layout_appbar.xml
+++ b/app/src/main/res/layout/layout_appbar.xml
@@ -4,7 +4,7 @@
     android:id="@+id/appbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
-    android:background="?attr/colorPrimary"
+    android:background="?attr/appBarBackgroundColor"
     app:elevation="0dp"
     app:liftOnScroll="false">
 
@@ -12,7 +12,7 @@
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="?attr/colorPrimary"
+        android:background="?attr/appBarBackgroundColor"
         android:theme="?actionBarTheme"
         android:touchscreenBlocksFocus="false"
         app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
diff --git a/app/src/main/res/layout/layout_apps.xml b/app/src/main/res/layout/layout_apps.xml
index 41c9f2f83..decab9af6 100644
--- a/app/src/main/res/layout/layout_apps.xml
+++ b/app/src/main/res/layout/layout_apps.xml
@@ -11,7 +11,7 @@
         android:id="@+id/appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?attr/colorPrimary">
+        android:background="?attr/appBarBackgroundColor">
 
         <com.google.android.material.appbar.CollapsingToolbarLayout
             android:layout_width="match_parent"
@@ -23,7 +23,7 @@
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
                 android:layout_height="?attr/actionBarSize"
-                android:background="?attr/colorPrimary"
+                android:background="?attr/appBarBackgroundColor"
                 android:elevation="0dp"
                 android:theme="?actionBarTheme"
                 android:touchscreenBlocksFocus="false"
diff --git a/app/src/main/res/layout/layout_group_list.xml b/app/src/main/res/layout/layout_group_list.xml
index 80889254d..c1978b649 100644
--- a/app/src/main/res/layout/layout_group_list.xml
+++ b/app/src/main/res/layout/layout_group_list.xml
@@ -16,7 +16,7 @@
         android:id="@+id/group_tab"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?colorPrimary"
+        android:background="?attr/appBarBackgroundColor"
         android:elevation="0dp"
         android:visibility="gone"
         app:tabIndicatorColor="?tabIndicatorColor"
diff --git a/app/src/main/res/layout/layout_main.xml b/app/src/main/res/layout/layout_main.xml
index c7eaaa930..e0d770619 100644
--- a/app/src/main/res/layout/layout_main.xml
+++ b/app/src/main/res/layout/layout_main.xml
@@ -25,7 +25,7 @@
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:nextFocusUp="@+id/fab"
-            app:backgroundTint="?colorPrimary"
+            app:backgroundTint="?attr/appBarBackgroundColor"
             app:contentInsetStart="0dp"
             app:fabAlignmentMode="center"
             app:fabAnchorMode="cradle"
diff --git a/app/src/main/res/layout/layout_tools.xml b/app/src/main/res/layout/layout_tools.xml
index 08c0c5047..b7be05683 100644
--- a/app/src/main/res/layout/layout_tools.xml
+++ b/app/src/main/res/layout/layout_tools.xml
@@ -16,7 +16,7 @@
         android:id="@+id/tools_tab"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?colorPrimary"
+        android:background="?attr/appBarBackgroundColor"
         android:elevation="0dp"
         app:tabIndicatorColor="?tabIndicatorColor"
         app:tabIndicatorFullWidth="false"
diff --git a/app/src/main/res/layout/layout_webdav_settings.xml b/app/src/main/res/layout/layout_webdav_settings.xml
index 7e1f9c042..652ddd702 100644
--- a/app/src/main/res/layout/layout_webdav_settings.xml
+++ b/app/src/main/res/layout/layout_webdav_settings.xml
@@ -15,7 +15,7 @@
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
-            android:background="?attr/colorPrimary"
+            android:background="?attr/appBarBackgroundColor"
             app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup" />
 
     </com.google.android.material.appbar.AppBarLayout>
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index a0080db3c..7d98409cf 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -105,6 +105,14 @@
         <item name="android:colorBackground">@color/dhc_background</item>
         <item name="colorOnBackground">@color/dhc_on_surface</item>
         <item name="android:windowBackground">@color/dhc_background</item>
+        <item name="appBarBackgroundColor">@color/dhc_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.DarkHighContrast</item>
+        <item name="android:statusBarColor">@color/dhc_background</item>
+        <item name="android:navigationBarColor">@color/dhc_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/dhc_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/dhc_primary</item>
+        <item name="tabIndicatorColor">@color/dhc_primary</item>
         <item name="colorPrimaryContainer">@color/dhc_container</item>
         <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
         <item name="colorSecondary">@color/dhc_accent</item>
@@ -129,6 +137,7 @@
         <item name="testFailColor">@color/dhc_red</item>
         <item name="speedTextColor">@color/dhc_accent</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="fabConnectedColor">@color/dhc_on_primary</item>
         <item name="statusDetailColor">@color/dhc_accent</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index f01246e2b..81f843155 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -30,6 +30,12 @@
          (red was invisible on the pink/purple FAB). Separate from the red
          statusStoppedColor used for the status text. -->
     <attr name="fabStoppedColor" format="color" />
+    <!-- Connect-FAB icon tint when Connected. Default = statusConnectedColor so
+         existing themes are unchanged; themes whose FAB background equals the
+         connected status color (e.g. Dark High Contrast: green icon on a green
+         FAB) override this with a contrasting color so the airplane icon stays
+         visible. Separate from statusConnectedColor used for the status text. -->
+    <attr name="fabConnectedColor" format="color" />
     <!-- Secondary status text (the part after "Connected," / "Success:").
          Default on-primary; Dracula = cyan. -->
     <attr name="statusDetailColor" format="color" />
@@ -43,4 +49,9 @@
     <!-- Tonal "elevated surface" color for cards (route / group); each theme
          variant tints toward its own primary. -->
     <attr name="cardElevatedSurfaceColor" format="color" />
+    <!-- Background for the top app bar / toolbar and the bottom status bar.
+         Defaults to colorPrimary (legacy single-accent chrome); full M3 dark
+         themes (Dark High Contrast) override it with colorSurface so the chrome
+         is the dark canvas and the accent is reserved for actions/selection. -->
+    <attr name="appBarBackgroundColor" format="color" />
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index fed440270..9e1897547 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -17,6 +17,9 @@
         <item name="testFailColor">@color/material_red_500</item>
         <item name="speedTextColor">?attr/colorOnPrimary</item>
         <item name="fabStoppedColor">?attr/colorOnPrimary</item>
+        <!-- FAB connected-icon tint; defaults to the connected status color so
+             existing themes are unchanged. -->
+        <item name="fabConnectedColor">?attr/statusConnectedColor</item>
         <item name="statusDetailColor">?attr/colorOnPrimary</item>
         <item name="statusTestingColor">?attr/colorOnPrimary</item>
         <item name="routeProxyColor">@color/color_route_proxy</item>
@@ -37,6 +40,8 @@
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
+        <!-- App-bar/status-bar chrome background; default = primary (legacy look). -->
+        <item name="appBarBackgroundColor">?attr/colorPrimary</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,
@@ -113,6 +118,9 @@
         <item name="testFailColor">@color/material_red_500</item>
         <item name="speedTextColor">?attr/colorOnPrimary</item>
         <item name="fabStoppedColor">?attr/colorOnPrimary</item>
+        <!-- FAB connected-icon tint; defaults to the connected status color so
+             existing themes are unchanged. -->
+        <item name="fabConnectedColor">?attr/statusConnectedColor</item>
         <item name="statusDetailColor">?attr/colorOnPrimary</item>
         <item name="statusTestingColor">?attr/colorOnPrimary</item>
         <item name="routeProxyColor">@color/color_route_proxy</item>
@@ -129,6 +137,8 @@
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
+        <!-- App-bar/status-bar chrome background; default = primary (legacy look). -->
+        <item name="appBarBackgroundColor">?attr/colorPrimary</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,
@@ -241,6 +251,12 @@
         <item name="removeEmbeddedFabElevation">false</item>
     </style>
 
+    <!-- Dark High Contrast bottom bar: black surface (not the green primary) so the
+         green/blue/red status text reads against it, matching the OLED design. -->
+    <style name="Widget.SagerNet.BottomAppBar.DarkHighContrast">
+        <item name="backgroundTint">?attr/colorSurface</item>
+    </style>
+
     <style name="Widget.SagerNet.FloatingActionButton" parent="Widget.Material3.FloatingActionButton.Primary">
         <item name="backgroundTint">?attr/fabColorBackground</item>
         <item name="tint">?attr/colorOnPrimary</item>
@@ -759,6 +775,18 @@
         <item name="colorOnBackground">@color/dhc_on_surface</item>
         <item name="android:windowBackground">@color/dhc_background</item>
 
+        <!-- M3 dark chrome: app bar / bottom bar use the black surface, not the
+             green primary, so green/blue/red accents are reserved for actions and
+             status. Status & nav bars are black to match the OLED canvas. -->
+        <item name="appBarBackgroundColor">@color/dhc_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.DarkHighContrast</item>
+        <item name="android:statusBarColor">@color/dhc_background</item>
+        <item name="android:navigationBarColor">@color/dhc_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/dhc_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/dhc_primary</item>
+        <item name="tabIndicatorColor">@color/dhc_primary</item>
+
         <!-- M3 container/variant roles on the dark canvas. -->
         <item name="colorPrimaryContainer">@color/dhc_container</item>
         <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
@@ -787,6 +815,9 @@
         <item name="testFailColor">@color/dhc_red</item>
         <item name="speedTextColor">@color/dhc_accent</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <!-- Connected airplane icon: dark, so it stays visible on the green FAB
+             (the green statusConnectedColor would vanish against it). -->
+        <item name="fabConnectedColor">@color/dhc_on_primary</item>
         <item name="statusDetailColor">@color/dhc_accent</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>

From 99d6c69ee65c9e8043b7d2702fce3c234886f917 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:16:38 -0400
Subject: [PATCH 06/15] Add Dracula-M3, Nord, Monokai, Ayu, Catppuccin themes;
 fix appbar crash

Five new full-fledged M3 dark themes surfaced by name in the modern
picker (legacy Dracula id 23 left untouched):
- Dracula-M3 (id 26), Nord (27), Monokai (28), Ayu (29), Catppuccin (30).
- Each: official palette in colors.xml + day/night styles with the full
  dark canvas, M3 role overrides, black chrome (surface app/bottom bars,
  dark ActionBar overlay, themed tabs), status semantics, and a visible
  connected FAB icon (fabConnectedColor = on-primary). Registered in
  Theme.kt (ids, style maps, MODERN_THEMES, DARK_ONLY_THEMES) + strings.

Fix app-bar inflation crash: appBarBackgroundColor must resolve to a
CONCRETE @color, not an attr reference. android:background reads it as a
drawable via getDrawableForDensity, which does not follow attr-to-attr
indirection (?attr -> ?attr crashed AppBarLayout/BottomAppBar inflation).
Each theme now sets appBarBackgroundColor to a concrete color matching its
colorPrimary (legacy) or dark canvas (modern). StatsBar drops its explicit
backgroundTint and inherits the per-theme bottomAppBarStyle instead.

Verified on Android: all 6 modern themes apply with correct accents, dark
chrome, visible FAB icon, no crashes; legacy themes unchanged.
---
 .../io/nekohasekai/sagernet/utils/Theme.kt    |  26 +-
 app/src/main/res/layout/layout_main.xml       |   1 -
 app/src/main/res/values-night/themes.xml      | 482 ++++++++++++++-
 app/src/main/res/values/attrs.xml             |   9 +-
 app/src/main/res/values/colors.xml            | 110 ++++
 app/src/main/res/values/strings.xml           |   5 +
 app/src/main/res/values/themes.xml            | 547 +++++++++++++++++-
 7 files changed, 1167 insertions(+), 13 deletions(-)

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 be1ba3389..2d07bcd05 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
@@ -34,14 +34,21 @@ object Theme {
     const val DRACULA = 23
     const val DYNAMIC = 24
     const val DARK_HIGH_CONTRAST = 25
+    const val DRACULA_M3 = 26
+    const val NORD = 27
+    const val MONOKAI = 28
+    const val AYU = 29
+    const val CATPPUCCIN = 30
 
     /**
      * Themes that only make sense in dark mode: selecting one forces night mode
      * on so its dark canvas (values-night) takes effect, and the prior night
      * setting is restored on exit (see SettingsPreferenceFragment). Dracula was
-     * the first such theme; Dark High Contrast (OLED black) is dark-only too.
+     * the first such theme; the modern M3 themes are dark-only too.
      */
-    val DARK_ONLY_THEMES = setOf(DRACULA, DARK_HIGH_CONTRAST)
+    val DARK_ONLY_THEMES = setOf(
+        DRACULA, DARK_HIGH_CONTRAST, DRACULA_M3, NORD, MONOKAI, AYU, CATPPUCCIN,
+    )
 
     private fun defaultTheme() = PINK_SSR
 
@@ -61,6 +68,11 @@ object Theme {
      */
     val MODERN_THEMES: List<ThemeInfo> = listOf(
         ThemeInfo(DARK_HIGH_CONTRAST, R.string.theme_dark_high_contrast, R.color.dhc_primary),
+        ThemeInfo(DRACULA_M3, R.string.theme_dracula_m3, R.color.draculam3_primary),
+        ThemeInfo(NORD, R.string.theme_nord, R.color.nord_primary),
+        ThemeInfo(MONOKAI, R.string.theme_monokai, R.color.monokai_primary),
+        ThemeInfo(AYU, R.string.theme_ayu, R.color.ayu_primary),
+        ThemeInfo(CATPPUCCIN, R.string.theme_catppuccin, R.color.catppuccin_primary),
         ThemeInfo(DYNAMIC, R.string.theme_dynamic, R.color.color_dynamic_swatch),
     )
 
@@ -106,6 +118,11 @@ object Theme {
             VERDANT_MINT -> R.style.Theme_SagerNet_VerdantMint
             DRACULA -> R.style.Theme_SagerNet_Dracula
             DARK_HIGH_CONTRAST -> R.style.Theme_SagerNet_DarkHighContrast
+            DRACULA_M3 -> R.style.Theme_SagerNet_DraculaM3
+            NORD -> R.style.Theme_SagerNet_Nord
+            MONOKAI -> R.style.Theme_SagerNet_Monokai
+            AYU -> R.style.Theme_SagerNet_Ayu
+            CATPPUCCIN -> R.style.Theme_SagerNet_Catppuccin
             DYNAMIC -> R.style.Theme_SagerNet
             else -> getTheme(defaultTheme())
         }
@@ -137,6 +154,11 @@ object Theme {
             VERDANT_MINT -> R.style.Theme_SagerNet_Dialog_VerdantMint
             DRACULA -> R.style.Theme_SagerNet_Dialog_Dracula
             DARK_HIGH_CONTRAST -> R.style.Theme_SagerNet_Dialog_DarkHighContrast
+            DRACULA_M3 -> R.style.Theme_SagerNet_Dialog_DraculaM3
+            NORD -> R.style.Theme_SagerNet_Dialog_Nord
+            MONOKAI -> R.style.Theme_SagerNet_Dialog_Monokai
+            AYU -> R.style.Theme_SagerNet_Dialog_Ayu
+            CATPPUCCIN -> R.style.Theme_SagerNet_Dialog_Catppuccin
             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 e0d770619..ea29c4db9 100644
--- a/app/src/main/res/layout/layout_main.xml
+++ b/app/src/main/res/layout/layout_main.xml
@@ -25,7 +25,6 @@
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:nextFocusUp="@+id/fab"
-            app:backgroundTint="?attr/appBarBackgroundColor"
             app:contentInsetStart="0dp"
             app:fabAlignmentMode="center"
             app:fabAnchorMode="cradle"
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index 7d98409cf..ddc97b077 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -14,6 +14,7 @@
     -->
     <style name="Theme.SagerNet.Dracula" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/color_dracula</item>
+        <item name="appBarBackgroundColor">@color/color_dracula</item>
         <item name="colorPrimaryDark">@color/color_dracula_dark</item>
         <item name="colorAccent">@color/color_dracula_accent</item>
         <item name="colorMaterial100">@color/color_dracula_100</item>
@@ -56,6 +57,7 @@
 
     <style name="Theme.SagerNet.Dialog.Dracula" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/color_dracula</item>
+        <item name="appBarBackgroundColor">@color/color_dracula</item>
         <item name="colorPrimaryDark">@color/color_dracula_dark</item>
         <item name="colorAccent">@color/color_dracula_accent</item>
         <item name="colorMaterial100">@color/color_dracula_100</item>
@@ -93,6 +95,7 @@
          to match the day style declared in values/themes.xml. -->
     <style name="Theme.SagerNet.DarkHighContrast" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
         <item name="colorAccent">@color/dhc_accent</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
@@ -105,7 +108,6 @@
         <item name="android:colorBackground">@color/dhc_background</item>
         <item name="colorOnBackground">@color/dhc_on_surface</item>
         <item name="android:windowBackground">@color/dhc_background</item>
-        <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.DarkHighContrast</item>
         <item name="android:statusBarColor">@color/dhc_background</item>
         <item name="android:navigationBarColor">@color/dhc_background</item>
@@ -144,8 +146,280 @@
         <item name="navSelectedColor">?attr/colorPrimary</item>
     </style>
 
+    <style name="Theme.SagerNet.DraculaM3" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/draculam3_primary</item>
+        <item name="appBarBackgroundColor">@color/draculam3_background</item>
+        <item name="colorPrimaryDark">@color/draculam3_primary_dark</item>
+        <item name="colorAccent">@color/draculam3_accent</item>
+        <item name="colorOnPrimary">@color/draculam3_on_primary</item>
+        <item name="colorMaterial100">@color/draculam3_100</item>
+        <item name="colorMaterial300">@color/draculam3_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_draculam3</item>
+
+        <item name="colorSurface">@color/draculam3_surface</item>
+        <item name="colorOnSurface">@color/draculam3_on_surface</item>
+        <item name="android:colorBackground">@color/draculam3_background</item>
+        <item name="colorOnBackground">@color/draculam3_on_surface</item>
+        <item name="android:windowBackground">@color/draculam3_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.DraculaM3</item>
+        <item name="android:statusBarColor">@color/draculam3_background</item>
+        <item name="android:navigationBarColor">@color/draculam3_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/draculam3_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/draculam3_primary</item>
+        <item name="tabIndicatorColor">@color/draculam3_primary</item>
+
+        <item name="colorPrimaryContainer">@color/draculam3_container</item>
+        <item name="colorOnPrimaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSecondary">@color/draculam3_accent</item>
+        <item name="colorSecondaryContainer">@color/draculam3_container</item>
+        <item name="colorOnSecondaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorTertiary">@color/draculam3_blue</item>
+        <item name="colorTertiaryContainer">@color/draculam3_container</item>
+        <item name="colorOnTertiaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSurfaceVariant">@color/draculam3_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/draculam3_on_surface_variant</item>
+        <item name="colorOutline">@color/draculam3_outline</item>
+        <item name="colorOutlineVariant">@color/draculam3_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/draculam3_accent</item>
+        <item name="accentOrTextPrimary">@color/draculam3_accent</item>
+        <item name="primaryOrTextSecondary">@color/draculam3_primary</item>
+        <item name="primaryOrTextPrimary">@color/draculam3_primary</item>
+        <item name="protocolColor">@color/draculam3_green</item>
+        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="statusConnectedColor">@color/draculam3_green</item>
+        <item name="statusStoppedColor">@color/draculam3_red</item>
+        <item name="statusConnectingColor">@color/draculam3_yellow</item>
+        <item name="testFailColor">@color/draculam3_red</item>
+        <item name="speedTextColor">@color/draculam3_accent</item>
+        <item name="fabStoppedColor">@color/draculam3_on_primary</item>
+        <item name="fabConnectedColor">@color/draculam3_on_primary</item>
+        <item name="statusDetailColor">@color/draculam3_accent</item>
+        <item name="statusTestingColor">@color/draculam3_yellow</item>
+        <item name="routeProxyColor">@color/draculam3_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Nord" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/nord_primary</item>
+        <item name="appBarBackgroundColor">@color/nord_background</item>
+        <item name="colorPrimaryDark">@color/nord_primary_dark</item>
+        <item name="colorAccent">@color/nord_accent</item>
+        <item name="colorOnPrimary">@color/nord_on_primary</item>
+        <item name="colorMaterial100">@color/nord_100</item>
+        <item name="colorMaterial300">@color/nord_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_nord</item>
+
+        <item name="colorSurface">@color/nord_surface</item>
+        <item name="colorOnSurface">@color/nord_on_surface</item>
+        <item name="android:colorBackground">@color/nord_background</item>
+        <item name="colorOnBackground">@color/nord_on_surface</item>
+        <item name="android:windowBackground">@color/nord_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Nord</item>
+        <item name="android:statusBarColor">@color/nord_background</item>
+        <item name="android:navigationBarColor">@color/nord_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/nord_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/nord_primary</item>
+        <item name="tabIndicatorColor">@color/nord_primary</item>
+
+        <item name="colorPrimaryContainer">@color/nord_container</item>
+        <item name="colorOnPrimaryContainer">@color/nord_on_surface</item>
+        <item name="colorSecondary">@color/nord_accent</item>
+        <item name="colorSecondaryContainer">@color/nord_container</item>
+        <item name="colorOnSecondaryContainer">@color/nord_on_surface</item>
+        <item name="colorTertiary">@color/nord_blue</item>
+        <item name="colorTertiaryContainer">@color/nord_container</item>
+        <item name="colorOnTertiaryContainer">@color/nord_on_surface</item>
+        <item name="colorSurfaceVariant">@color/nord_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/nord_on_surface_variant</item>
+        <item name="colorOutline">@color/nord_outline</item>
+        <item name="colorOutlineVariant">@color/nord_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/nord_accent</item>
+        <item name="accentOrTextPrimary">@color/nord_accent</item>
+        <item name="primaryOrTextSecondary">@color/nord_primary</item>
+        <item name="primaryOrTextPrimary">@color/nord_primary</item>
+        <item name="protocolColor">@color/nord_green</item>
+        <item name="profileNameColor">@color/nord_on_surface</item>
+        <item name="statusConnectedColor">@color/nord_green</item>
+        <item name="statusStoppedColor">@color/nord_red</item>
+        <item name="statusConnectingColor">@color/nord_yellow</item>
+        <item name="testFailColor">@color/nord_red</item>
+        <item name="speedTextColor">@color/nord_accent</item>
+        <item name="fabStoppedColor">@color/nord_on_primary</item>
+        <item name="fabConnectedColor">@color/nord_on_primary</item>
+        <item name="statusDetailColor">@color/nord_accent</item>
+        <item name="statusTestingColor">@color/nord_yellow</item>
+        <item name="routeProxyColor">@color/nord_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Monokai" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/monokai_primary</item>
+        <item name="appBarBackgroundColor">@color/monokai_background</item>
+        <item name="colorPrimaryDark">@color/monokai_primary_dark</item>
+        <item name="colorAccent">@color/monokai_accent</item>
+        <item name="colorOnPrimary">@color/monokai_on_primary</item>
+        <item name="colorMaterial100">@color/monokai_100</item>
+        <item name="colorMaterial300">@color/monokai_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_monokai</item>
+
+        <item name="colorSurface">@color/monokai_surface</item>
+        <item name="colorOnSurface">@color/monokai_on_surface</item>
+        <item name="android:colorBackground">@color/monokai_background</item>
+        <item name="colorOnBackground">@color/monokai_on_surface</item>
+        <item name="android:windowBackground">@color/monokai_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Monokai</item>
+        <item name="android:statusBarColor">@color/monokai_background</item>
+        <item name="android:navigationBarColor">@color/monokai_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/monokai_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/monokai_primary</item>
+        <item name="tabIndicatorColor">@color/monokai_primary</item>
+
+        <item name="colorPrimaryContainer">@color/monokai_container</item>
+        <item name="colorOnPrimaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSecondary">@color/monokai_accent</item>
+        <item name="colorSecondaryContainer">@color/monokai_container</item>
+        <item name="colorOnSecondaryContainer">@color/monokai_on_surface</item>
+        <item name="colorTertiary">@color/monokai_blue</item>
+        <item name="colorTertiaryContainer">@color/monokai_container</item>
+        <item name="colorOnTertiaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSurfaceVariant">@color/monokai_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/monokai_on_surface_variant</item>
+        <item name="colorOutline">@color/monokai_outline</item>
+        <item name="colorOutlineVariant">@color/monokai_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/monokai_accent</item>
+        <item name="accentOrTextPrimary">@color/monokai_accent</item>
+        <item name="primaryOrTextSecondary">@color/monokai_primary</item>
+        <item name="primaryOrTextPrimary">@color/monokai_primary</item>
+        <item name="protocolColor">@color/monokai_green</item>
+        <item name="profileNameColor">@color/monokai_on_surface</item>
+        <item name="statusConnectedColor">@color/monokai_green</item>
+        <item name="statusStoppedColor">@color/monokai_red</item>
+        <item name="statusConnectingColor">@color/monokai_yellow</item>
+        <item name="testFailColor">@color/monokai_red</item>
+        <item name="speedTextColor">@color/monokai_accent</item>
+        <item name="fabStoppedColor">@color/monokai_on_primary</item>
+        <item name="fabConnectedColor">@color/monokai_on_primary</item>
+        <item name="statusDetailColor">@color/monokai_accent</item>
+        <item name="statusTestingColor">@color/monokai_yellow</item>
+        <item name="routeProxyColor">@color/monokai_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Ayu" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/ayu_primary</item>
+        <item name="appBarBackgroundColor">@color/ayu_background</item>
+        <item name="colorPrimaryDark">@color/ayu_primary_dark</item>
+        <item name="colorAccent">@color/ayu_accent</item>
+        <item name="colorOnPrimary">@color/ayu_on_primary</item>
+        <item name="colorMaterial100">@color/ayu_100</item>
+        <item name="colorMaterial300">@color/ayu_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_ayu</item>
+
+        <item name="colorSurface">@color/ayu_surface</item>
+        <item name="colorOnSurface">@color/ayu_on_surface</item>
+        <item name="android:colorBackground">@color/ayu_background</item>
+        <item name="colorOnBackground">@color/ayu_on_surface</item>
+        <item name="android:windowBackground">@color/ayu_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Ayu</item>
+        <item name="android:statusBarColor">@color/ayu_background</item>
+        <item name="android:navigationBarColor">@color/ayu_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/ayu_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/ayu_primary</item>
+        <item name="tabIndicatorColor">@color/ayu_primary</item>
+
+        <item name="colorPrimaryContainer">@color/ayu_container</item>
+        <item name="colorOnPrimaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSecondary">@color/ayu_accent</item>
+        <item name="colorSecondaryContainer">@color/ayu_container</item>
+        <item name="colorOnSecondaryContainer">@color/ayu_on_surface</item>
+        <item name="colorTertiary">@color/ayu_blue</item>
+        <item name="colorTertiaryContainer">@color/ayu_container</item>
+        <item name="colorOnTertiaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSurfaceVariant">@color/ayu_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/ayu_on_surface_variant</item>
+        <item name="colorOutline">@color/ayu_outline</item>
+        <item name="colorOutlineVariant">@color/ayu_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/ayu_accent</item>
+        <item name="accentOrTextPrimary">@color/ayu_accent</item>
+        <item name="primaryOrTextSecondary">@color/ayu_primary</item>
+        <item name="primaryOrTextPrimary">@color/ayu_primary</item>
+        <item name="protocolColor">@color/ayu_green</item>
+        <item name="profileNameColor">@color/ayu_on_surface</item>
+        <item name="statusConnectedColor">@color/ayu_green</item>
+        <item name="statusStoppedColor">@color/ayu_red</item>
+        <item name="statusConnectingColor">@color/ayu_yellow</item>
+        <item name="testFailColor">@color/ayu_red</item>
+        <item name="speedTextColor">@color/ayu_accent</item>
+        <item name="fabStoppedColor">@color/ayu_on_primary</item>
+        <item name="fabConnectedColor">@color/ayu_on_primary</item>
+        <item name="statusDetailColor">@color/ayu_accent</item>
+        <item name="statusTestingColor">@color/ayu_yellow</item>
+        <item name="routeProxyColor">@color/ayu_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Catppuccin" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/catppuccin_primary</item>
+        <item name="appBarBackgroundColor">@color/catppuccin_background</item>
+        <item name="colorPrimaryDark">@color/catppuccin_primary_dark</item>
+        <item name="colorAccent">@color/catppuccin_accent</item>
+        <item name="colorOnPrimary">@color/catppuccin_on_primary</item>
+        <item name="colorMaterial100">@color/catppuccin_100</item>
+        <item name="colorMaterial300">@color/catppuccin_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_catppuccin</item>
+
+        <item name="colorSurface">@color/catppuccin_surface</item>
+        <item name="colorOnSurface">@color/catppuccin_on_surface</item>
+        <item name="android:colorBackground">@color/catppuccin_background</item>
+        <item name="colorOnBackground">@color/catppuccin_on_surface</item>
+        <item name="android:windowBackground">@color/catppuccin_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Catppuccin</item>
+        <item name="android:statusBarColor">@color/catppuccin_background</item>
+        <item name="android:navigationBarColor">@color/catppuccin_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/catppuccin_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/catppuccin_primary</item>
+        <item name="tabIndicatorColor">@color/catppuccin_primary</item>
+
+        <item name="colorPrimaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnPrimaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSecondary">@color/catppuccin_accent</item>
+        <item name="colorSecondaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnSecondaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorTertiary">@color/catppuccin_blue</item>
+        <item name="colorTertiaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnTertiaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSurfaceVariant">@color/catppuccin_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/catppuccin_on_surface_variant</item>
+        <item name="colorOutline">@color/catppuccin_outline</item>
+        <item name="colorOutlineVariant">@color/catppuccin_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/catppuccin_accent</item>
+        <item name="accentOrTextPrimary">@color/catppuccin_accent</item>
+        <item name="primaryOrTextSecondary">@color/catppuccin_primary</item>
+        <item name="primaryOrTextPrimary">@color/catppuccin_primary</item>
+        <item name="protocolColor">@color/catppuccin_green</item>
+        <item name="profileNameColor">@color/catppuccin_on_surface</item>
+        <item name="statusConnectedColor">@color/catppuccin_green</item>
+        <item name="statusStoppedColor">@color/catppuccin_red</item>
+        <item name="statusConnectingColor">@color/catppuccin_yellow</item>
+        <item name="testFailColor">@color/catppuccin_red</item>
+        <item name="speedTextColor">@color/catppuccin_accent</item>
+        <item name="fabStoppedColor">@color/catppuccin_on_primary</item>
+        <item name="fabConnectedColor">@color/catppuccin_on_primary</item>
+        <item name="statusDetailColor">@color/catppuccin_accent</item>
+        <item name="statusTestingColor">@color/catppuccin_yellow</item>
+        <item name="routeProxyColor">@color/catppuccin_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+
     <style name="Theme.SagerNet.Dialog.DarkHighContrast" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
         <item name="colorAccent">@color/dhc_accent</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
@@ -181,4 +455,210 @@
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
     </style>
+
+    <style name="Theme.SagerNet.Dialog.DraculaM3" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/draculam3_primary</item>
+        <item name="appBarBackgroundColor">@color/draculam3_background</item>
+        <item name="colorPrimaryDark">@color/draculam3_primary_dark</item>
+        <item name="colorAccent">@color/draculam3_accent</item>
+        <item name="colorOnPrimary">@color/draculam3_on_primary</item>
+        <item name="colorMaterial100">@color/draculam3_100</item>
+        <item name="colorMaterial300">@color/draculam3_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_draculam3</item>
+
+        <item name="colorSurface">@color/draculam3_surface</item>
+        <item name="colorOnSurface">@color/draculam3_on_surface</item>
+        <item name="android:colorBackground">@color/draculam3_background</item>
+        <item name="colorOnBackground">@color/draculam3_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/draculam3_container</item>
+        <item name="colorOnPrimaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSecondary">@color/draculam3_accent</item>
+        <item name="colorSecondaryContainer">@color/draculam3_container</item>
+        <item name="colorOnSecondaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorTertiary">@color/draculam3_blue</item>
+        <item name="colorTertiaryContainer">@color/draculam3_container</item>
+        <item name="colorOnTertiaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSurfaceVariant">@color/draculam3_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/draculam3_on_surface_variant</item>
+        <item name="colorOutline">@color/draculam3_outline</item>
+        <item name="colorOutlineVariant">@color/draculam3_outline_variant</item>
+        <item name="protocolColor">@color/draculam3_green</item>
+        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="statusConnectedColor">@color/draculam3_green</item>
+        <item name="statusStoppedColor">@color/draculam3_red</item>
+        <item name="statusConnectingColor">@color/draculam3_yellow</item>
+        <item name="testFailColor">@color/draculam3_red</item>
+        <item name="speedTextColor">@color/draculam3_accent</item>
+        <item name="fabStoppedColor">@color/draculam3_on_primary</item>
+        <item name="fabConnectedColor">@color/draculam3_on_primary</item>
+        <item name="statusDetailColor">@color/draculam3_accent</item>
+        <item name="statusTestingColor">@color/draculam3_yellow</item>
+        <item name="routeProxyColor">@color/draculam3_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Nord" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/nord_primary</item>
+        <item name="appBarBackgroundColor">@color/nord_background</item>
+        <item name="colorPrimaryDark">@color/nord_primary_dark</item>
+        <item name="colorAccent">@color/nord_accent</item>
+        <item name="colorOnPrimary">@color/nord_on_primary</item>
+        <item name="colorMaterial100">@color/nord_100</item>
+        <item name="colorMaterial300">@color/nord_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_nord</item>
+
+        <item name="colorSurface">@color/nord_surface</item>
+        <item name="colorOnSurface">@color/nord_on_surface</item>
+        <item name="android:colorBackground">@color/nord_background</item>
+        <item name="colorOnBackground">@color/nord_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/nord_container</item>
+        <item name="colorOnPrimaryContainer">@color/nord_on_surface</item>
+        <item name="colorSecondary">@color/nord_accent</item>
+        <item name="colorSecondaryContainer">@color/nord_container</item>
+        <item name="colorOnSecondaryContainer">@color/nord_on_surface</item>
+        <item name="colorTertiary">@color/nord_blue</item>
+        <item name="colorTertiaryContainer">@color/nord_container</item>
+        <item name="colorOnTertiaryContainer">@color/nord_on_surface</item>
+        <item name="colorSurfaceVariant">@color/nord_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/nord_on_surface_variant</item>
+        <item name="colorOutline">@color/nord_outline</item>
+        <item name="colorOutlineVariant">@color/nord_outline_variant</item>
+        <item name="protocolColor">@color/nord_green</item>
+        <item name="profileNameColor">@color/nord_on_surface</item>
+        <item name="statusConnectedColor">@color/nord_green</item>
+        <item name="statusStoppedColor">@color/nord_red</item>
+        <item name="statusConnectingColor">@color/nord_yellow</item>
+        <item name="testFailColor">@color/nord_red</item>
+        <item name="speedTextColor">@color/nord_accent</item>
+        <item name="fabStoppedColor">@color/nord_on_primary</item>
+        <item name="fabConnectedColor">@color/nord_on_primary</item>
+        <item name="statusDetailColor">@color/nord_accent</item>
+        <item name="statusTestingColor">@color/nord_yellow</item>
+        <item name="routeProxyColor">@color/nord_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Monokai" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/monokai_primary</item>
+        <item name="appBarBackgroundColor">@color/monokai_background</item>
+        <item name="colorPrimaryDark">@color/monokai_primary_dark</item>
+        <item name="colorAccent">@color/monokai_accent</item>
+        <item name="colorOnPrimary">@color/monokai_on_primary</item>
+        <item name="colorMaterial100">@color/monokai_100</item>
+        <item name="colorMaterial300">@color/monokai_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_monokai</item>
+
+        <item name="colorSurface">@color/monokai_surface</item>
+        <item name="colorOnSurface">@color/monokai_on_surface</item>
+        <item name="android:colorBackground">@color/monokai_background</item>
+        <item name="colorOnBackground">@color/monokai_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/monokai_container</item>
+        <item name="colorOnPrimaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSecondary">@color/monokai_accent</item>
+        <item name="colorSecondaryContainer">@color/monokai_container</item>
+        <item name="colorOnSecondaryContainer">@color/monokai_on_surface</item>
+        <item name="colorTertiary">@color/monokai_blue</item>
+        <item name="colorTertiaryContainer">@color/monokai_container</item>
+        <item name="colorOnTertiaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSurfaceVariant">@color/monokai_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/monokai_on_surface_variant</item>
+        <item name="colorOutline">@color/monokai_outline</item>
+        <item name="colorOutlineVariant">@color/monokai_outline_variant</item>
+        <item name="protocolColor">@color/monokai_green</item>
+        <item name="profileNameColor">@color/monokai_on_surface</item>
+        <item name="statusConnectedColor">@color/monokai_green</item>
+        <item name="statusStoppedColor">@color/monokai_red</item>
+        <item name="statusConnectingColor">@color/monokai_yellow</item>
+        <item name="testFailColor">@color/monokai_red</item>
+        <item name="speedTextColor">@color/monokai_accent</item>
+        <item name="fabStoppedColor">@color/monokai_on_primary</item>
+        <item name="fabConnectedColor">@color/monokai_on_primary</item>
+        <item name="statusDetailColor">@color/monokai_accent</item>
+        <item name="statusTestingColor">@color/monokai_yellow</item>
+        <item name="routeProxyColor">@color/monokai_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Ayu" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/ayu_primary</item>
+        <item name="appBarBackgroundColor">@color/ayu_background</item>
+        <item name="colorPrimaryDark">@color/ayu_primary_dark</item>
+        <item name="colorAccent">@color/ayu_accent</item>
+        <item name="colorOnPrimary">@color/ayu_on_primary</item>
+        <item name="colorMaterial100">@color/ayu_100</item>
+        <item name="colorMaterial300">@color/ayu_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_ayu</item>
+
+        <item name="colorSurface">@color/ayu_surface</item>
+        <item name="colorOnSurface">@color/ayu_on_surface</item>
+        <item name="android:colorBackground">@color/ayu_background</item>
+        <item name="colorOnBackground">@color/ayu_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/ayu_container</item>
+        <item name="colorOnPrimaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSecondary">@color/ayu_accent</item>
+        <item name="colorSecondaryContainer">@color/ayu_container</item>
+        <item name="colorOnSecondaryContainer">@color/ayu_on_surface</item>
+        <item name="colorTertiary">@color/ayu_blue</item>
+        <item name="colorTertiaryContainer">@color/ayu_container</item>
+        <item name="colorOnTertiaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSurfaceVariant">@color/ayu_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/ayu_on_surface_variant</item>
+        <item name="colorOutline">@color/ayu_outline</item>
+        <item name="colorOutlineVariant">@color/ayu_outline_variant</item>
+        <item name="protocolColor">@color/ayu_green</item>
+        <item name="profileNameColor">@color/ayu_on_surface</item>
+        <item name="statusConnectedColor">@color/ayu_green</item>
+        <item name="statusStoppedColor">@color/ayu_red</item>
+        <item name="statusConnectingColor">@color/ayu_yellow</item>
+        <item name="testFailColor">@color/ayu_red</item>
+        <item name="speedTextColor">@color/ayu_accent</item>
+        <item name="fabStoppedColor">@color/ayu_on_primary</item>
+        <item name="fabConnectedColor">@color/ayu_on_primary</item>
+        <item name="statusDetailColor">@color/ayu_accent</item>
+        <item name="statusTestingColor">@color/ayu_yellow</item>
+        <item name="routeProxyColor">@color/ayu_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Catppuccin" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/catppuccin_primary</item>
+        <item name="appBarBackgroundColor">@color/catppuccin_background</item>
+        <item name="colorPrimaryDark">@color/catppuccin_primary_dark</item>
+        <item name="colorAccent">@color/catppuccin_accent</item>
+        <item name="colorOnPrimary">@color/catppuccin_on_primary</item>
+        <item name="colorMaterial100">@color/catppuccin_100</item>
+        <item name="colorMaterial300">@color/catppuccin_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_catppuccin</item>
+
+        <item name="colorSurface">@color/catppuccin_surface</item>
+        <item name="colorOnSurface">@color/catppuccin_on_surface</item>
+        <item name="android:colorBackground">@color/catppuccin_background</item>
+        <item name="colorOnBackground">@color/catppuccin_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnPrimaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSecondary">@color/catppuccin_accent</item>
+        <item name="colorSecondaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnSecondaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorTertiary">@color/catppuccin_blue</item>
+        <item name="colorTertiaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnTertiaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSurfaceVariant">@color/catppuccin_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/catppuccin_on_surface_variant</item>
+        <item name="colorOutline">@color/catppuccin_outline</item>
+        <item name="colorOutlineVariant">@color/catppuccin_outline_variant</item>
+        <item name="protocolColor">@color/catppuccin_green</item>
+        <item name="profileNameColor">@color/catppuccin_on_surface</item>
+        <item name="statusConnectedColor">@color/catppuccin_green</item>
+        <item name="statusStoppedColor">@color/catppuccin_red</item>
+        <item name="statusConnectingColor">@color/catppuccin_yellow</item>
+        <item name="testFailColor">@color/catppuccin_red</item>
+        <item name="speedTextColor">@color/catppuccin_accent</item>
+        <item name="fabStoppedColor">@color/catppuccin_on_primary</item>
+        <item name="fabConnectedColor">@color/catppuccin_on_primary</item>
+        <item name="statusDetailColor">@color/catppuccin_accent</item>
+        <item name="statusTestingColor">@color/catppuccin_yellow</item>
+        <item name="routeProxyColor">@color/catppuccin_blue</item>
+    </style>
+
 </resources>
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index 81f843155..a4ef09f4a 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -49,9 +49,10 @@
     <!-- Tonal "elevated surface" color for cards (route / group); each theme
          variant tints toward its own primary. -->
     <attr name="cardElevatedSurfaceColor" format="color" />
-    <!-- Background for the top app bar / toolbar and the bottom status bar.
-         Defaults to colorPrimary (legacy single-accent chrome); full M3 dark
-         themes (Dark High Contrast) override it with colorSurface so the chrome
-         is the dark canvas and the accent is reserved for actions/selection. -->
+    <!-- Background for the top app bar / toolbar and tab strips. Each theme sets
+         this to a CONCRETE @color (matching its colorPrimary for legacy themes,
+         or the dark canvas for full M3 dark themes). It must not be an attr
+         reference: android:background resolves it as a drawable and does not
+         follow attr-to-attr indirection (that crashed AppBarLayout inflation). -->
     <attr name="appBarBackgroundColor" format="color" />
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 16c6bf11a..184f51c29 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -400,4 +400,114 @@
     <color name="dhc_300">#2EA043</color>            <!-- colorMaterial300 stand-in -->
     <color name="card_elevated_dhc">#0D0D0D</color>
 
+    <!-- ===================== Phase 3: modern M3 dark themes =====================
+         Each is a full M3 dark theme surfaced by name in the picker. Base
+         declarations live here so resources always resolve; the live dark canvas
+         is applied via the theme styles (these themes force night mode on). -->
+
+    <!-- Dracula-M3 (official palette; separate from the legacy Dracula id 23). -->
+    <color name="draculam3_primary">#BD93F9</color>          <!-- purple -->
+    <color name="draculam3_primary_dark">#6272A4</color>     <!-- comment blue -->
+    <color name="draculam3_on_primary">#282A36</color>
+    <color name="draculam3_accent">#FF79C6</color> <!-- pink -->
+    <color name="draculam3_blue">#8BE9FD</color>            <!-- cyan -->
+    <color name="draculam3_background">#282A36</color>
+    <color name="draculam3_surface">#343746</color>
+    <color name="draculam3_surface_variant">#3C3F52</color>
+    <color name="draculam3_container">#44475A</color>
+    <color name="draculam3_on_surface">#F8F8F2</color>
+    <color name="draculam3_on_surface_variant">#C9CEE3</color>
+    <color name="draculam3_outline">#6272A4</color>
+    <color name="draculam3_outline_variant">#3C3F52</color>
+    <color name="draculam3_green">#50FA7B</color>
+    <color name="draculam3_red">#FF5555</color>
+    <color name="draculam3_yellow">#F1FA8C</color>
+    <color name="draculam3_100">#44475A</color>
+    <color name="draculam3_300">#6272A4</color>
+    <color name="card_elevated_draculam3">#343746</color>
+
+    <!-- Nord (official palette). -->
+    <color name="nord_primary">#88C0D0</color>             <!-- frost cyan -->
+    <color name="nord_primary_dark">#5E81AC</color>        <!-- frost deep blue -->
+    <color name="nord_on_primary">#2E3440</color>
+    <color name="nord_accent">#81A1C1</color>             <!-- frost blue -->
+    <color name="nord_blue">#81A1C1</color>
+    <color name="nord_background">#2E3440</color>
+    <color name="nord_surface">#3B4252</color>
+    <color name="nord_surface_variant">#434C5E</color>
+    <color name="nord_container">#434C5E</color>
+    <color name="nord_on_surface">#ECEFF4</color>
+    <color name="nord_on_surface_variant">#D8DEE9</color>
+    <color name="nord_outline">#4C566A</color>
+    <color name="nord_outline_variant">#3B4252</color>
+    <color name="nord_green">#A3BE8C</color>
+    <color name="nord_red">#BF616A</color>
+    <color name="nord_yellow">#EBCB8B</color>
+    <color name="nord_100">#434C5E</color>
+    <color name="nord_300">#5E81AC</color>
+    <color name="card_elevated_nord">#3B4252</color>
+
+    <!-- Monokai (classic palette). -->
+    <color name="monokai_primary">#A6E22E</color>          <!-- green -->
+    <color name="monokai_primary_dark">#75A813</color>
+    <color name="monokai_on_primary">#272822</color>
+    <color name="monokai_accent">#66D9EF</color>           <!-- blue -->
+    <color name="monokai_blue">#66D9EF</color>
+    <color name="monokai_background">#272822</color>
+    <color name="monokai_surface">#31322B</color>
+    <color name="monokai_surface_variant">#3A3B33</color>
+    <color name="monokai_container">#3E3D32</color>
+    <color name="monokai_on_surface">#F8F8F2</color>
+    <color name="monokai_on_surface_variant">#CFCFC2</color>
+    <color name="monokai_outline">#75715E</color>
+    <color name="monokai_outline_variant">#3A3B33</color>
+    <color name="monokai_green">#A6E22E</color>
+    <color name="monokai_red">#F92672</color>            <!-- pink/red -->
+    <color name="monokai_yellow">#E6DB74</color>
+    <color name="monokai_100">#3E3D32</color>
+    <color name="monokai_300">#75715E</color>
+    <color name="card_elevated_monokai">#31322B</color>
+
+    <!-- Ayu Mirage (official palette). -->
+    <color name="ayu_primary">#FFCC66</color>             <!-- amber accent -->
+    <color name="ayu_primary_dark">#FFA759</color>        <!-- orange -->
+    <color name="ayu_on_primary">#1F2430</color>
+    <color name="ayu_accent">#5CCFE6</color>              <!-- cyan -->
+    <color name="ayu_blue">#5CCFE6</color>
+    <color name="ayu_background">#1F2430</color>
+    <color name="ayu_surface">#232834</color>
+    <color name="ayu_surface_variant">#2A303C</color>
+    <color name="ayu_container">#2D3440</color>
+    <color name="ayu_on_surface">#E6E1CF</color>
+    <color name="ayu_on_surface_variant">#B8B5A5</color>
+    <color name="ayu_outline">#54596B</color>
+    <color name="ayu_outline_variant">#2A303C</color>
+    <color name="ayu_green">#BAE67E</color>
+    <color name="ayu_red">#FF6666</color>
+    <color name="ayu_yellow">#FFD580</color>
+    <color name="ayu_100">#2D3440</color>
+    <color name="ayu_300">#FFA759</color>
+    <color name="card_elevated_ayu">#232834</color>
+
+    <!-- Catppuccin Mocha (official palette). -->
+    <color name="catppuccin_primary">#CBA6F7</color>       <!-- mauve -->
+    <color name="catppuccin_primary_dark">#B4A0E5</color>
+    <color name="catppuccin_on_primary">#1E1E2E</color>
+    <color name="catppuccin_accent">#89B4FA</color>        <!-- blue -->
+    <color name="catppuccin_blue">#89B4FA</color>
+    <color name="catppuccin_background">#1E1E2E</color>
+    <color name="catppuccin_surface">#28283D</color>
+    <color name="catppuccin_surface_variant">#313244</color>
+    <color name="catppuccin_container">#45475A</color>
+    <color name="catppuccin_on_surface">#CDD6F4</color>
+    <color name="catppuccin_on_surface_variant">#BAC2DE</color>
+    <color name="catppuccin_outline">#6C7086</color>
+    <color name="catppuccin_outline_variant">#313244</color>
+    <color name="catppuccin_green">#A6E3A1</color>
+    <color name="catppuccin_red">#F38BA8</color>
+    <color name="catppuccin_yellow">#F9E2AF</color>
+    <color name="catppuccin_100">#45475A</color>
+    <color name="catppuccin_300">#6C7086</color>
+    <color name="card_elevated_catppuccin">#28283D</color>
+
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 917b33cd8..27ed8e5b7 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -16,6 +16,11 @@
     <string name="theme">Theme</string>
     <string name="theme_dynamic">Dynamic (Material You)</string>
     <string name="theme_dark_high_contrast">Dark High Contrast</string>
+    <string name="theme_dracula_m3">Dracula</string>
+    <string name="theme_nord">Nord</string>
+    <string name="theme_monokai">Monokai</string>
+    <string name="theme_ayu">Ayu</string>
+    <string name="theme_catppuccin">Catppuccin</string>
     <string name="theme_classic_colors">Classic colors…</string>
     <string name="theme_classic_color_swatch">Color theme %1$d</string>
     <string name="document">Document</string>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 9e1897547..c7babbb45 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -33,6 +33,7 @@
         <item name="colorButtonNormal">?colorAccent</item>
         <item name="android:navigationBarColor">?colorPrimaryDark</item>
         <item name="colorPrimary">@color/material_pink_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -40,8 +41,6 @@
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
-        <!-- App-bar/status-bar chrome background; default = primary (legacy look). -->
-        <item name="appBarBackgroundColor">?attr/colorPrimary</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,
@@ -130,6 +129,7 @@
         <item name="colorButtonNormal">?colorAccent</item>
         <item name="android:navigationBarColor">?colorPrimaryDark</item>
         <item name="colorPrimary">@color/material_pink_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -137,8 +137,6 @@
         <item name="colorMaterial100">@color/material_pink_100</item>
         <item name="colorMaterial300">@color/material_pink_300</item>
         <item name="cardElevatedSurfaceColor">@color/card_elevated_pink</item>
-        <!-- App-bar/status-bar chrome background; default = primary (legacy look). -->
-        <item name="appBarBackgroundColor">?attr/colorPrimary</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,
@@ -257,6 +255,22 @@
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
 
+    <style name="Widget.SagerNet.BottomAppBar.DraculaM3">
+        <item name="backgroundTint">?attr/colorSurface</item>
+    </style>
+    <style name="Widget.SagerNet.BottomAppBar.Nord">
+        <item name="backgroundTint">?attr/colorSurface</item>
+    </style>
+    <style name="Widget.SagerNet.BottomAppBar.Monokai">
+        <item name="backgroundTint">?attr/colorSurface</item>
+    </style>
+    <style name="Widget.SagerNet.BottomAppBar.Ayu">
+        <item name="backgroundTint">?attr/colorSurface</item>
+    </style>
+    <style name="Widget.SagerNet.BottomAppBar.Catppuccin">
+        <item name="backgroundTint">?attr/colorSurface</item>
+    </style>
+
     <style name="Widget.SagerNet.FloatingActionButton" parent="Widget.Material3.FloatingActionButton.Primary">
         <item name="backgroundTint">?attr/fabColorBackground</item>
         <item name="tint">?attr/colorOnPrimary</item>
@@ -346,6 +360,7 @@
 
     <style name="Theme.SagerNet.Pink_SSR" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/color_pink_ssr</item>
+        <item name="appBarBackgroundColor">@color/color_pink_ssr</item>
         <item name="colorPrimaryDark">@color/color_pink_ssr</item>
         <item name="colorAccent">@color/material_pink_accent_200</item>
         <item name="colorMaterial100">@color/material_pink_accent_100</item>
@@ -355,6 +370,7 @@
 
     <style name="Theme.SagerNet.Amber" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_amber_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -365,6 +381,7 @@
 
     <style name="Theme.SagerNet.Blue" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_blue_500</item>
+        <item name="appBarBackgroundColor">@color/material_blue_500</item>
         <item name="colorPrimaryDark">@color/material_blue_700</item>
         <item name="colorAccent">@color/material_blue_accent_200</item>
         <item name="colorMaterial100">@color/material_blue_100</item>
@@ -374,6 +391,7 @@
 
     <style name="Theme.SagerNet.BlueGrey" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_blue_grey_500</item>
+        <item name="appBarBackgroundColor">@color/material_blue_grey_500</item>
         <item name="colorPrimaryDark">@color/material_blue_grey_700</item>
         <item name="colorAccent">@color/material_blue_grey_200</item>
         <item name="colorMaterial100">@color/material_blue_grey_100</item>
@@ -383,6 +401,7 @@
 
     <style name="Theme.SagerNet.Brown" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_brown_500</item>
+        <item name="appBarBackgroundColor">@color/material_brown_500</item>
         <item name="colorPrimaryDark">@color/material_brown_700</item>
         <item name="colorAccent">@color/material_brown_200</item>
         <item name="colorMaterial100">@color/material_brown_100</item>
@@ -392,6 +411,7 @@
 
     <style name="Theme.SagerNet.Cyan" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_cyan_500</item>
+        <item name="appBarBackgroundColor">@color/material_cyan_500</item>
         <item name="colorPrimaryDark">@color/material_cyan_700</item>
         <item name="colorAccent">@color/material_cyan_accent_200</item>
         <item name="colorMaterial100">@color/material_cyan_100</item>
@@ -401,6 +421,7 @@
 
     <style name="Theme.SagerNet.DeepOrange" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_deep_orange_500</item>
+        <item name="appBarBackgroundColor">@color/material_deep_orange_500</item>
         <item name="colorPrimaryDark">@color/material_deep_orange_700</item>
         <item name="colorAccent">@color/material_deep_orange_accent_200</item>
         <item name="colorMaterial100">@color/material_deep_orange_100</item>
@@ -410,6 +431,7 @@
 
     <style name="Theme.SagerNet.DeepPurple" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_deep_purple_500</item>
+        <item name="appBarBackgroundColor">@color/material_deep_purple_500</item>
         <item name="colorPrimaryDark">@color/material_deep_purple_700</item>
         <item name="colorAccent">@color/material_deep_purple_accent_200</item>
         <item name="colorMaterial100">@color/material_deep_purple_100</item>
@@ -419,6 +441,7 @@
 
     <style name="Theme.SagerNet.Green" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_green_500</item>
+        <item name="appBarBackgroundColor">@color/material_green_500</item>
         <item name="colorPrimaryDark">@color/material_green_700</item>
         <item name="colorAccent">@color/material_green_accent_200</item>
         <item name="colorMaterial100">@color/material_green_100</item>
@@ -428,6 +451,7 @@
 
     <style name="Theme.SagerNet.Grey" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_grey_500</item>
+        <item name="appBarBackgroundColor">@color/material_grey_500</item>
         <item name="colorPrimaryDark">@color/material_grey_700</item>
         <item name="colorAccent">@color/material_grey_200</item>
         <item name="colorMaterial100">@color/material_grey_100</item>
@@ -437,6 +461,7 @@
 
     <style name="Theme.SagerNet.Indigo" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_indigo_500</item>
+        <item name="appBarBackgroundColor">@color/material_indigo_500</item>
         <item name="colorPrimaryDark">@color/material_indigo_700</item>
         <item name="colorAccent">@color/material_indigo_accent_200</item>
         <item name="colorMaterial100">@color/material_indigo_100</item>
@@ -446,6 +471,7 @@
 
     <style name="Theme.SagerNet.LightBlue" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_light_blue_500</item>
+        <item name="appBarBackgroundColor">@color/material_light_blue_500</item>
         <item name="colorPrimaryDark">@color/material_light_blue_700</item>
         <item name="colorAccent">@color/material_light_blue_accent_200</item>
         <item name="colorMaterial100">@color/material_light_blue_100</item>
@@ -455,6 +481,7 @@
 
     <style name="Theme.SagerNet.LightGreen" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_light_green_500</item>
+        <item name="appBarBackgroundColor">@color/material_light_green_500</item>
         <item name="colorPrimaryDark">@color/material_light_green_700</item>
         <item name="colorAccent">@color/material_light_green_accent_200</item>
         <item name="colorMaterial100">@color/material_light_green_100</item>
@@ -464,6 +491,7 @@
 
     <style name="Theme.SagerNet.Lime" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_lime_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -474,6 +502,7 @@
 
     <style name="Theme.SagerNet.Orange" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_orange_500</item>
+        <item name="appBarBackgroundColor">@color/material_orange_500</item>
         <item name="colorPrimaryDark">@color/material_orange_700</item>
         <item name="colorAccent">@color/material_orange_accent_200</item>
         <item name="colorMaterial100">@color/material_orange_100</item>
@@ -483,6 +512,7 @@
 
     <style name="Theme.SagerNet.Purple" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_purple_500</item>
+        <item name="appBarBackgroundColor">@color/material_purple_500</item>
         <item name="colorPrimaryDark">@color/material_purple_700</item>
         <item name="colorAccent">@color/material_purple_accent_200</item>
         <item name="colorMaterial100">@color/material_purple_100</item>
@@ -492,6 +522,7 @@
 
     <style name="Theme.SagerNet.Red" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_red_500</item>
+        <item name="appBarBackgroundColor">@color/material_red_500</item>
         <item name="colorPrimaryDark">@color/material_red_700</item>
         <item name="colorAccent">@color/material_red_accent_200</item>
         <item name="colorMaterial100">@color/material_red_100</item>
@@ -501,6 +532,7 @@
 
     <style name="Theme.SagerNet.Teal" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_teal_500</item>
+        <item name="appBarBackgroundColor">@color/material_teal_500</item>
         <item name="colorPrimaryDark">@color/material_teal_700</item>
         <item name="colorAccent">@color/material_teal_accent_200</item>
         <item name="colorMaterial100">@color/material_teal_100</item>
@@ -510,6 +542,7 @@
 
     <style name="Theme.SagerNet.Yellow" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/material_yellow_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -521,6 +554,7 @@
 
     <style name="Theme.SagerNet.Dialog.Amber" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_amber_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -531,6 +565,7 @@
 
     <style name="Theme.SagerNet.Dialog.Blue" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_blue_500</item>
+        <item name="appBarBackgroundColor">@color/material_blue_500</item>
         <item name="colorPrimaryDark">@color/material_blue_700</item>
         <item name="colorAccent">@color/material_blue_accent_200</item>
         <item name="colorMaterial100">@color/material_blue_100</item>
@@ -540,6 +575,7 @@
 
     <style name="Theme.SagerNet.Dialog.BlueGrey" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_blue_grey_500</item>
+        <item name="appBarBackgroundColor">@color/material_blue_grey_500</item>
         <item name="colorPrimaryDark">@color/material_blue_grey_700</item>
         <item name="colorAccent">@color/material_blue_grey_200</item>
         <item name="colorMaterial100">@color/material_blue_grey_100</item>
@@ -549,6 +585,7 @@
 
     <style name="Theme.SagerNet.Dialog.Brown" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_brown_500</item>
+        <item name="appBarBackgroundColor">@color/material_brown_500</item>
         <item name="colorPrimaryDark">@color/material_brown_700</item>
         <item name="colorAccent">@color/material_brown_200</item>
         <item name="colorMaterial100">@color/material_brown_100</item>
@@ -558,6 +595,7 @@
 
     <style name="Theme.SagerNet.Dialog.Cyan" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_cyan_500</item>
+        <item name="appBarBackgroundColor">@color/material_cyan_500</item>
         <item name="colorPrimaryDark">@color/material_cyan_700</item>
         <item name="colorAccent">@color/material_cyan_accent_200</item>
         <item name="colorMaterial100">@color/material_cyan_100</item>
@@ -567,6 +605,7 @@
 
     <style name="Theme.SagerNet.Dialog.DeepOrange" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_deep_orange_500</item>
+        <item name="appBarBackgroundColor">@color/material_deep_orange_500</item>
         <item name="colorPrimaryDark">@color/material_deep_orange_700</item>
         <item name="colorAccent">@color/material_deep_orange_accent_200</item>
         <item name="colorMaterial100">@color/material_deep_orange_100</item>
@@ -576,6 +615,7 @@
 
     <style name="Theme.SagerNet.Dialog.DeepPurple" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_deep_purple_500</item>
+        <item name="appBarBackgroundColor">@color/material_deep_purple_500</item>
         <item name="colorPrimaryDark">@color/material_deep_purple_700</item>
         <item name="colorAccent">@color/material_deep_purple_accent_200</item>
         <item name="colorMaterial100">@color/material_deep_purple_100</item>
@@ -585,6 +625,7 @@
 
     <style name="Theme.SagerNet.Dialog.Green" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_green_500</item>
+        <item name="appBarBackgroundColor">@color/material_green_500</item>
         <item name="colorPrimaryDark">@color/material_green_700</item>
         <item name="colorAccent">@color/material_green_accent_200</item>
         <item name="colorMaterial100">@color/material_green_100</item>
@@ -594,6 +635,7 @@
 
     <style name="Theme.SagerNet.Dialog.Grey" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_grey_500</item>
+        <item name="appBarBackgroundColor">@color/material_grey_500</item>
         <item name="colorPrimaryDark">@color/material_grey_700</item>
         <item name="colorAccent">@color/material_grey_200</item>
         <item name="colorMaterial100">@color/material_grey_100</item>
@@ -603,6 +645,7 @@
 
     <style name="Theme.SagerNet.Dialog.Indigo" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_indigo_500</item>
+        <item name="appBarBackgroundColor">@color/material_indigo_500</item>
         <item name="colorPrimaryDark">@color/material_indigo_700</item>
         <item name="colorAccent">@color/material_indigo_accent_200</item>
         <item name="colorMaterial100">@color/material_indigo_100</item>
@@ -612,6 +655,7 @@
 
     <style name="Theme.SagerNet.Dialog.LightBlue" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_light_blue_500</item>
+        <item name="appBarBackgroundColor">@color/material_light_blue_500</item>
         <item name="colorPrimaryDark">@color/material_light_blue_700</item>
         <item name="colorAccent">@color/material_light_blue_accent_200</item>
         <item name="colorMaterial100">@color/material_light_blue_100</item>
@@ -621,6 +665,7 @@
 
     <style name="Theme.SagerNet.Dialog.LightGreen" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_light_green_500</item>
+        <item name="appBarBackgroundColor">@color/material_light_green_500</item>
         <item name="colorPrimaryDark">@color/material_light_green_700</item>
         <item name="colorAccent">@color/material_light_green_accent_200</item>
         <item name="colorMaterial100">@color/material_light_green_100</item>
@@ -630,6 +675,7 @@
 
     <style name="Theme.SagerNet.Dialog.Lime" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_lime_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -640,6 +686,7 @@
 
     <style name="Theme.SagerNet.Dialog.Orange" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_orange_500</item>
+        <item name="appBarBackgroundColor">@color/material_orange_500</item>
         <item name="colorPrimaryDark">@color/material_orange_700</item>
         <item name="colorAccent">@color/material_orange_accent_200</item>
         <item name="colorMaterial100">@color/material_orange_100</item>
@@ -649,6 +696,7 @@
 
     <style name="Theme.SagerNet.Dialog.Purple" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_purple_500</item>
+        <item name="appBarBackgroundColor">@color/material_purple_500</item>
         <item name="colorPrimaryDark">@color/material_purple_700</item>
         <item name="colorAccent">@color/material_purple_accent_200</item>
         <item name="colorMaterial100">@color/material_purple_100</item>
@@ -658,6 +706,7 @@
 
     <style name="Theme.SagerNet.Dialog.Red" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_red_500</item>
+        <item name="appBarBackgroundColor">@color/material_red_500</item>
         <item name="colorPrimaryDark">@color/material_red_700</item>
         <item name="colorAccent">@color/material_red_accent_200</item>
         <item name="colorMaterial100">@color/material_red_100</item>
@@ -667,6 +716,7 @@
 
     <style name="Theme.SagerNet.Dialog.Pink_SSR" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/color_pink_ssr</item>
+        <item name="appBarBackgroundColor">@color/color_pink_ssr</item>
         <item name="colorPrimaryDark">@color/color_pink_ssr</item>
         <item name="colorAccent">@color/material_pink_accent_200</item>
         <item name="colorMaterial100">@color/material_pink_accent_100</item>
@@ -676,6 +726,7 @@
 
     <style name="Theme.SagerNet.Dialog.Teal" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_teal_500</item>
+        <item name="appBarBackgroundColor">@color/material_teal_500</item>
         <item name="colorPrimaryDark">@color/material_teal_700</item>
         <item name="colorAccent">@color/material_teal_accent_200</item>
         <item name="colorMaterial100">@color/material_teal_100</item>
@@ -685,6 +736,7 @@
 
     <style name="Theme.SagerNet.Dialog.Yellow" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/material_yellow_500</item>
+        <item name="appBarBackgroundColor">@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>
@@ -696,6 +748,7 @@
 
     <style name="Theme.SagerNet.Black" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/color_ng_black_primary</item>
+        <item name="appBarBackgroundColor">@color/color_ng_black_primary</item>
         <item name="colorPrimaryDark">@color/color_ng_black_primary</item>
         <item name="colorAccent">@color/color_ng_black_accent</item>
         <item name="colorMaterial100">@color/color_ng_black_primary</item>
@@ -722,6 +775,7 @@
 
     <style name="Theme.SagerNet.VerdantMint" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/color_verdant_mint</item>
+        <item name="appBarBackgroundColor">@color/color_verdant_mint</item>
         <item name="colorPrimaryDark">@color/color_verdant_mint_dark</item>
         <item name="colorAccent">@color/color_verdant_mint_accent</item>
         <item name="colorMaterial100">@color/color_verdant_mint_100</item>
@@ -735,6 +789,7 @@
          night mode on (see SettingsPreferenceFragment). -->
     <style name="Theme.SagerNet.Dracula" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/color_dracula</item>
+        <item name="appBarBackgroundColor">@color/color_dracula</item>
         <item name="colorPrimaryDark">@color/color_dracula_dark</item>
         <item name="colorAccent">@color/color_dracula_accent</item>
         <item name="colorMaterial100">@color/color_dracula_100</item>
@@ -761,6 +816,7 @@
          on (see SettingsPreferenceFragment). -->
     <style name="Theme.SagerNet.DarkHighContrast" parent="Theme.SagerNet">
         <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
         <item name="colorAccent">@color/dhc_accent</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
@@ -778,7 +834,6 @@
         <!-- M3 dark chrome: app bar / bottom bar use the black surface, not the
              green primary, so green/blue/red accents are reserved for actions and
              status. Status & nav bars are black to match the OLED canvas. -->
-        <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.DarkHighContrast</item>
         <item name="android:statusBarColor">@color/dhc_background</item>
         <item name="android:navigationBarColor">@color/dhc_background</item>
@@ -824,8 +879,280 @@
         <item name="navSelectedColor">?attr/colorPrimary</item>
     </style>
 
+    <style name="Theme.SagerNet.DraculaM3" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/draculam3_primary</item>
+        <item name="appBarBackgroundColor">@color/draculam3_background</item>
+        <item name="colorPrimaryDark">@color/draculam3_primary_dark</item>
+        <item name="colorAccent">@color/draculam3_accent</item>
+        <item name="colorOnPrimary">@color/draculam3_on_primary</item>
+        <item name="colorMaterial100">@color/draculam3_100</item>
+        <item name="colorMaterial300">@color/draculam3_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_draculam3</item>
+
+        <item name="colorSurface">@color/draculam3_surface</item>
+        <item name="colorOnSurface">@color/draculam3_on_surface</item>
+        <item name="android:colorBackground">@color/draculam3_background</item>
+        <item name="colorOnBackground">@color/draculam3_on_surface</item>
+        <item name="android:windowBackground">@color/draculam3_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.DraculaM3</item>
+        <item name="android:statusBarColor">@color/draculam3_background</item>
+        <item name="android:navigationBarColor">@color/draculam3_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/draculam3_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/draculam3_primary</item>
+        <item name="tabIndicatorColor">@color/draculam3_primary</item>
+
+        <item name="colorPrimaryContainer">@color/draculam3_container</item>
+        <item name="colorOnPrimaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSecondary">@color/draculam3_accent</item>
+        <item name="colorSecondaryContainer">@color/draculam3_container</item>
+        <item name="colorOnSecondaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorTertiary">@color/draculam3_blue</item>
+        <item name="colorTertiaryContainer">@color/draculam3_container</item>
+        <item name="colorOnTertiaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSurfaceVariant">@color/draculam3_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/draculam3_on_surface_variant</item>
+        <item name="colorOutline">@color/draculam3_outline</item>
+        <item name="colorOutlineVariant">@color/draculam3_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/draculam3_accent</item>
+        <item name="accentOrTextPrimary">@color/draculam3_accent</item>
+        <item name="primaryOrTextSecondary">@color/draculam3_primary</item>
+        <item name="primaryOrTextPrimary">@color/draculam3_primary</item>
+        <item name="protocolColor">@color/draculam3_green</item>
+        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="statusConnectedColor">@color/draculam3_green</item>
+        <item name="statusStoppedColor">@color/draculam3_red</item>
+        <item name="statusConnectingColor">@color/draculam3_yellow</item>
+        <item name="testFailColor">@color/draculam3_red</item>
+        <item name="speedTextColor">@color/draculam3_accent</item>
+        <item name="fabStoppedColor">@color/draculam3_on_primary</item>
+        <item name="fabConnectedColor">@color/draculam3_on_primary</item>
+        <item name="statusDetailColor">@color/draculam3_accent</item>
+        <item name="statusTestingColor">@color/draculam3_yellow</item>
+        <item name="routeProxyColor">@color/draculam3_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Nord" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/nord_primary</item>
+        <item name="appBarBackgroundColor">@color/nord_background</item>
+        <item name="colorPrimaryDark">@color/nord_primary_dark</item>
+        <item name="colorAccent">@color/nord_accent</item>
+        <item name="colorOnPrimary">@color/nord_on_primary</item>
+        <item name="colorMaterial100">@color/nord_100</item>
+        <item name="colorMaterial300">@color/nord_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_nord</item>
+
+        <item name="colorSurface">@color/nord_surface</item>
+        <item name="colorOnSurface">@color/nord_on_surface</item>
+        <item name="android:colorBackground">@color/nord_background</item>
+        <item name="colorOnBackground">@color/nord_on_surface</item>
+        <item name="android:windowBackground">@color/nord_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Nord</item>
+        <item name="android:statusBarColor">@color/nord_background</item>
+        <item name="android:navigationBarColor">@color/nord_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/nord_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/nord_primary</item>
+        <item name="tabIndicatorColor">@color/nord_primary</item>
+
+        <item name="colorPrimaryContainer">@color/nord_container</item>
+        <item name="colorOnPrimaryContainer">@color/nord_on_surface</item>
+        <item name="colorSecondary">@color/nord_accent</item>
+        <item name="colorSecondaryContainer">@color/nord_container</item>
+        <item name="colorOnSecondaryContainer">@color/nord_on_surface</item>
+        <item name="colorTertiary">@color/nord_blue</item>
+        <item name="colorTertiaryContainer">@color/nord_container</item>
+        <item name="colorOnTertiaryContainer">@color/nord_on_surface</item>
+        <item name="colorSurfaceVariant">@color/nord_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/nord_on_surface_variant</item>
+        <item name="colorOutline">@color/nord_outline</item>
+        <item name="colorOutlineVariant">@color/nord_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/nord_accent</item>
+        <item name="accentOrTextPrimary">@color/nord_accent</item>
+        <item name="primaryOrTextSecondary">@color/nord_primary</item>
+        <item name="primaryOrTextPrimary">@color/nord_primary</item>
+        <item name="protocolColor">@color/nord_green</item>
+        <item name="profileNameColor">@color/nord_on_surface</item>
+        <item name="statusConnectedColor">@color/nord_green</item>
+        <item name="statusStoppedColor">@color/nord_red</item>
+        <item name="statusConnectingColor">@color/nord_yellow</item>
+        <item name="testFailColor">@color/nord_red</item>
+        <item name="speedTextColor">@color/nord_accent</item>
+        <item name="fabStoppedColor">@color/nord_on_primary</item>
+        <item name="fabConnectedColor">@color/nord_on_primary</item>
+        <item name="statusDetailColor">@color/nord_accent</item>
+        <item name="statusTestingColor">@color/nord_yellow</item>
+        <item name="routeProxyColor">@color/nord_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Monokai" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/monokai_primary</item>
+        <item name="appBarBackgroundColor">@color/monokai_background</item>
+        <item name="colorPrimaryDark">@color/monokai_primary_dark</item>
+        <item name="colorAccent">@color/monokai_accent</item>
+        <item name="colorOnPrimary">@color/monokai_on_primary</item>
+        <item name="colorMaterial100">@color/monokai_100</item>
+        <item name="colorMaterial300">@color/monokai_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_monokai</item>
+
+        <item name="colorSurface">@color/monokai_surface</item>
+        <item name="colorOnSurface">@color/monokai_on_surface</item>
+        <item name="android:colorBackground">@color/monokai_background</item>
+        <item name="colorOnBackground">@color/monokai_on_surface</item>
+        <item name="android:windowBackground">@color/monokai_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Monokai</item>
+        <item name="android:statusBarColor">@color/monokai_background</item>
+        <item name="android:navigationBarColor">@color/monokai_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/monokai_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/monokai_primary</item>
+        <item name="tabIndicatorColor">@color/monokai_primary</item>
+
+        <item name="colorPrimaryContainer">@color/monokai_container</item>
+        <item name="colorOnPrimaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSecondary">@color/monokai_accent</item>
+        <item name="colorSecondaryContainer">@color/monokai_container</item>
+        <item name="colorOnSecondaryContainer">@color/monokai_on_surface</item>
+        <item name="colorTertiary">@color/monokai_blue</item>
+        <item name="colorTertiaryContainer">@color/monokai_container</item>
+        <item name="colorOnTertiaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSurfaceVariant">@color/monokai_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/monokai_on_surface_variant</item>
+        <item name="colorOutline">@color/monokai_outline</item>
+        <item name="colorOutlineVariant">@color/monokai_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/monokai_accent</item>
+        <item name="accentOrTextPrimary">@color/monokai_accent</item>
+        <item name="primaryOrTextSecondary">@color/monokai_primary</item>
+        <item name="primaryOrTextPrimary">@color/monokai_primary</item>
+        <item name="protocolColor">@color/monokai_green</item>
+        <item name="profileNameColor">@color/monokai_on_surface</item>
+        <item name="statusConnectedColor">@color/monokai_green</item>
+        <item name="statusStoppedColor">@color/monokai_red</item>
+        <item name="statusConnectingColor">@color/monokai_yellow</item>
+        <item name="testFailColor">@color/monokai_red</item>
+        <item name="speedTextColor">@color/monokai_accent</item>
+        <item name="fabStoppedColor">@color/monokai_on_primary</item>
+        <item name="fabConnectedColor">@color/monokai_on_primary</item>
+        <item name="statusDetailColor">@color/monokai_accent</item>
+        <item name="statusTestingColor">@color/monokai_yellow</item>
+        <item name="routeProxyColor">@color/monokai_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Ayu" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/ayu_primary</item>
+        <item name="appBarBackgroundColor">@color/ayu_background</item>
+        <item name="colorPrimaryDark">@color/ayu_primary_dark</item>
+        <item name="colorAccent">@color/ayu_accent</item>
+        <item name="colorOnPrimary">@color/ayu_on_primary</item>
+        <item name="colorMaterial100">@color/ayu_100</item>
+        <item name="colorMaterial300">@color/ayu_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_ayu</item>
+
+        <item name="colorSurface">@color/ayu_surface</item>
+        <item name="colorOnSurface">@color/ayu_on_surface</item>
+        <item name="android:colorBackground">@color/ayu_background</item>
+        <item name="colorOnBackground">@color/ayu_on_surface</item>
+        <item name="android:windowBackground">@color/ayu_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Ayu</item>
+        <item name="android:statusBarColor">@color/ayu_background</item>
+        <item name="android:navigationBarColor">@color/ayu_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/ayu_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/ayu_primary</item>
+        <item name="tabIndicatorColor">@color/ayu_primary</item>
+
+        <item name="colorPrimaryContainer">@color/ayu_container</item>
+        <item name="colorOnPrimaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSecondary">@color/ayu_accent</item>
+        <item name="colorSecondaryContainer">@color/ayu_container</item>
+        <item name="colorOnSecondaryContainer">@color/ayu_on_surface</item>
+        <item name="colorTertiary">@color/ayu_blue</item>
+        <item name="colorTertiaryContainer">@color/ayu_container</item>
+        <item name="colorOnTertiaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSurfaceVariant">@color/ayu_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/ayu_on_surface_variant</item>
+        <item name="colorOutline">@color/ayu_outline</item>
+        <item name="colorOutlineVariant">@color/ayu_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/ayu_accent</item>
+        <item name="accentOrTextPrimary">@color/ayu_accent</item>
+        <item name="primaryOrTextSecondary">@color/ayu_primary</item>
+        <item name="primaryOrTextPrimary">@color/ayu_primary</item>
+        <item name="protocolColor">@color/ayu_green</item>
+        <item name="profileNameColor">@color/ayu_on_surface</item>
+        <item name="statusConnectedColor">@color/ayu_green</item>
+        <item name="statusStoppedColor">@color/ayu_red</item>
+        <item name="statusConnectingColor">@color/ayu_yellow</item>
+        <item name="testFailColor">@color/ayu_red</item>
+        <item name="speedTextColor">@color/ayu_accent</item>
+        <item name="fabStoppedColor">@color/ayu_on_primary</item>
+        <item name="fabConnectedColor">@color/ayu_on_primary</item>
+        <item name="statusDetailColor">@color/ayu_accent</item>
+        <item name="statusTestingColor">@color/ayu_yellow</item>
+        <item name="routeProxyColor">@color/ayu_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Theme.SagerNet.Catppuccin" parent="Theme.SagerNet">
+        <item name="colorPrimary">@color/catppuccin_primary</item>
+        <item name="appBarBackgroundColor">@color/catppuccin_background</item>
+        <item name="colorPrimaryDark">@color/catppuccin_primary_dark</item>
+        <item name="colorAccent">@color/catppuccin_accent</item>
+        <item name="colorOnPrimary">@color/catppuccin_on_primary</item>
+        <item name="colorMaterial100">@color/catppuccin_100</item>
+        <item name="colorMaterial300">@color/catppuccin_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_catppuccin</item>
+
+        <item name="colorSurface">@color/catppuccin_surface</item>
+        <item name="colorOnSurface">@color/catppuccin_on_surface</item>
+        <item name="android:colorBackground">@color/catppuccin_background</item>
+        <item name="colorOnBackground">@color/catppuccin_on_surface</item>
+        <item name="android:windowBackground">@color/catppuccin_background</item>
+        <item name="bottomAppBarStyle">@style/Widget.SagerNet.BottomAppBar.Catppuccin</item>
+        <item name="android:statusBarColor">@color/catppuccin_background</item>
+        <item name="android:navigationBarColor">@color/catppuccin_background</item>
+        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
+        <item name="tabTextColor">@color/catppuccin_on_surface_variant</item>
+        <item name="tabSelectedTextColor">@color/catppuccin_primary</item>
+        <item name="tabIndicatorColor">@color/catppuccin_primary</item>
+
+        <item name="colorPrimaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnPrimaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSecondary">@color/catppuccin_accent</item>
+        <item name="colorSecondaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnSecondaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorTertiary">@color/catppuccin_blue</item>
+        <item name="colorTertiaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnTertiaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSurfaceVariant">@color/catppuccin_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/catppuccin_on_surface_variant</item>
+        <item name="colorOutline">@color/catppuccin_outline</item>
+        <item name="colorOutlineVariant">@color/catppuccin_outline_variant</item>
+        <item name="accentOrTextSecondary">@color/catppuccin_accent</item>
+        <item name="accentOrTextPrimary">@color/catppuccin_accent</item>
+        <item name="primaryOrTextSecondary">@color/catppuccin_primary</item>
+        <item name="primaryOrTextPrimary">@color/catppuccin_primary</item>
+        <item name="protocolColor">@color/catppuccin_green</item>
+        <item name="profileNameColor">@color/catppuccin_on_surface</item>
+        <item name="statusConnectedColor">@color/catppuccin_green</item>
+        <item name="statusStoppedColor">@color/catppuccin_red</item>
+        <item name="statusConnectingColor">@color/catppuccin_yellow</item>
+        <item name="testFailColor">@color/catppuccin_red</item>
+        <item name="speedTextColor">@color/catppuccin_accent</item>
+        <item name="fabStoppedColor">@color/catppuccin_on_primary</item>
+        <item name="fabConnectedColor">@color/catppuccin_on_primary</item>
+        <item name="statusDetailColor">@color/catppuccin_accent</item>
+        <item name="statusTestingColor">@color/catppuccin_yellow</item>
+        <item name="routeProxyColor">@color/catppuccin_blue</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
+    </style>
+
+
     <style name="Theme.SagerNet.Dialog.Black" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/color_ng_black_primary</item>
+        <item name="appBarBackgroundColor">@color/color_ng_black_primary</item>
         <item name="colorPrimaryDark">@color/color_ng_black_primary</item>
         <item name="colorAccent">@color/color_ng_black_accent</item>
         <item name="colorMaterial100">@color/color_ng_black_primary</item>
@@ -851,6 +1178,7 @@
 
     <style name="Theme.SagerNet.Dialog.VerdantMint" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/color_verdant_mint</item>
+        <item name="appBarBackgroundColor">@color/color_verdant_mint</item>
         <item name="colorPrimaryDark">@color/color_verdant_mint_dark</item>
         <item name="colorAccent">@color/color_verdant_mint_accent</item>
         <item name="colorMaterial100">@color/color_verdant_mint_100</item>
@@ -860,6 +1188,7 @@
 
     <style name="Theme.SagerNet.Dialog.Dracula" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/color_dracula</item>
+        <item name="appBarBackgroundColor">@color/color_dracula</item>
         <item name="colorPrimaryDark">@color/color_dracula_dark</item>
         <item name="colorAccent">@color/color_dracula_accent</item>
         <item name="colorMaterial100">@color/color_dracula_100</item>
@@ -880,6 +1209,7 @@
 
     <style name="Theme.SagerNet.Dialog.DarkHighContrast" parent="Theme.SagerNet.Dialog">
         <item name="colorPrimary">@color/dhc_primary</item>
+        <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
         <item name="colorAccent">@color/dhc_accent</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
@@ -916,9 +1246,216 @@
         <item name="routeProxyColor">@color/dhc_blue</item>
     </style>
 
+    <style name="Theme.SagerNet.Dialog.DraculaM3" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/draculam3_primary</item>
+        <item name="appBarBackgroundColor">@color/draculam3_background</item>
+        <item name="colorPrimaryDark">@color/draculam3_primary_dark</item>
+        <item name="colorAccent">@color/draculam3_accent</item>
+        <item name="colorOnPrimary">@color/draculam3_on_primary</item>
+        <item name="colorMaterial100">@color/draculam3_100</item>
+        <item name="colorMaterial300">@color/draculam3_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_draculam3</item>
+
+        <item name="colorSurface">@color/draculam3_surface</item>
+        <item name="colorOnSurface">@color/draculam3_on_surface</item>
+        <item name="android:colorBackground">@color/draculam3_background</item>
+        <item name="colorOnBackground">@color/draculam3_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/draculam3_container</item>
+        <item name="colorOnPrimaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSecondary">@color/draculam3_accent</item>
+        <item name="colorSecondaryContainer">@color/draculam3_container</item>
+        <item name="colorOnSecondaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorTertiary">@color/draculam3_blue</item>
+        <item name="colorTertiaryContainer">@color/draculam3_container</item>
+        <item name="colorOnTertiaryContainer">@color/draculam3_on_surface</item>
+        <item name="colorSurfaceVariant">@color/draculam3_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/draculam3_on_surface_variant</item>
+        <item name="colorOutline">@color/draculam3_outline</item>
+        <item name="colorOutlineVariant">@color/draculam3_outline_variant</item>
+        <item name="protocolColor">@color/draculam3_green</item>
+        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="statusConnectedColor">@color/draculam3_green</item>
+        <item name="statusStoppedColor">@color/draculam3_red</item>
+        <item name="statusConnectingColor">@color/draculam3_yellow</item>
+        <item name="testFailColor">@color/draculam3_red</item>
+        <item name="speedTextColor">@color/draculam3_accent</item>
+        <item name="fabStoppedColor">@color/draculam3_on_primary</item>
+        <item name="fabConnectedColor">@color/draculam3_on_primary</item>
+        <item name="statusDetailColor">@color/draculam3_accent</item>
+        <item name="statusTestingColor">@color/draculam3_yellow</item>
+        <item name="routeProxyColor">@color/draculam3_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Nord" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/nord_primary</item>
+        <item name="appBarBackgroundColor">@color/nord_background</item>
+        <item name="colorPrimaryDark">@color/nord_primary_dark</item>
+        <item name="colorAccent">@color/nord_accent</item>
+        <item name="colorOnPrimary">@color/nord_on_primary</item>
+        <item name="colorMaterial100">@color/nord_100</item>
+        <item name="colorMaterial300">@color/nord_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_nord</item>
+
+        <item name="colorSurface">@color/nord_surface</item>
+        <item name="colorOnSurface">@color/nord_on_surface</item>
+        <item name="android:colorBackground">@color/nord_background</item>
+        <item name="colorOnBackground">@color/nord_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/nord_container</item>
+        <item name="colorOnPrimaryContainer">@color/nord_on_surface</item>
+        <item name="colorSecondary">@color/nord_accent</item>
+        <item name="colorSecondaryContainer">@color/nord_container</item>
+        <item name="colorOnSecondaryContainer">@color/nord_on_surface</item>
+        <item name="colorTertiary">@color/nord_blue</item>
+        <item name="colorTertiaryContainer">@color/nord_container</item>
+        <item name="colorOnTertiaryContainer">@color/nord_on_surface</item>
+        <item name="colorSurfaceVariant">@color/nord_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/nord_on_surface_variant</item>
+        <item name="colorOutline">@color/nord_outline</item>
+        <item name="colorOutlineVariant">@color/nord_outline_variant</item>
+        <item name="protocolColor">@color/nord_green</item>
+        <item name="profileNameColor">@color/nord_on_surface</item>
+        <item name="statusConnectedColor">@color/nord_green</item>
+        <item name="statusStoppedColor">@color/nord_red</item>
+        <item name="statusConnectingColor">@color/nord_yellow</item>
+        <item name="testFailColor">@color/nord_red</item>
+        <item name="speedTextColor">@color/nord_accent</item>
+        <item name="fabStoppedColor">@color/nord_on_primary</item>
+        <item name="fabConnectedColor">@color/nord_on_primary</item>
+        <item name="statusDetailColor">@color/nord_accent</item>
+        <item name="statusTestingColor">@color/nord_yellow</item>
+        <item name="routeProxyColor">@color/nord_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Monokai" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/monokai_primary</item>
+        <item name="appBarBackgroundColor">@color/monokai_background</item>
+        <item name="colorPrimaryDark">@color/monokai_primary_dark</item>
+        <item name="colorAccent">@color/monokai_accent</item>
+        <item name="colorOnPrimary">@color/monokai_on_primary</item>
+        <item name="colorMaterial100">@color/monokai_100</item>
+        <item name="colorMaterial300">@color/monokai_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_monokai</item>
+
+        <item name="colorSurface">@color/monokai_surface</item>
+        <item name="colorOnSurface">@color/monokai_on_surface</item>
+        <item name="android:colorBackground">@color/monokai_background</item>
+        <item name="colorOnBackground">@color/monokai_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/monokai_container</item>
+        <item name="colorOnPrimaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSecondary">@color/monokai_accent</item>
+        <item name="colorSecondaryContainer">@color/monokai_container</item>
+        <item name="colorOnSecondaryContainer">@color/monokai_on_surface</item>
+        <item name="colorTertiary">@color/monokai_blue</item>
+        <item name="colorTertiaryContainer">@color/monokai_container</item>
+        <item name="colorOnTertiaryContainer">@color/monokai_on_surface</item>
+        <item name="colorSurfaceVariant">@color/monokai_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/monokai_on_surface_variant</item>
+        <item name="colorOutline">@color/monokai_outline</item>
+        <item name="colorOutlineVariant">@color/monokai_outline_variant</item>
+        <item name="protocolColor">@color/monokai_green</item>
+        <item name="profileNameColor">@color/monokai_on_surface</item>
+        <item name="statusConnectedColor">@color/monokai_green</item>
+        <item name="statusStoppedColor">@color/monokai_red</item>
+        <item name="statusConnectingColor">@color/monokai_yellow</item>
+        <item name="testFailColor">@color/monokai_red</item>
+        <item name="speedTextColor">@color/monokai_accent</item>
+        <item name="fabStoppedColor">@color/monokai_on_primary</item>
+        <item name="fabConnectedColor">@color/monokai_on_primary</item>
+        <item name="statusDetailColor">@color/monokai_accent</item>
+        <item name="statusTestingColor">@color/monokai_yellow</item>
+        <item name="routeProxyColor">@color/monokai_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Ayu" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/ayu_primary</item>
+        <item name="appBarBackgroundColor">@color/ayu_background</item>
+        <item name="colorPrimaryDark">@color/ayu_primary_dark</item>
+        <item name="colorAccent">@color/ayu_accent</item>
+        <item name="colorOnPrimary">@color/ayu_on_primary</item>
+        <item name="colorMaterial100">@color/ayu_100</item>
+        <item name="colorMaterial300">@color/ayu_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_ayu</item>
+
+        <item name="colorSurface">@color/ayu_surface</item>
+        <item name="colorOnSurface">@color/ayu_on_surface</item>
+        <item name="android:colorBackground">@color/ayu_background</item>
+        <item name="colorOnBackground">@color/ayu_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/ayu_container</item>
+        <item name="colorOnPrimaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSecondary">@color/ayu_accent</item>
+        <item name="colorSecondaryContainer">@color/ayu_container</item>
+        <item name="colorOnSecondaryContainer">@color/ayu_on_surface</item>
+        <item name="colorTertiary">@color/ayu_blue</item>
+        <item name="colorTertiaryContainer">@color/ayu_container</item>
+        <item name="colorOnTertiaryContainer">@color/ayu_on_surface</item>
+        <item name="colorSurfaceVariant">@color/ayu_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/ayu_on_surface_variant</item>
+        <item name="colorOutline">@color/ayu_outline</item>
+        <item name="colorOutlineVariant">@color/ayu_outline_variant</item>
+        <item name="protocolColor">@color/ayu_green</item>
+        <item name="profileNameColor">@color/ayu_on_surface</item>
+        <item name="statusConnectedColor">@color/ayu_green</item>
+        <item name="statusStoppedColor">@color/ayu_red</item>
+        <item name="statusConnectingColor">@color/ayu_yellow</item>
+        <item name="testFailColor">@color/ayu_red</item>
+        <item name="speedTextColor">@color/ayu_accent</item>
+        <item name="fabStoppedColor">@color/ayu_on_primary</item>
+        <item name="fabConnectedColor">@color/ayu_on_primary</item>
+        <item name="statusDetailColor">@color/ayu_accent</item>
+        <item name="statusTestingColor">@color/ayu_yellow</item>
+        <item name="routeProxyColor">@color/ayu_blue</item>
+    </style>
+
+    <style name="Theme.SagerNet.Dialog.Catppuccin" parent="Theme.SagerNet.Dialog">
+        <item name="colorPrimary">@color/catppuccin_primary</item>
+        <item name="appBarBackgroundColor">@color/catppuccin_background</item>
+        <item name="colorPrimaryDark">@color/catppuccin_primary_dark</item>
+        <item name="colorAccent">@color/catppuccin_accent</item>
+        <item name="colorOnPrimary">@color/catppuccin_on_primary</item>
+        <item name="colorMaterial100">@color/catppuccin_100</item>
+        <item name="colorMaterial300">@color/catppuccin_300</item>
+        <item name="cardElevatedSurfaceColor">@color/card_elevated_catppuccin</item>
+
+        <item name="colorSurface">@color/catppuccin_surface</item>
+        <item name="colorOnSurface">@color/catppuccin_on_surface</item>
+        <item name="android:colorBackground">@color/catppuccin_background</item>
+        <item name="colorOnBackground">@color/catppuccin_on_surface</item>
+
+        <item name="colorPrimaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnPrimaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSecondary">@color/catppuccin_accent</item>
+        <item name="colorSecondaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnSecondaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorTertiary">@color/catppuccin_blue</item>
+        <item name="colorTertiaryContainer">@color/catppuccin_container</item>
+        <item name="colorOnTertiaryContainer">@color/catppuccin_on_surface</item>
+        <item name="colorSurfaceVariant">@color/catppuccin_surface_variant</item>
+        <item name="colorOnSurfaceVariant">@color/catppuccin_on_surface_variant</item>
+        <item name="colorOutline">@color/catppuccin_outline</item>
+        <item name="colorOutlineVariant">@color/catppuccin_outline_variant</item>
+        <item name="protocolColor">@color/catppuccin_green</item>
+        <item name="profileNameColor">@color/catppuccin_on_surface</item>
+        <item name="statusConnectedColor">@color/catppuccin_green</item>
+        <item name="statusStoppedColor">@color/catppuccin_red</item>
+        <item name="statusConnectingColor">@color/catppuccin_yellow</item>
+        <item name="testFailColor">@color/catppuccin_red</item>
+        <item name="speedTextColor">@color/catppuccin_accent</item>
+        <item name="fabStoppedColor">@color/catppuccin_on_primary</item>
+        <item name="fabConnectedColor">@color/catppuccin_on_primary</item>
+        <item name="statusDetailColor">@color/catppuccin_accent</item>
+        <item name="statusTestingColor">@color/catppuccin_yellow</item>
+        <item name="routeProxyColor">@color/catppuccin_blue</item>
+    </style>
+
+
     <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="appBarBackgroundColor">@android:color/transparent</item>
         <item name="colorPrimaryDark">@android:color/transparent</item>
         <item name="android:backgroundDimEnabled">false</item>
         <item name="android:windowNoTitle">true</item>

From 85048c74907450ec0b5b77c83b1db4763ab1408b Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:23:24 -0400
Subject: [PATCH 07/15] CR fixes: official Catppuccin Mocha colors + DHC dialog
 fabConnectedColor

- Correct Catppuccin Mocha palette to official values: surface = mantle
  (#181825), surfaceVariant = surface0 (#313244), and primary_dark to a
  real palette color (sapphire #74C7EC) instead of a custom mauve tint.
- Add the missing fabConnectedColor to the Dark High Contrast dialog
  styles (day + night) for consistency with the app variants and the
  other modern dialog themes.

(CodeRabbit's 'missing theme styles' findings were false positives \u2014 all
12 styles exist and were verified building and on-device.)
---
 app/src/main/res/values-night/themes.xml |  1 +
 app/src/main/res/values/colors.xml       | 22 +++++++++++-----------
 app/src/main/res/values/themes.xml       |  1 +
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index ddc97b077..145ed67e4 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -451,6 +451,7 @@
         <item name="testFailColor">@color/dhc_red</item>
         <item name="speedTextColor">@color/dhc_accent</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="fabConnectedColor">@color/dhc_on_primary</item>
         <item name="statusDetailColor">@color/dhc_accent</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 184f51c29..22b684491 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -489,25 +489,25 @@
     <color name="ayu_300">#FFA759</color>
     <color name="card_elevated_ayu">#232834</color>
 
-    <!-- Catppuccin Mocha (official palette). -->
+    <!-- Catppuccin Mocha (official palette: https://catppuccin.com/palette). -->
     <color name="catppuccin_primary">#CBA6F7</color>       <!-- mauve -->
-    <color name="catppuccin_primary_dark">#B4A0E5</color>
-    <color name="catppuccin_on_primary">#1E1E2E</color>
+    <color name="catppuccin_primary_dark">#74C7EC</color>  <!-- sapphire (status bar) -->
+    <color name="catppuccin_on_primary">#1E1E2E</color>    <!-- base -->
     <color name="catppuccin_accent">#89B4FA</color>        <!-- blue -->
     <color name="catppuccin_blue">#89B4FA</color>
-    <color name="catppuccin_background">#1E1E2E</color>
-    <color name="catppuccin_surface">#28283D</color>
-    <color name="catppuccin_surface_variant">#313244</color>
-    <color name="catppuccin_container">#45475A</color>
-    <color name="catppuccin_on_surface">#CDD6F4</color>
-    <color name="catppuccin_on_surface_variant">#BAC2DE</color>
-    <color name="catppuccin_outline">#6C7086</color>
+    <color name="catppuccin_background">#1E1E2E</color>    <!-- base -->
+    <color name="catppuccin_surface">#181825</color>       <!-- mantle -->
+    <color name="catppuccin_surface_variant">#313244</color> <!-- surface0 -->
+    <color name="catppuccin_container">#45475A</color>    <!-- surface1 -->
+    <color name="catppuccin_on_surface">#CDD6F4</color>   <!-- text -->
+    <color name="catppuccin_on_surface_variant">#BAC2DE</color> <!-- subtext1 -->
+    <color name="catppuccin_outline">#6C7086</color>      <!-- overlay0 -->
     <color name="catppuccin_outline_variant">#313244</color>
     <color name="catppuccin_green">#A6E3A1</color>
     <color name="catppuccin_red">#F38BA8</color>
     <color name="catppuccin_yellow">#F9E2AF</color>
     <color name="catppuccin_100">#45475A</color>
     <color name="catppuccin_300">#6C7086</color>
-    <color name="card_elevated_catppuccin">#28283D</color>
+    <color name="card_elevated_catppuccin">#181825</color>
 
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index c7babbb45..56dc27ac9 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1241,6 +1241,7 @@
         <item name="testFailColor">@color/dhc_red</item>
         <item name="speedTextColor">@color/dhc_accent</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
+        <item name="fabConnectedColor">@color/dhc_on_primary</item>
         <item name="statusDetailColor">@color/dhc_accent</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>

From 1386524255822a910fdc6474b2f3e1191dfaaf8c Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:30:22 -0400
Subject: [PATCH 08/15] Theme polish: Dracula-M3 yellow names, DHC muted status
 text, FAB inset

Address review feedback:
- Dracula-M3: profile names now use Dracula yellow (#F1FA8C) instead of
  white, matching the authentic Dracula look.
- Dark High Contrast: the bottom-bar speed arrows and the 'tap to check
  connection' detail text now use a muted near-white (on-surface-variant)
  instead of bright blue \u2014 a more restrained OLED palette in the spirit of
  F-Droid's true-black theme; blue stays reserved for links/route-proxy.
- Lift the bottom status bar (and the docked FAB + its anchored progress
  ring) above the navigation-bar inset under edge-to-edge, so the loading
  ring is no longer clipped by the system inset.

Verified on Android (Dracula-M3 + Dark High Contrast).
---
 .../io/nekohasekai/sagernet/ui/ThemedActivity.kt     |  7 +++++++
 app/src/main/res/values-night/themes.xml             | 12 ++++++------
 app/src/main/res/values/themes.xml                   | 12 ++++++------
 3 files changed, 19 insertions(+), 12 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 1825b7385..0d85a35f3 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.view.View
 import android.widget.TextView
 import androidx.annotation.StringRes
 import androidx.appcompat.app.AppCompatActivity
@@ -59,6 +60,12 @@ abstract class ThemedActivity : AppCompatActivity {
             findViewById<AppBarLayout>(R.id.appbar)?.apply {
                 updatePadding(top = bars.top)
             }
+            // Lift the bottom status bar (and the FAB docked into it, plus the FAB's
+            // progress ring anchored to the FAB) above the navigation bar so the
+            // ring isn't clipped by the system inset under edge-to-edge.
+            findViewById<View>(R.id.stats)?.apply {
+                updatePadding(bottom = bars.bottom)
+            }
             insets
         }
     }
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index 145ed67e4..cfb0a6a00 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -137,10 +137,10 @@
         <item name="statusStoppedColor">@color/dhc_red</item>
         <item name="statusConnectingColor">@color/dhc_yellow</item>
         <item name="testFailColor">@color/dhc_red</item>
-        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="speedTextColor">@color/dhc_on_surface_variant</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
         <item name="fabConnectedColor">@color/dhc_on_primary</item>
-        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusDetailColor">@color/dhc_on_surface_variant</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
         <item name="navSelectedColor">?attr/colorPrimary</item>
@@ -186,7 +186,7 @@
         <item name="primaryOrTextSecondary">@color/draculam3_primary</item>
         <item name="primaryOrTextPrimary">@color/draculam3_primary</item>
         <item name="protocolColor">@color/draculam3_green</item>
-        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="profileNameColor">@color/draculam3_yellow</item>
         <item name="statusConnectedColor">@color/draculam3_green</item>
         <item name="statusStoppedColor">@color/draculam3_red</item>
         <item name="statusConnectingColor">@color/draculam3_yellow</item>
@@ -449,10 +449,10 @@
         <item name="statusStoppedColor">@color/dhc_red</item>
         <item name="statusConnectingColor">@color/dhc_yellow</item>
         <item name="testFailColor">@color/dhc_red</item>
-        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="speedTextColor">@color/dhc_on_surface_variant</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
         <item name="fabConnectedColor">@color/dhc_on_primary</item>
-        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusDetailColor">@color/dhc_on_surface_variant</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
     </style>
@@ -485,7 +485,7 @@
         <item name="colorOutline">@color/draculam3_outline</item>
         <item name="colorOutlineVariant">@color/draculam3_outline_variant</item>
         <item name="protocolColor">@color/draculam3_green</item>
-        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="profileNameColor">@color/draculam3_yellow</item>
         <item name="statusConnectedColor">@color/draculam3_green</item>
         <item name="statusStoppedColor">@color/draculam3_red</item>
         <item name="statusConnectingColor">@color/draculam3_yellow</item>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 56dc27ac9..86f878c11 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -868,12 +868,12 @@
         <item name="statusStoppedColor">@color/dhc_red</item>
         <item name="statusConnectingColor">@color/dhc_yellow</item>
         <item name="testFailColor">@color/dhc_red</item>
-        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="speedTextColor">@color/dhc_on_surface_variant</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
         <!-- Connected airplane icon: dark, so it stays visible on the green FAB
              (the green statusConnectedColor would vanish against it). -->
         <item name="fabConnectedColor">@color/dhc_on_primary</item>
-        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusDetailColor">@color/dhc_on_surface_variant</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
         <item name="navSelectedColor">?attr/colorPrimary</item>
@@ -919,7 +919,7 @@
         <item name="primaryOrTextSecondary">@color/draculam3_primary</item>
         <item name="primaryOrTextPrimary">@color/draculam3_primary</item>
         <item name="protocolColor">@color/draculam3_green</item>
-        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="profileNameColor">@color/draculam3_yellow</item>
         <item name="statusConnectedColor">@color/draculam3_green</item>
         <item name="statusStoppedColor">@color/draculam3_red</item>
         <item name="statusConnectingColor">@color/draculam3_yellow</item>
@@ -1239,10 +1239,10 @@
         <item name="statusStoppedColor">@color/dhc_red</item>
         <item name="statusConnectingColor">@color/dhc_yellow</item>
         <item name="testFailColor">@color/dhc_red</item>
-        <item name="speedTextColor">@color/dhc_accent</item>
+        <item name="speedTextColor">@color/dhc_on_surface_variant</item>
         <item name="fabStoppedColor">@color/dhc_on_primary</item>
         <item name="fabConnectedColor">@color/dhc_on_primary</item>
-        <item name="statusDetailColor">@color/dhc_accent</item>
+        <item name="statusDetailColor">@color/dhc_on_surface_variant</item>
         <item name="statusTestingColor">@color/dhc_yellow</item>
         <item name="routeProxyColor">@color/dhc_blue</item>
     </style>
@@ -1275,7 +1275,7 @@
         <item name="colorOutline">@color/draculam3_outline</item>
         <item name="colorOutlineVariant">@color/draculam3_outline_variant</item>
         <item name="protocolColor">@color/draculam3_green</item>
-        <item name="profileNameColor">@color/draculam3_on_surface</item>
+        <item name="profileNameColor">@color/draculam3_yellow</item>
         <item name="statusConnectedColor">@color/draculam3_green</item>
         <item name="statusStoppedColor">@color/draculam3_red</item>
         <item name="statusConnectingColor">@color/draculam3_yellow</item>

From 1a1b9762f54a594e961000e49ffee7e4deab1031 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:34:37 -0400
Subject: [PATCH 09/15] BottomAppBar variants: inherit base style explicitly
 (CR)

Give the modern themes' Widget.SagerNet.BottomAppBar.* variants an
explicit parent=Widget.SagerNet.BottomAppBar so they keep the shared
cradle/alignment/elevation config and only override backgroundTint,
rather than relying on implicit dotted-name inheritance.
---
 app/src/main/res/values/themes.xml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 86f878c11..4449b525f 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -251,23 +251,23 @@
 
     <!-- Dark High Contrast bottom bar: black surface (not the green primary) so the
          green/blue/red status text reads against it, matching the OLED design. -->
-    <style name="Widget.SagerNet.BottomAppBar.DarkHighContrast">
+    <style name="Widget.SagerNet.BottomAppBar.DarkHighContrast" parent="Widget.SagerNet.BottomAppBar">
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
 
-    <style name="Widget.SagerNet.BottomAppBar.DraculaM3">
+    <style name="Widget.SagerNet.BottomAppBar.DraculaM3" parent="Widget.SagerNet.BottomAppBar">
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
-    <style name="Widget.SagerNet.BottomAppBar.Nord">
+    <style name="Widget.SagerNet.BottomAppBar.Nord" parent="Widget.SagerNet.BottomAppBar">
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
-    <style name="Widget.SagerNet.BottomAppBar.Monokai">
+    <style name="Widget.SagerNet.BottomAppBar.Monokai" parent="Widget.SagerNet.BottomAppBar">
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
-    <style name="Widget.SagerNet.BottomAppBar.Ayu">
+    <style name="Widget.SagerNet.BottomAppBar.Ayu" parent="Widget.SagerNet.BottomAppBar">
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
-    <style name="Widget.SagerNet.BottomAppBar.Catppuccin">
+    <style name="Widget.SagerNet.BottomAppBar.Catppuccin" parent="Widget.SagerNet.BottomAppBar">
         <item name="backgroundTint">?attr/colorSurface</item>
     </style>
 

From a5d9213dcaadf2079b2833ec9af454d9bcd09496 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:55:36 -0400
Subject: [PATCH 10/15] DHC green accent, Legacy colors rename, progress dialog
 padding

Address review feedback:
- Dark High Contrast: use green (colorPrimary) for colorAccent/colorSecondary
  so section headers (App Settings / Route Settings) and switch toggles are
  green, matching the green identity (and the theme's green picker swatch),
  instead of the previously confusing blue. Blue (colorTertiary / route
  proxy / links) stays reserved for links.
- Rename the picker's 'Classic colors...' entry to 'Legacy colors...'.
- Add top padding + spacing above the connection-test progress dialog's
  loading circle so it isn't flush against the dialog's top edge.

Verified on Android (DHC: green header + green toggle).
---
 app/src/main/res/layout/layout_progress_list.xml |  5 ++++-
 app/src/main/res/values-night/themes.xml         | 12 ++++++------
 app/src/main/res/values/strings.xml              |  2 +-
 app/src/main/res/values/themes.xml               | 12 ++++++------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/src/main/res/layout/layout_progress_list.xml b/app/src/main/res/layout/layout_progress_list.xml
index a364ebd01..e6bfc9e6e 100644
--- a/app/src/main/res/layout/layout_progress_list.xml
+++ b/app/src/main/res/layout/layout_progress_list.xml
@@ -3,13 +3,16 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical">
+    android:orientation="vertical"
+    android:paddingTop="24dp"
+    android:paddingBottom="8dp">
 
     <com.google.android.material.progressindicator.CircularProgressIndicator
         android:id="@+id/progress_circular"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
+        android:layout_marginBottom="12dp"
         android:indeterminate="true"
         app:indicatorColor="?colorPrimary" />
 
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index cfb0a6a00..91d5f83b0 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -97,7 +97,7 @@
         <item name="colorPrimary">@color/dhc_primary</item>
         <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
-        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorAccent">@color/dhc_primary</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
         <item name="colorMaterial100">@color/dhc_100</item>
         <item name="colorMaterial300">@color/dhc_300</item>
@@ -117,7 +117,7 @@
         <item name="tabIndicatorColor">@color/dhc_primary</item>
         <item name="colorPrimaryContainer">@color/dhc_container</item>
         <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
-        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondary">@color/dhc_primary</item>
         <item name="colorSecondaryContainer">@color/dhc_container</item>
         <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
         <item name="colorTertiary">@color/dhc_blue</item>
@@ -127,8 +127,8 @@
         <item name="colorOnSurfaceVariant">@color/dhc_on_surface_variant</item>
         <item name="colorOutline">@color/dhc_outline</item>
         <item name="colorOutlineVariant">@color/dhc_outline_variant</item>
-        <item name="accentOrTextSecondary">@color/dhc_accent</item>
-        <item name="accentOrTextPrimary">@color/dhc_accent</item>
+        <item name="accentOrTextSecondary">@color/dhc_primary</item>
+        <item name="accentOrTextPrimary">@color/dhc_primary</item>
         <item name="primaryOrTextSecondary">@color/dhc_primary</item>
         <item name="primaryOrTextPrimary">@color/dhc_primary</item>
         <item name="protocolColor">@color/dhc_green</item>
@@ -421,7 +421,7 @@
         <item name="colorPrimary">@color/dhc_primary</item>
         <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
-        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorAccent">@color/dhc_primary</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
         <item name="colorMaterial100">@color/dhc_100</item>
         <item name="colorMaterial300">@color/dhc_300</item>
@@ -433,7 +433,7 @@
         <item name="colorOnBackground">@color/dhc_on_surface</item>
         <item name="colorPrimaryContainer">@color/dhc_container</item>
         <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
-        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondary">@color/dhc_primary</item>
         <item name="colorSecondaryContainer">@color/dhc_container</item>
         <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
         <item name="colorTertiary">@color/dhc_blue</item>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 27ed8e5b7..8bdae08fa 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -21,7 +21,7 @@
     <string name="theme_monokai">Monokai</string>
     <string name="theme_ayu">Ayu</string>
     <string name="theme_catppuccin">Catppuccin</string>
-    <string name="theme_classic_colors">Classic colors…</string>
+    <string name="theme_classic_colors">Legacy colors…</string>
     <string name="theme_classic_color_swatch">Color theme %1$d</string>
     <string name="document">Document</string>
     <string name="group_default">Ungrouped</string>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 4449b525f..f4acaa198 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -818,7 +818,7 @@
         <item name="colorPrimary">@color/dhc_primary</item>
         <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
-        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorAccent">@color/dhc_primary</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
         <item name="colorMaterial100">@color/dhc_100</item>
         <item name="colorMaterial300">@color/dhc_300</item>
@@ -845,7 +845,7 @@
         <!-- M3 container/variant roles on the dark canvas. -->
         <item name="colorPrimaryContainer">@color/dhc_container</item>
         <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
-        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondary">@color/dhc_primary</item>
         <item name="colorSecondaryContainer">@color/dhc_container</item>
         <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
         <item name="colorTertiary">@color/dhc_blue</item>
@@ -858,8 +858,8 @@
 
         <!-- Semantic colors: green action accent reads on black, so primary text
              accents use it; status uses GitHub-style green/red/yellow. -->
-        <item name="accentOrTextSecondary">@color/dhc_accent</item>
-        <item name="accentOrTextPrimary">@color/dhc_accent</item>
+        <item name="accentOrTextSecondary">@color/dhc_primary</item>
+        <item name="accentOrTextPrimary">@color/dhc_primary</item>
         <item name="primaryOrTextSecondary">@color/dhc_primary</item>
         <item name="primaryOrTextPrimary">@color/dhc_primary</item>
         <item name="protocolColor">@color/dhc_green</item>
@@ -1211,7 +1211,7 @@
         <item name="colorPrimary">@color/dhc_primary</item>
         <item name="appBarBackgroundColor">@color/dhc_background</item>
         <item name="colorPrimaryDark">@color/dhc_primary_dark</item>
-        <item name="colorAccent">@color/dhc_accent</item>
+        <item name="colorAccent">@color/dhc_primary</item>
         <item name="colorOnPrimary">@color/dhc_on_primary</item>
         <item name="colorMaterial100">@color/dhc_100</item>
         <item name="colorMaterial300">@color/dhc_300</item>
@@ -1223,7 +1223,7 @@
         <item name="colorOnBackground">@color/dhc_on_surface</item>
         <item name="colorPrimaryContainer">@color/dhc_container</item>
         <item name="colorOnPrimaryContainer">@color/dhc_on_surface</item>
-        <item name="colorSecondary">@color/dhc_accent</item>
+        <item name="colorSecondary">@color/dhc_primary</item>
         <item name="colorSecondaryContainer">@color/dhc_container</item>
         <item name="colorOnSecondaryContainer">@color/dhc_on_surface</item>
         <item name="colorTertiary">@color/dhc_blue</item>

From cdf6a51447b3f180dae6f5bc0d8ecf83d7aa824f Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:01:38 -0400
Subject: [PATCH 11/15] Complete M3 migration: convert remaining AppCompat/M2
 widgets

Replace the last non-M3 themed widgets so the app is fully Material 3:
- SwitchCompat -> MaterialSwitch in layout_route_item and layout_apps_item.
- CheckBox -> MaterialCheckBox in layout_backup and layout_import (6 total).
- androidx.appcompat.widget.Toolbar -> MaterialToolbar in webdav settings.

All are API-compatible subclasses, so ViewBinding/findViewById and the
existing isChecked/listener calls are unchanged. Only AppCompatImageView
remains, which is the idiomatic M3 image view (not an M2 themed widget).

Verified on Android: route/apps MaterialSwitch toggles render M3 (green
on Dark High Contrast), no crashes.
---
 app/src/main/res/layout/layout_apps_item.xml       | 2 +-
 app/src/main/res/layout/layout_backup.xml          | 6 +++---
 app/src/main/res/layout/layout_import.xml          | 6 +++---
 app/src/main/res/layout/layout_route_item.xml      | 2 +-
 app/src/main/res/layout/layout_webdav_settings.xml | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/src/main/res/layout/layout_apps_item.xml b/app/src/main/res/layout/layout_apps_item.xml
index b9c31af75..79967a57c 100644
--- a/app/src/main/res/layout/layout_apps_item.xml
+++ b/app/src/main/res/layout/layout_apps_item.xml
@@ -57,7 +57,7 @@
 
         </LinearLayout>
 
-        <androidx.appcompat.widget.SwitchCompat
+        <com.google.android.material.materialswitch.MaterialSwitch
             android:id="@+id/itemcheck"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
diff --git a/app/src/main/res/layout/layout_backup.xml b/app/src/main/res/layout/layout_backup.xml
index 4ce8b9e1f..8c362e25a 100644
--- a/app/src/main/res/layout/layout_backup.xml
+++ b/app/src/main/res/layout/layout_backup.xml
@@ -34,7 +34,7 @@
                         android:text="@string/backup_local"
                         android:textAppearance="?attr/textAppearanceHeadline6" />
 
-                    <CheckBox
+                    <com.google.android.material.checkbox.MaterialCheckBox
                         android:id="@+id/backup_configurations"
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
@@ -42,14 +42,14 @@
                         android:checked="true"
                         android:text="@string/backup_groups_and_configurations" />
 
-                    <CheckBox
+                    <com.google.android.material.checkbox.MaterialCheckBox
                         android:id="@+id/backup_rules"
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:checked="true"
                         android:text="@string/backup_rules" />
 
-                    <CheckBox
+                    <com.google.android.material.checkbox.MaterialCheckBox
                         android:id="@+id/backup_settings"
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
diff --git a/app/src/main/res/layout/layout_import.xml b/app/src/main/res/layout/layout_import.xml
index 9c7243d3b..d7497606d 100644
--- a/app/src/main/res/layout/layout_import.xml
+++ b/app/src/main/res/layout/layout_import.xml
@@ -5,7 +5,7 @@
     android:orientation="vertical"
     android:padding="16dp">
 
-    <CheckBox
+    <com.google.android.material.checkbox.MaterialCheckBox
         android:id="@+id/backup_configurations"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
@@ -13,7 +13,7 @@
         android:text="@string/backup_groups_and_configurations"
         android:textAppearance="?attr/textAppearanceSubtitle2" />
 
-    <CheckBox
+    <com.google.android.material.checkbox.MaterialCheckBox
         android:id="@+id/backup_rules"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
@@ -21,7 +21,7 @@
         android:text="@string/backup_rules"
         android:textAppearance="?attr/textAppearanceSubtitle2" />
 
-    <CheckBox
+    <com.google.android.material.checkbox.MaterialCheckBox
         android:id="@+id/backup_settings"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
diff --git a/app/src/main/res/layout/layout_route_item.xml b/app/src/main/res/layout/layout_route_item.xml
index 4758f6e83..fbfba4904 100644
--- a/app/src/main/res/layout/layout_route_item.xml
+++ b/app/src/main/res/layout/layout_route_item.xml
@@ -126,7 +126,7 @@
 
             </LinearLayout>
 
-            <androidx.appcompat.widget.SwitchCompat
+            <com.google.android.material.materialswitch.MaterialSwitch
                 android:layout_marginBottom="2dp"
                 android:id="@+id/enable"
                 android:layout_width="wrap_content"
diff --git a/app/src/main/res/layout/layout_webdav_settings.xml b/app/src/main/res/layout/layout_webdav_settings.xml
index 652ddd702..af0527e17 100644
--- a/app/src/main/res/layout/layout_webdav_settings.xml
+++ b/app/src/main/res/layout/layout_webdav_settings.xml
@@ -11,7 +11,7 @@
         android:fitsSystemWindows="true"
         android:theme="@style/ThemeOverlay.Material3.Dark.ActionBar">
 
-        <androidx.appcompat.widget.Toolbar
+        <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"

From a19749447fb0acdb73e1c92e554f94c02d2af823 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:08:14 -0400
Subject: [PATCH 12/15] Clarify inset comment terminology (CR): 'bottom bar'
 not 'status bar'

---
 app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 0d85a35f3..773a89c2e 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
@@ -60,7 +60,7 @@ abstract class ThemedActivity : AppCompatActivity {
             findViewById<AppBarLayout>(R.id.appbar)?.apply {
                 updatePadding(top = bars.top)
             }
-            // Lift the bottom status bar (and the FAB docked into it, plus the FAB's
+            // Lift the bottom bar (and the FAB docked into it, plus the FAB's
             // progress ring anchored to the FAB) above the navigation bar so the
             // ring isn't clipped by the system inset under edge-to-edge.
             findViewById<View>(R.id.stats)?.apply {

From 5c08261e1c6ee7b0b3526bb521674c936137bc15 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:28:14 -0400
Subject: [PATCH 13/15] DHC ringed swatch + list bottom padding to clear docked
 FAB/stats

- Theme picker: Dark High Contrast preview swatch is now a black circle
  with a white circumference ring (via ThemeInfo.ringColor + a
  GradientDrawable oval) so it reads as 'OLED black', not 'a green theme'.
  Other modern themes keep their solid accent dot.
- Profile + route lists: increase bottom padding to 96dp (with
  clipToPadding=false) so the last card clears the docked FAB and the
  bottom stats bar instead of being hidden behind them when scrolled to
  the bottom.

Verified on Android (DHC swatch ring; last card clears FAB at scroll end).
---
 .../io/nekohasekai/sagernet/utils/Theme.kt    | 25 ++++++++++++++---
 .../matsuri/nb4a/ui/ThemePickerPreference.kt  | 27 +++++++++++++++++++
 .../main/res/layout/layout_profile_list.xml   |  2 +-
 app/src/main/res/layout/layout_route.xml      |  6 ++++-
 4 files changed, 55 insertions(+), 5 deletions(-)

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 2d07bcd05..6e00ca68a 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
@@ -59,15 +59,34 @@ object Theme {
      * @param nameRes     display name string resource
      * @param previewColor color resource for the preview swatch shown next to the name
      */
-    data class ThemeInfo(val id: Int, val nameRes: Int, val previewColor: Int)
+    /**
+     * Metadata for a theme shown in the modern named picker.
+     *
+     * @param id          one of the Theme int constants above (persisted to appTheme)
+     * @param nameRes     display name string resource
+     * @param previewColor fill color for the preview swatch shown next to the name
+     * @param ringColor   optional circumference-ring color; when non-zero the swatch
+     *                    is drawn as [previewColor] fill + a thin [ringColor] frame.
+     *                    Used by Dark High Contrast (black fill + white ring) so its
+     *                    OLED-black identity doesn't read as "a green theme".
+     */
+    data class ThemeInfo(
+        val id: Int,
+        val nameRes: Int,
+        val previewColor: Int,
+        val ringColor: Int = 0,
+    )
 
     /**
      * Modern, full-fledged M3 themes presented by name in the picker dialog.
-     * The legacy single-accent palettes stay behind the "Classic colors…" grid.
+     * The legacy single-accent palettes stay behind the "Legacy colors…" grid.
      * Order here is the display order in the dialog.
      */
     val MODERN_THEMES: List<ThemeInfo> = listOf(
-        ThemeInfo(DARK_HIGH_CONTRAST, R.string.theme_dark_high_contrast, R.color.dhc_primary),
+        ThemeInfo(
+            DARK_HIGH_CONTRAST, R.string.theme_dark_high_contrast,
+            R.color.dhc_background, R.color.white,
+        ),
         ThemeInfo(DRACULA_M3, R.string.theme_dracula_m3, R.color.draculam3_primary),
         ThemeInfo(NORD, R.string.theme_nord, R.color.nord_primary),
         ThemeInfo(MONOKAI, R.string.theme_monokai, R.color.monokai_primary),
diff --git a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
index 841a6d473..50b95ac68 100644
--- a/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
+++ b/app/src/main/java/moe/matsuri/nb4a/ui/ThemePickerPreference.kt
@@ -3,6 +3,7 @@ package moe.matsuri.nb4a.ui
 import android.content.Context
 import android.content.res.Resources
 import android.graphics.drawable.Drawable
+import android.graphics.drawable.GradientDrawable
 import android.util.AttributeSet
 import android.view.Gravity
 import android.view.View
@@ -83,6 +84,25 @@ class ThemePickerPreference
         return neko
     }
 
+    /**
+     * A circular swatch with a [fillColor] interior and a thin [ringColor]
+     * circumference ring. Used for themes (e.g. Dark High Contrast) whose solid
+     * accent dot would misrepresent the theme — a black fill + white ring reads
+     * as "OLED black" rather than "a green theme".
+     */
+    private fun ringedSwatchView(fillColor: Int, ringColor: Int, sizeDp: Int): ImageView {
+        val size = dp(sizeDp)
+        val ring = GradientDrawable().apply {
+            shape = GradientDrawable.OVAL
+            setColor(fillColor)
+            setStroke(dp(2), ringColor)
+        }
+        return ImageView(context).apply {
+            layoutParams = ViewGroup.LayoutParams(size, size)
+            setImageDrawable(ring)
+        }
+    }
+
     private fun dp(value: Int): Int =
         (value * context.resources.displayMetrics.density).roundToInt()
 
@@ -101,10 +121,14 @@ class ThemePickerPreference
         }
 
         for (info in Theme.MODERN_THEMES) {
+            val ring = if (info.ringColor != 0) {
+                ResourcesCompat.getColor(context.resources, info.ringColor, context.theme)
+            } else null
             container.addView(
                 buildRow(
                     name = context.getString(info.nameRes),
                     swatchColor = ResourcesCompat.getColor(context.resources, info.previewColor, context.theme),
+                    ringColor = ring,
                 ) {
                     select(info.id)
                     dialog.dismiss()
@@ -136,6 +160,7 @@ class ThemePickerPreference
     private fun buildRow(
         name: String,
         swatchColor: Int?,
+        ringColor: Int? = null,
         icon: Int? = null,
         onClick: () -> Unit,
     ): View {
@@ -155,6 +180,8 @@ class ThemePickerPreference
             contentDescription = name
 
             val leading = when {
+                swatchColor != null && ringColor != null ->
+                    ringedSwatchView(swatchColor, ringColor, 28)
                 swatchColor != null -> nekoImageView(swatchColor, 28, 0)
                 icon != null -> ImageView(context).apply {
                     layoutParams = ViewGroup.LayoutParams(dp(28), dp(28))
diff --git a/app/src/main/res/layout/layout_profile_list.xml b/app/src/main/res/layout/layout_profile_list.xml
index 9f8a4b5a7..571cc9016 100644
--- a/app/src/main/res/layout/layout_profile_list.xml
+++ b/app/src/main/res/layout/layout_profile_list.xml
@@ -10,7 +10,7 @@
     android:paddingLeft="4dp"
     android:paddingTop="4dp"
     android:paddingRight="4dp"
-    android:paddingBottom="48dp"
+    android:paddingBottom="96dp"
     android:scrollbarSize="0dp"
     app:fastScrollAutoHide="true"
     app:fastScrollThumbColor="?colorPrimary"
diff --git a/app/src/main/res/layout/layout_route.xml b/app/src/main/res/layout/layout_route.xml
index 971231f36..5ade2f1b3 100644
--- a/app/src/main/res/layout/layout_route.xml
+++ b/app/src/main/res/layout/layout_route.xml
@@ -18,7 +18,11 @@
             android:id="@+id/route_list"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:padding="4dp"
+            android:clipToPadding="false"
+            android:paddingLeft="4dp"
+            android:paddingTop="4dp"
+            android:paddingRight="4dp"
+            android:paddingBottom="96dp"
             android:scrollbarSize="0dp"
             app:fastScrollAutoHide="true"
             app:fastScrollThumbColor="?colorPrimary"

From f18ad9a069160a55cff3f94fb6bd36fad32b2cff Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:32:28 -0400
Subject: [PATCH 14/15] Increase list bottom padding to 150dp to fully clear
 docked FAB/stats

96dp wasn't enough: when connected, the pinned stats bar (~115dp) plus
the FAB cradle overhang (~40dp) overlapped the last card. Measured the
FAB top sitting ~431px above the screen bottom on the test device, so
bump the profile + route list bottom padding to 150dp (with
clipToPadding=false) so the last card always clears the FAB and stats
bar in both connected and disconnected states.

Verified on Android: last card fully visible above the FAB at scroll end.
---
 app/src/main/res/layout/layout_profile_list.xml | 2 +-
 app/src/main/res/layout/layout_route.xml        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/main/res/layout/layout_profile_list.xml b/app/src/main/res/layout/layout_profile_list.xml
index 571cc9016..16d3e8c44 100644
--- a/app/src/main/res/layout/layout_profile_list.xml
+++ b/app/src/main/res/layout/layout_profile_list.xml
@@ -10,7 +10,7 @@
     android:paddingLeft="4dp"
     android:paddingTop="4dp"
     android:paddingRight="4dp"
-    android:paddingBottom="96dp"
+    android:paddingBottom="150dp"
     android:scrollbarSize="0dp"
     app:fastScrollAutoHide="true"
     app:fastScrollThumbColor="?colorPrimary"
diff --git a/app/src/main/res/layout/layout_route.xml b/app/src/main/res/layout/layout_route.xml
index 5ade2f1b3..c13d2d693 100644
--- a/app/src/main/res/layout/layout_route.xml
+++ b/app/src/main/res/layout/layout_route.xml
@@ -22,7 +22,7 @@
             android:paddingLeft="4dp"
             android:paddingTop="4dp"
             android:paddingRight="4dp"
-            android:paddingBottom="96dp"
+            android:paddingBottom="150dp"
             android:scrollbarSize="0dp"
             app:fastScrollAutoHide="true"
             app:fastScrollThumbColor="?colorPrimary"

From 16564770954051c5fce36cb75b291b8ef09a6cb4 Mon Sep 17 00:00:00 2001
From: hawkff <109485367+hawkff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:46:13 -0400
Subject: [PATCH 15/15] Hide FAB on scroll + 168dp list padding so it never
 overlaps cards

- Add a RecyclerView scroll listener on the profile list: hide the docked
  FAB on downward scroll, show it on upward scroll or when the list
  settles (idle). Only acts in stable Stopped/Connected states so it
  doesn't fight the FAB's connect/disconnect animation.
- Bump profile + route list bottom padding to 168dp (FAB occupies ~157dp
  at 440dpi) so the last card always rests above the docked FAB and the
  pinned stats bar, in both connected and disconnected states.

Verified on Android (Dracula-M3, connected): last card clears the FAB at
the scroll extent; FAB tucks away while scrolling.
---
 .../sagernet/ui/ConfigurationFragment.kt      | 23 +++++++++++++++++++
 .../main/res/layout/layout_profile_list.xml   |  2 +-
 app/src/main/res/layout/layout_route.xml      |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/src/main/java/io/nekohasekai/sagernet/ui/ConfigurationFragment.kt b/app/src/main/java/io/nekohasekai/sagernet/ui/ConfigurationFragment.kt
index 589898ea4..d3fc4eecd 100644
--- a/app/src/main/java/io/nekohasekai/sagernet/ui/ConfigurationFragment.kt
+++ b/app/src/main/java/io/nekohasekai/sagernet/ui/ConfigurationFragment.kt
@@ -1396,6 +1396,29 @@ class ConfigurationFragment @JvmOverloads constructor(
             configurationListView.adapter = adapter
             configurationListView.setItemViewCacheSize(20)
 
+            // Hide the docked FAB while scrolling down (so it never overlaps the
+            // bottom card) and bring it back on upward scroll or when the list
+            // settles. Mirrors the stats bar's hideOnScroll behavior. Only act in
+            // stable states (Stopped/Connected) so we don't fight the FAB's own
+            // show/hide animation during Connecting/Stopping.
+            configurationListView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
+                private fun stableState(): Boolean = DataStore.serviceState.let {
+                    it == BaseService.State.Stopped || it == BaseService.State.Connected
+                }
+
+                override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
+                    if (!stableState()) return
+                    val fab = (activity as? MainActivity)?.binding?.fab ?: return
+                    if (dy > 4) fab.hide() else if (dy < -4) fab.show()
+                }
+
+                override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
+                    if (newState == RecyclerView.SCROLL_STATE_IDLE && stableState()) {
+                        (activity as? MainActivity)?.binding?.fab?.show()
+                    }
+                }
+            })
+
             if (!select) {
                 undoManager = UndoSnackbarManager(activity as MainActivity, adapter!!)
                 setupItemTouchHelper()
diff --git a/app/src/main/res/layout/layout_profile_list.xml b/app/src/main/res/layout/layout_profile_list.xml
index 16d3e8c44..04acc1496 100644
--- a/app/src/main/res/layout/layout_profile_list.xml
+++ b/app/src/main/res/layout/layout_profile_list.xml
@@ -10,7 +10,7 @@
     android:paddingLeft="4dp"
     android:paddingTop="4dp"
     android:paddingRight="4dp"
-    android:paddingBottom="150dp"
+    android:paddingBottom="168dp"
     android:scrollbarSize="0dp"
     app:fastScrollAutoHide="true"
     app:fastScrollThumbColor="?colorPrimary"
diff --git a/app/src/main/res/layout/layout_route.xml b/app/src/main/res/layout/layout_route.xml
index c13d2d693..a2bce33ba 100644
--- a/app/src/main/res/layout/layout_route.xml
+++ b/app/src/main/res/layout/layout_route.xml
@@ -22,7 +22,7 @@
             android:paddingLeft="4dp"
             android:paddingTop="4dp"
             android:paddingRight="4dp"
-            android:paddingBottom="150dp"
+            android:paddingBottom="168dp"
             android:scrollbarSize="0dp"
             app:fastScrollAutoHide="true"
             app:fastScrollThumbColor="?colorPrimary"