Add Dracula semantic colors (yellow names, red fails, state-colored connect) (#41)

* Color protocol labels green in Dracula theme

Add a protocolColor theme attr for the profile-row protocol/type label.
The base themes default it to ?attr/accentOrTextSecondary (preserving the
current accent-colored behavior for all themes), and the Dracula day/night
styles override it with Dracula green (#50fa7b). getProtocolColor() now reads
R.attr.protocolColor instead of accentOrTextSecondary directly.

Verified on device: Dracula, Black (deepest attr chain) and Pink_SSR all
start with no crash and no attribute-resolution failures.

* Apply protocolColor green in night Dracula styles

Dracula forces night mode on, so the active styles at runtime are the
values-night Theme.SagerNet.Dracula / Dialog.Dracula variants. They redeclare
the Dracula colors but were missing the protocolColor override, so the label
fell back to the base ?accentOrTextSecondary (pink) and the green never
applied. Add protocolColor=color_dracula_green to both night styles.

Verified in the compiled APK via aapt2: night Dracula styles now resolve
protocolColor to @color/color_dracula_green (#ff50fa7b). Fixes the issue
Greptile flagged on PR #39.

* Add Dracula semantic colors: yellow names, red fails, state-colored connect

Extend the Dracula theme's semantic palette via theme attrs (default to the
prior colors for all other themes, so they are unchanged):

- profileNameColor: profile name label -> Dracula yellow (#f1fa8c)
- testFailColor: connection-test failures -> Dracula red (#ff5555)
- statusConnectedColor / statusStoppedColor: the bottom StatsBar status text
  and the connect-button (airplane) icon are tinted green when Connected and
  red when Stopped; transient Connecting/Stopping states stay neutral.

All overrides are duplicated into values-night (Dracula's active path) as well
as day. Verified in the compiled APK via aapt2 that the night Dracula style
resolves profileNameColor=yellow, statusConnected=green, statusStopped/testFail=red.

* Fix FAB tint regression and complete Dracula dialog overrides

Addresses reviewer feedback on PR:

- P1: applyStateTint set imageTintList to ?textColorPrimary on every theme,
  which on non-Dracula light themes painted the connect-FAB icon a dark/wrong
  color, and cleared the tint to null on transient states. Default
  statusConnectedColor/statusStoppedColor to ?attr/colorOnPrimary (the FAB's
  normal on-primary icon color) and use colorOnPrimary for transient states, so
  non-Dracula themes keep their original appearance. StatsBar status text uses
  the same fallback (it sits on the colorPrimary bar).
- Major/P2: add the four missing semantic overrides (profileName/status/
  testFail) to Theme.SagerNet.Dialog.Dracula in both day and night so the
  Dracula dialog palette stays consistent.

Verified in compiled APK: base theme status attrs resolve to ?colorOnPrimary;
Dracula resolves to yellow/green/red.

* Extend Dracula colors: yellow speeds/stopped-FAB, two-tone status, cyan proxy, pink nav

Per design review of the live theme:

- speedTextColor: bottom-bar up/down speed text (incl. 0 B/s) -> Dracula yellow.
- fabStoppedColor: connect-FAB icon when Stopped -> Dracula yellow (the red
  strikethrough plane was nearly invisible on the pink/purple FAB). Status
  TEXT for stopped/shutting-down stays red via statusStoppedColor.
- Two-tone status text: 'Connected,' / 'Success:' lead segment in green, the
  remainder (hint / handshake detail) in yellow (statusDetailColor). 'Testing…'
  yellow, 'Shutting down…' red. Falls back to single lead color if a locale
  string lacks the separator (safe, no crash).
- routeProxyColor: Proxy route rule -> Dracula cyan #8be9fd (Dracula's blue).
- navSelectedColor: selected nav-drawer item (fill + icon/text) -> Dracula
  accent (pink) to match the toggle-on color. Black keeps its accent; other
  themes default to colorPrimary (unchanged).

All gated via theme attrs that default to prior colors, so the other ~22
themes are visually unchanged. Verified attr resolution in the compiled APK.

* Recolor speeds, stopped-FAB, and status detail to Dracula cyan

Per design review: switch speedTextColor (up/down + 0 B/s), fabStoppedColor
(stopped airplane icon), and statusDetailColor ('tap to check connection' /
'…handshake took Nms') from yellow to Dracula cyan (#8be9fd). Profile names
stay yellow; protocol=green, connected=green, stopped/fail status text=red,
proxy route=cyan, nav selected=accent. Other themes unchanged.

* Keep Testing... yellow while detail text stays cyan

Add a dedicated statusTestingColor attr so the connection-test 'Testing…'
in-progress text is Dracula yellow, separate from statusDetailColor (cyan)
used for the 'tap to check connection' hint and the 'handshake took Nms'
detail. Defaults to colorOnPrimary for other themes (unchanged).

Author: hawkff

app/src/main/java/io/nekohasekai/sagernet/ui/ConfigurationFragment.kt

@@ -762,14 +762,14 @@ class ConfigurationFragment @JvmOverloads constructor(
 
                     2 -> {
                         profileStatusText = profile.error
-                        profileStatusColor = context.getColour(R.color.material_red_500)
+                        profileStatusColor = context.getColorAttr(R.attr.testFailColor)
                     }
 
                     3 -> {
                         val err = profile.error ?: ""
                         val msg = Protocols.genFriendlyMsg(err)
                         profileStatusText = if (msg != err) msg else getString(R.string.unavailable)
-                        profileStatusColor = context.getColour(R.color.material_red_500)
+                        profileStatusColor = context.getColorAttr(R.attr.testFailColor)
                     }
                 }
 
@@ -1803,6 +1803,7 @@ class ConfigurationFragment @JvmOverloads constructor(
                 }
 
                 profileName.text = proxyEntity.displayName()
+                profileName.setTextColor(requireContext().getColorAttr(R.attr.profileNameColor))
                 profileType.text = proxyEntity.displayType()
                 profileType.setTextColor(requireContext().getProtocolColor(proxyEntity.type))
 
@@ -1854,7 +1855,7 @@ class ConfigurationFragment @JvmOverloads constructor(
                     profileStatus.text = getString(R.string.available, proxyEntity.ping)
                     profileStatus.setTextColor(requireContext().getColour(R.color.material_green_500))
                 } else {
-                    profileStatus.setTextColor(requireContext().getColour(R.color.material_red_500))
+                    profileStatus.setTextColor(requireContext().getColorAttr(R.attr.testFailColor))
                     if (proxyEntity.status == 2) {
                         profileStatus.text = proxyEntity.error
                     }

app/src/main/java/io/nekohasekai/sagernet/ui/RouteFragment.kt

@@ -7,6 +7,7 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.widget.Toolbar
 import androidx.core.content.ContextCompat
+import io.nekohasekai.sagernet.ktx.getColorAttr
 import androidx.core.view.ViewCompat
 import androidx.recyclerview.widget.ItemTouchHelper
 import androidx.recyclerview.widget.RecyclerView
@@ -287,13 +288,14 @@ class RouteFragment : ToolbarFragment(R.layout.layout_route), Toolbar.OnMenuItem
                 routeOutbound.text = rule.displayOutbound()
 
                 // set text color based on route type
-                val colorRes = when (rule.outbound) {
-                    -2L -> R.color.color_route_block   // block: red
-                    -1L -> R.color.color_route_direct  // direct: green
-                    0L -> R.color.color_route_proxy    // proxy: blue
-                    else -> R.color.color_route_config // config: purple
+                val ctx = itemView.context
+                val outboundColor = when (rule.outbound) {
+                    -2L -> ContextCompat.getColor(ctx, R.color.color_route_block)   // block: red
+                    -1L -> ContextCompat.getColor(ctx, R.color.color_route_direct)  // direct: green
+                    0L -> ctx.getColorAttr(R.attr.routeProxyColor)                  // proxy: blue/cyan
+                    else -> ContextCompat.getColor(ctx, R.color.color_route_config) // config: purple
                 }
-                routeOutbound.setTextColor(ContextCompat.getColor(itemView.context, colorRes))
+                routeOutbound.setTextColor(outboundColor)
 
                 itemView.setOnClickListener {
                     enableSwitch.performClick()

app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt

@@ -1,6 +1,7 @@
 package io.nekohasekai.sagernet.widget
 
 import android.content.Context
+import android.content.res.ColorStateList
 import android.graphics.drawable.Drawable
 import android.os.Build
 import android.util.AttributeSet
@@ -17,6 +18,7 @@ import com.google.android.material.floatingactionbutton.FloatingActionButton
 import com.google.android.material.progressindicator.BaseProgressIndicator
 import io.nekohasekai.sagernet.R
 import io.nekohasekai.sagernet.bg.BaseService
+import io.nekohasekai.sagernet.ktx.getColorAttr
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
 import java.util.*
@@ -118,6 +120,7 @@ class ServiceButton @JvmOverloads constructor(
         }
         checked = state == BaseService.State.Connected
         refreshDrawableState()
+        applyStateTint(state)
         val description = context.getText(if (state.canStop) R.string.stop else R.string.connect)
         contentDescription = description
         TooltipCompat.setTooltipText(this, description)
@@ -129,6 +132,18 @@ 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.
+        val attr = when (state) {
+            BaseService.State.Connected -> R.attr.statusConnectedColor
+            BaseService.State.Stopped -> R.attr.fabStoppedColor
+            else -> com.google.android.material.R.attr.colorOnPrimary
+        }
+        imageTintList = ColorStateList.valueOf(context.getColorAttr(attr))
+    }
+
     private fun changeState(icon: AnimatedState, animate: Boolean) {
         fun counters(a: AnimatedState, b: AnimatedState): Boolean =
             a == iconStopped && b == iconConnecting ||

app/src/main/java/io/nekohasekai/sagernet/widget/StatsBar.kt

@@ -2,7 +2,9 @@ package io.nekohasekai.sagernet.widget
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.text.SpannableStringBuilder
 import android.text.format.Formatter
+import android.text.style.ForegroundColorSpan
 import android.util.AttributeSet
 import android.view.View
 import android.widget.TextView
@@ -80,6 +82,43 @@ class StatsBar @JvmOverloads constructor(
         TooltipCompat.setTooltipText(this, text)
     }
 
+    // Two-tone status: color the lead segment (split at [sep], kept with the lead)
+    // and the remainder separately. Used for "Connected, …" and "Success: …".
+    private fun setStatusTwoTone(
+        full: CharSequence, sep: Char, leadAttr: Int, restAttr: Int
+    ) {
+        val s = full.toString()
+        val idx = s.indexOf(sep)
+        if (idx < 0) {
+            statusText.setTextColor(context.getColorAttr(leadAttr))
+            setStatus(full)
+            return
+        }
+        val cut = idx + 1 // keep the separator char with the lead segment
+        val span = SpannableStringBuilder(s)
+        span.setSpan(
+            ForegroundColorSpan(context.getColorAttr(leadAttr)),
+            0, cut, SpannableStringBuilder.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+        span.setSpan(
+            ForegroundColorSpan(context.getColorAttr(restAttr)),
+            cut, s.length, SpannableStringBuilder.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+        setStatus(span)
+    }
+
+    private fun setStatusColorByState(state: BaseService.State) {
+        // Connected = statusConnectedColor (green), Stopped/Stopping = statusStoppedColor
+        // (red — "Shutting down…" reads as red), Connecting/other = colorOnPrimary.
+        // Non-Dracula themes default these attrs to colorOnPrimary, so no change.
+        val attr = when (state) {
+            BaseService.State.Connected -> R.attr.statusConnectedColor
+            BaseService.State.Stopped, BaseService.State.Stopping -> R.attr.statusStoppedColor
+            else -> com.google.android.material.R.attr.colorOnPrimary
+        }
+        statusText.setTextColor(context.getColorAttr(attr))
+    }
+
     fun changeState(state: BaseService.State) {
         val activity = context as MainActivity
         fun postWhenStarted(what: () -> Unit) = activity.lifecycleScope.launch(Dispatchers.Main) {
@@ -89,13 +128,18 @@ class StatsBar @JvmOverloads constructor(
         if ((state == BaseService.State.Connected).also { hideOnScroll = it }) {
             postWhenStarted {
                 if (allowShow) performShow()
-                setStatus(app.getText(R.string.vpn_connected))
+                // "Connected," in green; the "tap to check connection" hint in detail color.
+                setStatusTwoTone(
+                    app.getText(R.string.vpn_connected), ',',
+                    R.attr.statusConnectedColor, R.attr.statusDetailColor
+                )
             }
         } else {
             postWhenStarted {
                 performHide()
             }
             updateSpeed(0, 0)
+            setStatusColorByState(state)
             setStatus(
                 context.getText(
                     when (state) {
@@ -110,6 +154,9 @@ class StatsBar @JvmOverloads constructor(
 
     @SuppressLint("SetTextI18n")
     fun updateSpeed(txRate: Long, rxRate: Long) {
+        val speedColor = context.getColorAttr(R.attr.speedTextColor)
+        txText.setTextColor(speedColor)
+        rxText.setTextColor(speedColor)
         txText.text = "▲  ${
             context.getString(
                 R.string.speed, Formatter.formatFileSize(context, txRate)
@@ -125,27 +172,32 @@ class StatsBar @JvmOverloads constructor(
     fun testConnection() {
         val activity = context as MainActivity
         isEnabled = false
+        // "Testing…" in the testing color.
+        statusText.setTextColor(context.getColorAttr(R.attr.statusTestingColor))
         setStatus(app.getText(R.string.connection_test_testing))
         runOnDefaultDispatcher {
             try {
                 val elapsed = activity.urlTest()
                 onMainDispatcher {
                     isEnabled = true
-                    setStatus(
+                    // "Success:" in green; the handshake detail in detail color.
+                    setStatusTwoTone(
                         app.getString(
                             if (DataStore.connectionTestURL.startsWith("https://")) {
                                 R.string.connection_test_available
                             } else {
                                 R.string.connection_test_available_http
                             }, elapsed
-                        )
+                        ), ':',
+                        R.attr.statusConnectedColor, R.attr.statusDetailColor
                     )
                 }
 
             } catch (e: Exception) {
                 Logs.w(e.toString())
                 onMainDispatcher {
                     isEnabled = true
+                    statusText.setTextColor(context.getColorAttr(R.attr.statusTestingColor))
                     setStatus(app.getText(R.string.connection_test_testing))
 
                     activity.snackbar(

app/src/main/java/moe/matsuri/nb4a/Protocols.kt

@@ -44,7 +44,7 @@ object Protocols {
     fun Context.getProtocolColor(type: Int): Int {
         return when (type) {
             TYPE_NEKO -> getColorAttr(android.R.attr.textColorPrimary)
-            else -> getColorAttr(R.attr.accentOrTextSecondary)
+            else -> getColorAttr(R.attr.protocolColor)
         }
     }
 

app/src/main/res/color/nav_item_fill.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:color="?attr/colorPrimary" android:alpha="0.16" android:state_checked="true" />
+    <item android:color="?attr/navSelectedColor" android:alpha="0.16" android:state_checked="true" />
     <item android:color="@android:color/transparent" />
 </selector>

app/src/main/res/color/navigation_icon.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:color="?attr/primaryOrTextSecondary" android:state_checked="true" />
+    <item android:color="?attr/navSelectedColor" android:state_checked="true" />
     <item android:color="?android:textColorPrimary" android:state_checked="false" />
-</selector>
+</selector>

app/src/main/res/values-night/themes.xml

@@ -26,6 +26,19 @@
         <item name="android:colorBackground">@color/dracula_background</item>
         <item name="colorOnBackground">@color/dracula_on_surface</item>
         <item name="android:windowBackground">@color/dracula_background</item>
+        <!-- Night is Dracula's active code path (it forces night mode on), so the
+             semantic color overrides must live here too, not only day. -->
+        <item name="protocolColor">@color/color_dracula_green</item>
+        <item name="profileNameColor">@color/color_dracula_yellow</item>
+        <item name="statusConnectedColor">@color/color_dracula_green</item>
+        <item name="statusStoppedColor">@color/color_dracula_red</item>
+        <item name="testFailColor">@color/color_dracula_red</item>
+        <item name="speedTextColor">@color/color_dracula_cyan</item>
+        <item name="fabStoppedColor">@color/color_dracula_cyan</item>
+        <item name="statusDetailColor">@color/color_dracula_cyan</item>
+        <item name="statusTestingColor">@color/color_dracula_yellow</item>
+        <item name="routeProxyColor">@color/color_dracula_cyan</item>
+        <item name="navSelectedColor">?attr/colorAccent</item>
     </style>
 
     <style name="Theme.SagerNet.Dialog.Dracula" parent="Theme.SagerNet.Dialog">
@@ -40,5 +53,15 @@
         <item name="colorOnSurface">@color/dracula_on_surface</item>
         <item name="android:colorBackground">@color/dracula_background</item>
         <item name="colorOnBackground">@color/dracula_on_surface</item>
+        <item name="protocolColor">@color/color_dracula_green</item>
+        <item name="profileNameColor">@color/color_dracula_yellow</item>
+        <item name="statusConnectedColor">@color/color_dracula_green</item>
+        <item name="statusStoppedColor">@color/color_dracula_red</item>
+        <item name="testFailColor">@color/color_dracula_red</item>
+        <item name="speedTextColor">@color/color_dracula_cyan</item>
+        <item name="fabStoppedColor">@color/color_dracula_cyan</item>
+        <item name="statusDetailColor">@color/color_dracula_cyan</item>
+        <item name="statusTestingColor">@color/color_dracula_yellow</item>
+        <item name="routeProxyColor">@color/color_dracula_cyan</item>
     </style>
 </resources>

app/src/main/res/values-v26/themes.xml

@@ -5,6 +5,18 @@
         <!-- Default nav-drawer selected-item fill; satisfies the
              ?itemShapeFillColor self-reference in @color/navigation_item. -->
         <item name="itemShapeFillColor">?colorPrimary</item>
+        <!-- Protocol/type label color; defaults to accent, Dracula overrides green. -->
+        <item name="protocolColor">?attr/accentOrTextSecondary</item>
+        <item name="profileNameColor">?android:attr/textColorPrimary</item>
+        <item name="statusConnectedColor">?attr/colorOnPrimary</item>
+        <item name="statusStoppedColor">?attr/colorOnPrimary</item>
+        <item name="testFailColor">@color/material_red_500</item>
+        <item name="speedTextColor">?attr/colorOnPrimary</item>
+        <item name="fabStoppedColor">?attr/colorOnPrimary</item>
+        <item name="statusDetailColor">?attr/colorOnPrimary</item>
+        <item name="statusTestingColor">?attr/colorOnPrimary</item>
+        <item name="routeProxyColor">@color/color_route_proxy</item>
+        <item name="navSelectedColor">?attr/colorPrimary</item>
         <item name="actionModeCloseDrawable">@drawable/ic_navigation_close</item>
         <item name="colorButtonNormal">?colorAccent</item>
         <item name="android:navigationBarColor">@android:color/transparent</item>

app/src/main/res/values/attrs.xml

@@ -10,6 +10,33 @@
     <attr name="fabColorBackground" format="color" />
     <attr name="selectedColorPrimary" format="color" />
     <attr name="whiteOrTextPrimary" format="color" />
+    <!-- Text color for the protocol/type label on a profile row. Defaults to
+         the accent color; Dracula overrides it with its green. -->
+    <attr name="protocolColor" format="color" />
+    <!-- Profile name label color. Defaults to primary text; Dracula = yellow. -->
+    <attr name="profileNameColor" format="color" />
+    <!-- Service status / connect-button colors. Default to primary text so non-
+         Dracula themes are unchanged; Dracula tints connected=green, stopped=red. -->
+    <attr name="statusConnectedColor" format="color" />
+    <attr name="statusStoppedColor" format="color" />
+    <!-- Connection-test failure color. Default Material red; Dracula = #ff5555. -->
+    <attr name="testFailColor" format="color" />
+    <!-- Bottom-bar speed text (arrows + rate). Default on-primary; Dracula = yellow. -->
+    <attr name="speedTextColor" format="color" />
+    <!-- Connect-FAB icon tint when Stopped. Default on-primary; Dracula = yellow
+         (red was invisible on the pink/purple FAB). Separate from the red
+         statusStoppedColor used for the status text. -->
+    <attr name="fabStoppedColor" format="color" />
+    <!-- Secondary status text (the part after "Connected," / "Success:").
+         Default on-primary; Dracula = cyan. -->
+    <attr name="statusDetailColor" format="color" />
+    <!-- "Testing…" connection-test in-progress text. Default on-primary; Dracula = yellow. -->
+    <attr name="statusTestingColor" format="color" />
+    <!-- Proxy route-rule color. Default blue; Dracula = cyan. -->
+    <attr name="routeProxyColor" format="color" />
+    <!-- Selected nav-drawer item color (fill tint + icon/text). Default primary;
+         Dracula uses its accent (pink) to match the toggle-on color. -->
+    <attr name="navSelectedColor" format="color" />
     <!-- Tonal "elevated surface" color for cards (route / group); each theme
          variant tints toward its own primary. -->
     <attr name="cardElevatedSurfaceColor" format="color" />