fix(android): improve dark mode text readability and contrast
All checks were successful
continuous-integration/drone/push Build is passing

- Add dedicated dark mode color scheme with high contrast text
   - Create values-night resources for optimized dark theme
   - Update UI components to use MaterialTheme dynamic colors
   - Replace hardcoded colors with theme-aware colors in Compose UI
   - Fix widget text colors to adapt to system theme
   - Improve task status colors for better visibility in dark mode
This commit is contained in:
Ching 2025-11-23 02:46:36 +08:00
parent 3f4d62fde0
commit 27ebefd799
10 changed files with 92 additions and 20 deletions

View File

@ -32,7 +32,8 @@ fun TaskCard(
modifier = modifier.fillMaxWidth(), modifier = modifier.fillMaxWidth(),
shape = RoundedCornerShape(12.dp), shape = RoundedCornerShape(12.dp),
colors = CardDefaults.cardColors( colors = CardDefaults.cardColors(
containerColor = Color.White containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.onSurface
), ),
elevation = CardDefaults.cardElevation( elevation = CardDefaults.cardElevation(
defaultElevation = 2.dp defaultElevation = 2.dp
@ -75,13 +76,13 @@ fun TaskCard(
Text( Text(
text = "间隔: ${task.minIntervalDays}", text = "间隔: ${task.minIntervalDays}",
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
color = Color.Gray color = MaterialTheme.colorScheme.onSurfaceVariant
) )
task.lastExecutionTime?.let { time -> task.lastExecutionTime?.let { time ->
Text( Text(
text = " | 上次: ${formatDate(time)}", text = " | 上次: ${formatDate(time)}",
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
color = Color.Gray color = MaterialTheme.colorScheme.onSurfaceVariant
) )
} }
} }
@ -128,7 +129,8 @@ fun TaskDisplayCard(
.clickable { onClick() }, .clickable { onClick() },
shape = RoundedCornerShape(16.dp), shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors( colors = CardDefaults.cardColors(
containerColor = SurfaceColor containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.onSurface
) )
) { ) {
Column( Column(

View File

@ -39,17 +39,17 @@ fun ControlScreen(
) )
}, },
colors = TopAppBarDefaults.topAppBarColors( colors = TopAppBarDefaults.topAppBarColors(
containerColor = PrimaryColor, containerColor = MaterialTheme.colorScheme.primary,
titleContentColor = Color.White titleContentColor = MaterialTheme.colorScheme.onPrimary
) )
) )
}, },
floatingActionButton = { floatingActionButton = {
FloatingActionButton( FloatingActionButton(
onClick = { viewModel.showAddDialog() }, onClick = { viewModel.showAddDialog() },
containerColor = PrimaryColor containerColor = MaterialTheme.colorScheme.primary
) { ) {
Icon(Icons.Default.Add, contentDescription = "添加任务", tint = Color.White) Icon(Icons.Default.Add, contentDescription = "添加任务", tint = MaterialTheme.colorScheme.onPrimary)
} }
} }
) { paddingValues -> ) { paddingValues ->
@ -143,13 +143,13 @@ fun EmptyState(modifier: Modifier = Modifier) {
Text( Text(
"暂无任务", "暂无任务",
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
color = Color.Gray color = MaterialTheme.colorScheme.onSurfaceVariant
) )
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
Text( Text(
"点击右下角添加第一个任务", "点击右下角添加第一个任务",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = Color.Gray color = MaterialTheme.colorScheme.onSurfaceVariant
) )
} }
} }

View File

