Change hard-coded colors to adjust according to schemes. Support Dark…

… theme on Android (follow system). #24
open-ani · Jan 6, 2023 · b8c88a2 · b8c88a2
1 parent 67f278f
commit b8c88a2
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 18 deletions.
diff --git a/android/src/main/kotlin/activity/BaseComponentActivity.kt b/android/src/main/kotlin/activity/BaseComponentActivity.kt
@@ -19,9 +19,9 @@
 package me.him188.animationgarden.android.activity
 
 import androidx.activity.ComponentActivity
-import androidx.compose.material3.SnackbarDuration
-import androidx.compose.material3.SnackbarHostState
-import androidx.compose.material3.SnackbarResult
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.lifecycle.lifecycleScope
 import kotlinx.coroutines.Dispatchers
@@ -30,6 +30,14 @@ import kotlinx.coroutines.launch
 abstract class BaseComponentActivity : ComponentActivity() {
     @Stable
     val snackbarHostState = SnackbarHostState()
+
+    val colorScheme
+        @Composable
+        get() = if (isSystemInDarkTheme()) {
+            darkColorScheme()
+        } else {
+            lightColorScheme()
+        }
 }
 
 suspend fun BaseComponentActivity.showSnackbar(

diff --git a/android/src/main/kotlin/activity/MainActivity.kt b/android/src/main/kotlin/activity/MainActivity.kt
@@ -93,7 +93,7 @@ class MainActivity : BaseComponentActivity() {
             ObserveSettingsChanges(app)
 
 
-            MaterialTheme {
+            MaterialTheme(colorScheme) {
                 ImmerseStatusBar(AppTheme.colorScheme.primary)
 
                 MainPage(app)

diff --git a/android/src/main/kotlin/activity/SettingsActivity.kt b/android/src/main/kotlin/activity/SettingsActivity.kt
@@ -50,7 +50,7 @@ class SettingsActivity : BaseComponentActivity() {
         requestWindowFeature(Window.FEATURE_NO_TITLE)
 
         setContent {
-            MaterialTheme {
+            MaterialTheme(colorScheme) {
                 ImmerseStatusBar(AppTheme.colorScheme.primary)
 
                 CommonAppScaffold(

diff --git a/android/src/main/kotlin/activity/StarredListActivity.kt b/android/src/main/kotlin/activity/StarredListActivity.kt
@@ -64,7 +64,7 @@ class StarredListActivity : BaseComponentActivity() {
         requestWindowFeature(Window.FEATURE_NO_TITLE)
 
         setContent {
-            MaterialTheme {
+            MaterialTheme(colorScheme) {
                 ImmerseStatusBar(AppTheme.colorScheme.primary)
 
                 CommonAppScaffold(

diff --git a/common/src/commonMain/kotlin/ui/MainPage.kt b/common/src/commonMain/kotlin/ui/MainPage.kt
@@ -60,6 +60,8 @@ import me.him188.animationgarden.app.platform.LocalContext
 import me.him188.animationgarden.app.platform.Res
 import me.him188.animationgarden.app.platform.browse
 import me.him188.animationgarden.app.ui.interaction.onEnterKeyEvent
+import me.him188.animationgarden.app.ui.theme.darken
+import me.him188.animationgarden.app.ui.theme.weaken
 import me.him188.animationgarden.app.ui.widgets.OutlinedTextFieldEx
 import java.time.LocalDateTime
 import kotlin.time.Duration.Companion.seconds
@@ -262,7 +264,7 @@ fun SearchTextField(
                 Text(
                     LocalI18n.current.getString("search.keywords"),
                     style = AppTheme.typography.bodyMedium.copy(
-                        color = AppTheme.typography.bodyMedium.color.copy(0.3f),
+                        color = AppTheme.typography.bodyMedium.color.darken(),
                         lineHeight = 16.sp
                     )
                 )
@@ -609,13 +611,15 @@ private fun SearchResultField(
                             fetchingState.render(resources)
                         )
                     },
-                    style = AppTheme.typography.bodyMedium.run { copy(color = color.copy(alpha = 0.5f)) }
+                    style = AppTheme.typography.bodyMedium.run {
+                        copy(color = color.weaken())
+                    }
                 )
                 ClickableText(
                     AnnotatedString(LocalI18n.current.getString("search.failed.check.proxy")),
                     style = AppTheme.typography.bodyMedium.run {
                         copy(
-                            color = Color.Blue.copy(alpha = 0.5f),
+                            color = Color.Blue.weaken(),
                             textDecoration = TextDecoration.Underline
                         )
                     },

diff --git a/common/src/commonMain/kotlin/ui/OrganizedViewCard.kt b/common/src/commonMain/kotlin/ui/OrganizedViewCard.kt
@@ -46,6 +46,7 @@ import me.him188.animationgarden.app.i18n.LocalI18n
 import me.him188.animationgarden.app.i18n.loadResourceBundle
 import me.him188.animationgarden.app.platform.LocalContext
 import me.him188.animationgarden.app.platform.Res
+import me.him188.animationgarden.app.ui.theme.darken
 import me.him188.animationgarden.app.ui.widgets.ToggleStarButton
 import java.time.LocalDateTime
 
@@ -155,7 +156,7 @@ private fun OrganizedViewContent(
                 Text(
                     it.raw,
                     color = if (isEpisodeWatched(it)) {
-                        LocalTextStyle.current.color.copy(alpha = 0.3f)
+                        LocalTextStyle.current.color.darken()
                     } else {
                         LocalTextStyle.current.color
                     }

diff --git a/common/src/commonMain/kotlin/ui/StarredAnimeCard.kt b/common/src/commonMain/kotlin/ui/StarredAnimeCard.kt
@@ -36,6 +36,7 @@ import me.him188.animationgarden.app.platform.LocalContext
 import me.him188.animationgarden.app.ui.interaction.VibrationStrength
 import me.him188.animationgarden.app.ui.interaction.onClickEx
 import me.him188.animationgarden.app.ui.interaction.vibrateIfSupported
+import me.him188.animationgarden.app.ui.theme.darken
 import me.him188.animationgarden.app.ui.widgets.ToggleStarButton
 
 @Composable
@@ -112,7 +113,7 @@ fun StarredAnimeCard(
                         Text(
                             it.raw,
                             color = if (currentAnime.watchedEpisodes.contains(it)) {
-                                LocalTextStyle.current.color.copy(alpha = 0.3f)
+                                LocalTextStyle.current.color.darken()
                             } else {
                                 LocalTextStyle.current.color
                             }

diff --git a/common/src/commonMain/kotlin/ui/TopicItemCard.kt b/common/src/commonMain/kotlin/ui/TopicItemCard.kt
@@ -47,6 +47,7 @@ import me.him188.animationgarden.api.model.DATE_FORMAT
 import me.him188.animationgarden.api.model.Topic
 import me.him188.animationgarden.api.tags.Episode
 import me.him188.animationgarden.app.AppTheme
+import me.him188.animationgarden.app.ui.theme.weaken
 
 @Immutable
 data class Tag(
@@ -137,7 +138,7 @@ fun TopicItemCard(topic: Topic, onClick: () -> Unit) {
                             Text(
                                 dateFormatted,
                                 style = AppTheme.typography.bodyMedium,
-                                color = AppTheme.typography.bodyMedium.color.copy(alpha = 0.5f),
+                                color = AppTheme.typography.bodyMedium.color.weaken(),
                                 modifier = Modifier.padding(start = 4.dp),
                                 fontWeight = FontWeight.W400,
                                 maxLines = 1,
@@ -270,7 +271,9 @@ private fun Subtitle(
     Text(
         text,
         modifier,
-        style = AppTheme.typography.titleMedium.run { copy(color = color.copy(alpha = 0.5f)) },
+        style = AppTheme.typography.titleMedium.run {
+            copy(color = color.weaken())
+        },
         fontWeight = FontWeight.W400,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
@@ -306,7 +309,7 @@ private fun TagButton(
     val containerColor = if (containerColorEffect == Color.Unspecified) {
         defaultContainerColor
     } else {
-        containerColorEffect.compositeOver(defaultContainerColor.copy(alpha = 0.5f))
+        containerColorEffect.compositeOver(defaultContainerColor.weaken())
     }
     val shape = AppTheme.shapes.small
     ElevatedButton(

diff --git a/common/src/commonMain/kotlin/ui/settings/LabelledRadioButton.kt b/common/src/commonMain/kotlin/ui/settings/LabelledRadioButton.kt
@@ -26,6 +26,7 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import me.him188.animationgarden.app.ui.theme.darken
 
 @Composable
 fun LabelledRadioButton(
@@ -95,8 +96,8 @@ object LabelDefaults {
     fun labelColors(
         checkedTextColor: Color = MaterialTheme.colorScheme.onSurface,
         uncheckedTextColor: Color = MaterialTheme.colorScheme.onSurface,
-        disabledCheckedTextColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
-        disabledUncheckedTextColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
+        disabledCheckedTextColor: Color = MaterialTheme.colorScheme.onSurface.darken(),
+        disabledUncheckedTextColor: Color = MaterialTheme.colorScheme.onSurface.darken(),
     ): LabelColors {
         return DefaultLabelColors(
             checkedTextColor,

diff --git a/common/src/commonMain/kotlin/ui/settings/OutlinedTextFieldWithSaveButton.kt b/common/src/commonMain/kotlin/ui/settings/OutlinedTextFieldWithSaveButton.kt
@@ -38,6 +38,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import me.him188.animationgarden.app.AppTheme
 import me.him188.animationgarden.app.ui.interaction.onEnterKeyEvent
+import me.him188.animationgarden.app.ui.theme.darken
 import me.him188.animationgarden.app.ui.widgets.OutlinedTextFieldEx
 
 @Composable
@@ -128,7 +129,7 @@ fun SettingsOutlinedTextField(
         placeholder = {
             ProvideTextStyle(
                 AppTheme.typography.bodyMedium.copy(
-                    color = AppTheme.typography.bodyMedium.color.copy(0.3f),
+                    color = AppTheme.typography.bodyMedium.color.darken(),
                     lineHeight = 20.sp
                 )
             ) {

diff --git a/common/src/commonMain/kotlin/ui/settings/ProxySettingsGroup.kt b/common/src/commonMain/kotlin/ui/settings/ProxySettingsGroup.kt
@@ -38,6 +38,7 @@ import me.him188.animationgarden.app.app.AppSettings
 import me.him188.animationgarden.app.app.AppSettingsManager
 import me.him188.animationgarden.app.app.settings.ProxyMode
 import me.him188.animationgarden.app.i18n.LocalI18n
+import me.him188.animationgarden.app.ui.theme.darken
 
 @Composable
 fun ColumnScope.ProxySettingsGroup(
@@ -80,7 +81,7 @@ fun ColumnScope.ProxySettingsGroup(
                 exit = exit,
             ) {
                 Row(Modifier.padding(vertical = 8.dp, horizontal = 16.dp)) {
-                    ProvideTextStyle(AppTheme.typography.bodyMedium.run { copy(color = color.copy(alpha = 0.38f)) }) {
+                    ProvideTextStyle(AppTheme.typography.bodyMedium.run { copy(color = color.darken()) }) {
                         disabledContent()
                     }
                 }

diff --git a/common/src/commonMain/kotlin/ui/theme/Colors.kt b/common/src/commonMain/kotlin/ui/theme/Colors.kt
@@ -0,0 +1,43 @@
+/*
+ * Animation Garden App
+ * Copyright (C) 2022  Him188
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package me.him188.animationgarden.app.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
+
+
+@Composable
+fun Color.weaken(): Color {
+    return if (isSystemInDarkTheme()) {
+        Color.Gray.compositeOver(this)
+    } else {
+        copy(alpha = 0.5f)
+    }
+}
+
+@Composable
+fun Color.darken(): Color {
+    return if (isSystemInDarkTheme()) {
+        Color.DarkGray.compositeOver(this)
+    } else {
+        copy(alpha = 0.38f)
+    }
+}