Skip to content

Migrate to Material 3 (full color roles + dynamic color) + fix FAB #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hawkff merged 6 commits into from
Jun 21, 2026
Merged

Migrate to Material 3 (full color roles + dynamic color) + fix FAB #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2f1f915
feat(theme): migrate to Material 3
hawkff Jun 21, 2026
5fe66d9
review: unwrap LifecycleOwner once in ServiceButton (avoid double unw…
hawkff Jun 21, 2026
fbecb5e
feat(theme): full M3 color (dynamic color + content-based palettes); …
hawkff Jun 21, 2026
547e891
fix(theme): restore Material 3 FAB theming
hawkff Jun 21, 2026
3287546
fix(theme): preserve black FAB contrast
hawkff Jun 21, 2026
392517b
feat(theme): complete Material 3 color-role migration
hawkff Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/main/java/io/nekohasekai/sagernet/ktx/Dialogs.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ fun Fragment.alert(text: String) = requireContext().alert(text)

fun AlertDialog.tryToShow() {
try {
val activity = context as Activity
val activity = context.unwrap<Activity>()
if (!activity.isFinishing) {
show()
}
Expand Down
15 changes: 15 additions & 0 deletions app/src/main/java/io/nekohasekai/sagernet/ktx/Utils.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,21 @@ import kotlin.reflect.KProperty0

fun String?.blankAsNull(): String? = if (isNullOrBlank()) null else this

/**
* Resolve the hosting object of type [T] (e.g. the Activity / LifecycleOwner) from a View's
* Context. Material 3 themes wrap the view context in a ContextThemeWrapper, so a direct
* `context as Activity` cast throws ClassCastException; walk the ContextWrapper.baseContext
* chain instead.
*/
inline fun <reified T> Context.unwrap(): T {
var ctx: Context? = this
while (ctx != null) {
if (ctx is T) return ctx
ctx = (ctx as? android.content.ContextWrapper)?.baseContext
}
error("Could not unwrap ${T::class.java.simpleName} from context")
}

inline fun <T> Iterable<T>.forEachTry(action: (T) -> Unit) {
var result: Exception? = null
for (element in this) try {
Expand Down
18 changes: 18 additions & 0 deletions app/src/main/java/io/nekohasekai/sagernet/ui/ThemedActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsCompat
import androidx.core.view.updatePadding
import com.google.android.material.appbar.AppBarLayout
import com.google.android.material.color.DynamicColors
import com.google.android.material.snackbar.Snackbar
import io.nekohasekai.sagernet.R
import io.nekohasekai.sagernet.database.DataStore
Expand All @@ -33,6 +34,11 @@ abstract class ThemedActivity : AppCompatActivity {
}
Theme.applyNightTheme()

// Only the explicit Dynamic (Material You) theme should use wallpaper colors.
// The hand-picked themes keep their legacy palettes instead of being reseeded
// into Material 3's generated tonal roles.
if (!isDialog) applyDynamicColors()

super.onCreate(savedInstanceState)

uiMode = resources.configuration.uiMode
Expand Down Expand Up @@ -63,6 +69,18 @@ abstract class ThemedActivity : AppCompatActivity {
themeResId = resId
}

/**
* Apply Material 3 dynamic color ONLY when the user explicitly picks the Dynamic
* (Material You) theme, and only on Android 12+ where a wallpaper palette exists.
* The hand-designed themes keep their own colors untouched — forcing a content-based
* reseed on them mangled their palettes into arbitrary M3 tones.
*/
private fun applyDynamicColors() {
if (DataStore.appTheme == Theme.DYNAMIC) {
DynamicColors.applyToActivityIfAvailable(this)
}
}

override fun onConfigurationChanged(newConfig: Configuration) {
super.onConfigurationChanged(newConfig)

Expand Down
3 changes: 3 additions & 0 deletions app/src/main/java/io/nekohasekai/sagernet/utils/Theme.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ object Theme {
const val BLACK = 21
const val VERDANT_MINT = 22
const val DRACULA = 23
const val DYNAMIC = 24

private fun defaultTheme() = PINK_SSR

Expand Down Expand Up @@ -76,6 +77,7 @@ object Theme {
BLACK -> R.style.Theme_SagerNet_Black
VERDANT_MINT -> R.style.Theme_SagerNet_VerdantMint
DRACULA -> R.style.Theme_SagerNet_Dracula
DYNAMIC -> R.style.Theme_SagerNet
else -> getTheme(defaultTheme())
}
}
Expand Down Expand Up @@ -105,6 +107,7 @@ object Theme {
BLACK -> R.style.Theme_SagerNet_Dialog_Black
VERDANT_MINT -> R.style.Theme_SagerNet_Dialog_VerdantMint
DRACULA -> R.style.Theme_SagerNet_Dialog_Dracula
DYNAMIC -> R.style.Theme_SagerNet_Dialog
else -> getDialogTheme(defaultTheme())
}
}
Expand Down
6 changes: 4 additions & 2 deletions app/src/main/java/io/nekohasekai/sagernet/widget/ServiceButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import com.google.android.material.progressindicator.BaseProgressIndicator
import io.nekohasekai.sagernet.R
import io.nekohasekai.sagernet.bg.BaseService
import io.nekohasekai.sagernet.ktx.getColorAttr
import io.nekohasekai.sagernet.ktx.unwrap
import kotlinx.coroutines.Job
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
Expand Down Expand Up @@ -66,11 +67,12 @@ class ServiceButton @JvmOverloads constructor(
private val iconConnecting by lazy {
AnimatedState(R.drawable.ic_service_connecting) {
hideProgress()
delayedAnimation = (context as LifecycleOwner).lifecycleScope.launch {
val owner = context.unwrap<LifecycleOwner>()
delayedAnimation = owner.lifecycleScope.launch {
delay(context.resources.getInteger(android.R.integer.config_mediumAnimTime) + 1000L)
// Gate the UI mutation on STARTED so a delayed progress reveal doesn't run
// while the activity is stopped (the old launchWhenStarted suspended here).
(context as LifecycleOwner).withStarted {
owner.withStarted {
isIndeterminate = true
show()
}
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/io/nekohasekai/sagernet/widget/StatsBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ class StatsBar @JvmOverloads constructor(
}

fun changeState(state: BaseService.State) {
val activity = context as MainActivity
val activity = context.unwrap<MainActivity>()
fun postWhenStarted(what: () -> Unit) = activity.lifecycleScope.launch(Dispatchers.Main) {
delay(100L)
activity.withStarted { what() }
Expand Down Expand Up @@ -172,7 +172,7 @@ class StatsBar @JvmOverloads constructor(
}

fun testConnection() {
val activity = context as MainActivity
val activity = context.unwrap<MainActivity>()
isEnabled = false
// "Testing…" in the testing color.
statusText.setTextColor(context.getColorAttr(R.attr.statusTestingColor))
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/res/layout/layout_app_list.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
android:theme="?actionBarTheme"
android:touchscreenBlocksFocus="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight"
app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
app:title="@string/app_name" />

<LinearLayout
Expand Down Expand Up @@ -56,7 +56,7 @@

<com.google.android.material.chip.Chip
android:id="@+id/show_system_apps"
style="@style/Widget.MaterialComponents.Chip.Filter"
style="@style/Widget.Material3.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/layout_appbar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
android:background="?attr/colorPrimary"
android:theme="?actionBarTheme"
android:touchscreenBlocksFocus="false"
app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight"
app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
app:title="@string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
4 changes: 2 additions & 2 deletions app/src/main/res/layout/layout_apps.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
android:theme="?actionBarTheme"
android:touchscreenBlocksFocus="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight"
app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup"
app:title="@string/app_name" />

<LinearLayout
Expand Down Expand Up @@ -85,7 +85,7 @@

<com.google.android.material.chip.Chip
android:id="@+id/show_system_apps"
style="@style/Widget.MaterialComponents.Chip.Filter"
style="@style/Widget.Material3.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
Expand Down
56 changes: 31 additions & 25 deletions app/src/main/res/layout/layout_main.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,31 +19,6 @@
android:layout_width="match_parent"
android:layout_height="match_parent" />

<!-- We double trackThickness as half of it will be invisible -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/fabProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="1"
android:visibility="invisible"
app:indicatorColor="?primaryOrTextSecondary"
app:layout_anchor="@+id/fab"
app:layout_anchorGravity="center"
app:layout_behavior="io.nekohasekai.sagernet.widget.FabProgressBehavior"
app:trackCornerRadius="@dimen/mtrl_progress_track_thickness"
app:trackThickness="8dp" />

<io.nekohasekai.sagernet.widget.ServiceButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="6dp"
android:nextFocusDown="@+id/stats"
app:backgroundTint="?colorPrimary"
app:layout_anchor="@id/stats"
app:pressedTranslationZ="6dp"
app:srcCompat="@drawable/ic_service_idle" />

<io.nekohasekai.sagernet.widget.StatsBar
android:id="@+id/stats"
android:layout_width="match_parent"
Expand All @@ -52,6 +27,8 @@
android:nextFocusUp="@+id/fab"
app:backgroundTint="?colorPrimary"
app:contentInsetStart="0dp"
app:fabAlignmentMode="center"
app:fabAnchorMode="cradle"
app:hideOnScroll="true"
app:layout_scrollFlags="enterAlways|scroll">

Expand Down Expand Up @@ -99,6 +76,35 @@

</io.nekohasekai.sagernet.widget.StatsBar>

<!-- FAB + its progress are declared AFTER the StatsBar so the airplane draws on top
of the bottom bar and wins touch in the overlap region. StatsBar opts into the
legacy BottomAppBar cradle so the centered FAB docks into the bar. -->
<!-- We double trackThickness as half of it will be invisible -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/fabProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="1"
android:visibility="invisible"
app:indicatorColor="?primaryOrTextSecondary"
app:layout_anchor="@+id/fab"
app:layout_anchorGravity="center"
app:layout_behavior="io.nekohasekai.sagernet.widget.FabProgressBehavior"
app:trackCornerRadius="@dimen/mtrl_progress_track_thickness"
app:trackThickness="8dp" />

<io.nekohasekai.sagernet.widget.ServiceButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="6dp"
android:nextFocusDown="@+id/stats"
app:backgroundTint="?attr/fabColorBackground"
app:tint="?attr/fabStoppedColor"
app:layout_anchor="@id/stats"
app:pressedTranslationZ="6dp"
app:srcCompat="@drawable/ic_service_idle" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

<com.google.android.material.navigation.NavigationView
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/layout_network.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

<Button
android:id="@+id/stunTest"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.Material3.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/layout_stun.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

<Button
android:id="@+id/stunTest"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.Material3.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/res/layout/layout_webdav_settings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
android:theme="@style/ThemeOverlay.Material3.Dark.ActionBar">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />
app:popupTheme="@style/ThemeOverlay.SagerNet.Toolbar.Popup" />

</com.google.android.material.appbar.AppBarLayout>

Expand Down
5 changes: 5 additions & 0 deletions app/src/main/res/values-night/colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
<!-- 卡片默认细边框：约 12% 白 -->
<color name="card_stroke">#1FFFFFFF</color>

<!-- M3 colorOutline (night): neutral light-gray for borders/dividers on dark surfaces.
This is the strong colorOutline role (M3 dark #938F99); the subtler
colorOutlineVariant maps to card_stroke (12% white) instead. -->
<color name="m3_outline">#938F99</color>

<!-- 路由规则类型颜色（夜间，稍浅） -->
<color name="color_route_block">#EF5350</color> <!-- 屏蔽：浅红 -->
<color name="color_route_direct">#66BB6A</color> <!-- 直连：浅绿 -->
Expand Down
21 changes: 21 additions & 0 deletions app/src/main/res/values-night/themes.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,18 @@
<item name="android:colorBackground">@color/dracula_background</item>
<item name="colorOnBackground">@color/dracula_on_surface</item>
<item name="android:windowBackground">@color/dracula_background</item>
<!-- M3 container/variant roles on the dark canvas (the base defaults point
at the light color_dracula_100 tint, which clashes with light-on-dark
text in night mode). -->
<item name="colorPrimaryContainer">@color/color_dracula_container</item>
<item name="colorOnPrimaryContainer">@color/dracula_on_surface</item>
<item name="colorSecondaryContainer">@color/color_dracula_container</item>
<item name="colorOnSecondaryContainer">@color/dracula_on_surface</item>
<item name="colorTertiaryContainer">@color/color_dracula_container</item>
<item name="colorOnTertiaryContainer">@color/dracula_on_surface</item>
<item name="colorSurfaceVariant">@color/color_dracula_surface_variant</item>
<item name="colorOnSurfaceVariant">@color/dracula_on_surface</item>
<item name="colorOutline">@color/color_dracula_outline</item>
<!-- Night is Dracula's active code path (it forces night mode on), so the
semantic color overrides must live here too, not only day. -->
<item name="protocolColor">@color/color_dracula_green</item>
Expand Down Expand Up @@ -54,6 +66,15 @@
<item name="colorOnSurface">@color/dracula_on_surface</item>
<item name="android:colorBackground">@color/dracula_background</item>
<item name="colorOnBackground">@color/dracula_on_surface</item>
<item name="colorPrimaryContainer">@color/color_dracula_container</item>
<item name="colorOnPrimaryContainer">@color/dracula_on_surface</item>
<item name="colorSecondaryContainer">@color/color_dracula_container</item>
<item name="colorOnSecondaryContainer">@color/dracula_on_surface</item>
<item name="colorTertiaryContainer">@color/color_dracula_container</item>
<item name="colorOnTertiaryContainer">@color/dracula_on_surface</item>
<item name="colorSurfaceVariant">@color/color_dracula_surface_variant</item>
<item name="colorOnSurfaceVariant">@color/dracula_on_surface</item>
<item name="colorOutline">@color/color_dracula_outline</item>
<item name="protocolColor">@color/color_dracula_green</item>
<item name="profileNameColor">@color/color_dracula_yellow</item>
<item name="statusConnectedColor">@color/color_dracula_green</item>
Expand Down
Loading
Loading