@ -36,8 +36,8 @@ fun DisplayScreen(
) )
}, },
colors = TopAppBarDefaults.topAppBarColors( colors = TopAppBarDefaults.topAppBarColors(
containerColor = PrimaryColor, containerColor = MaterialTheme.colorScheme.primary,
titleContentColor = Color.White titleContentColor = MaterialTheme.colorScheme.onPrimary
) )
) )
} }
@ -56,7 +56,7 @@ fun DisplayScreen(
"暂无任务", "暂无任务",
modifier = Modifier.align(Alignment.Center), modifier = Modifier.align(Alignment.Center),
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
color = Color.Gray color = MaterialTheme.colorScheme.onSurfaceVariant
) )
} else { } else {
LazyVerticalGrid( LazyVerticalGrid(

View File

@ -10,14 +10,35 @@ val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71) val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260) val Pink40 = Color(0xFF7D5260)
// Custom colors for Calendar Widget // Custom colors for Calendar Widget - Light Mode
val PrimaryColor = Color(0xFF667EEA) val PrimaryColor = Color(0xFF667EEA)
val SecondaryColor = Color(0xFF764BA2) val SecondaryColor = Color(0xFF764BA2)
val BackgroundColor = Color(0xFFF5F5F9) val BackgroundColor = Color(0xFFF5F5F9)
val SurfaceColor = Color(0xFFF2F2F2) val SurfaceColor = Color(0xFFF2F2F2)
val ErrorColor = Color(0xFFFF4757) val ErrorColor = Color(0xFFFF4757)
// Task status colors // Task status colors - Light Mode
val TaskGreen = Color(0xFF00B894) val TaskGreen = Color(0xFF00B894)
val TaskYellow = Color(0xFFFDCB6E) val TaskYellow = Color(0xFFFDCB6E)
val TaskRed = Color(0xFFFF4757) val TaskRed = Color(0xFFFF4757)
// Dark Mode Colors
val DarkPrimaryColor = Color(0xFF5E72E4)
val DarkSecondaryColor = Color(0xFF8B5CF6)
val DarkBackgroundColor = Color(0xFF1A1A1A)
val DarkSurfaceColor = Color(0xFF2A2A2A)
val DarkErrorColor = Color(0xFFFF6B6B)
// Task status colors - Dark Mode
val DarkTaskGreen = Color(0xFF4ADE80)
val DarkTaskYellow = Color(0xFFFACC15)
val DarkTaskRed = Color(0xFFFF6B6B)
// Text colors for dark mode
val DarkTextPrimary = Color(0xFFFFFFFF)
val DarkTextSecondary = Color(0xFFD1D5DB)
val DarkTextDisabled = Color(0xFF6B7280)
// Card colors for dark mode
val DarkCardBackground = Color(0xFF374151)
val DarkDivider = Color(0xFF4B5563)

View File

@ -14,7 +14,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="Task Name" android:text="Task Name"
android:textSize="14sp" android:textSize="14sp"
android:textColor="@color/black" android:textColor="?android:attr/textColorPrimary"
android:textAlignment="center" android:textAlignment="center"
android:ellipsize="end" android:ellipsize="end"
android:maxLines="1" /> android:maxLines="1" />

View File

@ -19,7 +19,7 @@
android:text="@string/app_name" android:text="@string/app_name"
android:textSize="16sp" android:textSize="16sp"
android:textStyle="bold" android:textStyle="bold"
android:textColor="@color/black" /> android:textColor="?android:attr/textColorPrimary" />
<ImageButton <ImageButton
android:id="@+id/widget_refresh_button" android:id="@+id/widget_refresh_button"

View File

@ -19,7 +19,7 @@
android:text="@string/app_name" android:text="@string/app_name"
android:textSize="14sp" android:textSize="14sp"
android:textStyle="bold" android:textStyle="bold"
android:textColor="@color/black" /> android:textColor="?android:attr/textColorPrimary" />
<ImageButton <ImageButton
android:id="@+id/widget_refresh_button" android:id="@+id/widget_refresh_button"

View File

@ -19,7 +19,7 @@
android:text="@string/app_name" android:text="@string/app_name"
android:textSize="12sp" android:textSize="12sp"
android:textStyle="bold" android:textStyle="bold"
android:textColor="@color/black" /> android:textColor="?android:attr/textColorPrimary" />
<ImageButton <ImageButton
android:id="@+id/widget_refresh_button" android:id="@+id/widget_refresh_button"

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Custom colors for dark mode -->
<color name="primary">#FF5E72E4</color>
<color name="secondary">#FF8B5CF6</color>
<color name="background">#FF1A1A1A</color>
<color name="surface">#FF2A2A2A</color>
<color name="error">#FFFF6B6B</color>
<!-- Task status colors (adjusted for dark mode) -->
<color name="task_green">#FF4ADE80</color>
<color name="task_yellow">#FFFACC15</color>
<color name="task_red">#FFFF6B6B</color>
<color name="task_gray">#FF9CA3AF</color>
<!-- Text colors for dark mode -->
<color name="text_primary">#FFFFFFFF</color>
<color name="text_secondary">#FFD1D5DB</color>
<color name="text_disabled">#FF6B7280</color>
<!-- Card and surface colors -->
<color name="card_background">#FF374151</color>
<color name="divider">#FF4B5563</color>
</resources>

View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Dark theme for Calendar Widget -->
<style name="Theme.CalendarWidget" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryVariant">@color/secondary</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/primary</item>
<item name="colorSecondaryVariant">@color/secondary</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Background and surface colors. -->
<item name="android:colorBackground">@color/background</item>
<item name="colorSurface">@color/surface</item>
<item name="colorOnBackground">@color/text_primary</item>
<item name="colorOnSurface">@color/text_primary</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Text colors -->
<item name="android:textColorPrimary">@color/text_primary</item>
<item name="android:textColorSecondary">@color/text_secondary</item>
<item name="android:textColorHint">@color/text_disabled</item>
</style>
</resources>