fix(android): improve dark mode text readability and contrast
All checks were successful
continuous-integration/drone/push Build is passing
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:
parent
3f4d62fde0
commit
27ebefd799
@ -32,7 +32,8 @@ fun TaskCard(
|
||||
modifier = modifier.fillMaxWidth(),
|
||||
shape = RoundedCornerShape(12.dp),
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = Color.White
|
||||
containerColor = MaterialTheme.colorScheme.surface,
|
||||
contentColor = MaterialTheme.colorScheme.onSurface
|
||||
),
|
||||
elevation = CardDefaults.cardElevation(
|
||||
defaultElevation = 2.dp
|
||||
@ -75,13 +76,13 @@ fun TaskCard(
|
||||
Text(
|
||||
text = "间隔: ${task.minIntervalDays} 天",
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = Color.Gray
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
task.lastExecutionTime?.let { time ->
|
||||
Text(
|
||||
text = " | 上次: ${formatDate(time)}",
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = Color.Gray
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -128,7 +129,8 @@ fun TaskDisplayCard(
|
||||
.clickable { onClick() },
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = SurfaceColor
|
||||
containerColor = MaterialTheme.colorScheme.surface,
|
||||
contentColor = MaterialTheme.colorScheme.onSurface
|
||||
)
|
||||
) {
|
||||
Column(
|
||||
|
||||
@ -39,17 +39,17 @@ fun ControlScreen(
|
||||
)
|
||||
},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = PrimaryColor,
|
||||
titleContentColor = Color.White
|
||||
containerColor = MaterialTheme.colorScheme.primary,
|
||||
titleContentColor = MaterialTheme.colorScheme.onPrimary
|
||||
)
|
||||
)
|
||||
},
|
||||
floatingActionButton = {
|
||||
FloatingActionButton(
|
||||
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 ->
|
||||
@ -143,13 +143,13 @@ fun EmptyState(modifier: Modifier = Modifier) {
|
||||
Text(
|
||||
"暂无任务",
|
||||
style = MaterialTheme.typography.titleLarge,
|
||||
color = Color.Gray
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text(
|
||||
"点击右下角添加第一个任务",
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = Color.Gray
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,8 +36,8 @@ fun DisplayScreen(
|
||||
)
|
||||
},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = PrimaryColor,
|
||||
titleContentColor = Color.White
|
||||
containerColor = MaterialTheme.colorScheme.primary,
|
||||
titleContentColor = MaterialTheme.colorScheme.onPrimary
|
||||
)
|
||||
)
|
||||
}
|
||||
@ -56,7 +56,7 @@ fun DisplayScreen(
|
||||
"暂无任务",
|
||||
modifier = Modifier.align(Alignment.Center),
|
||||
style = MaterialTheme.typography.titleLarge,
|
||||
color = Color.Gray
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
} else {
|
||||
LazyVerticalGrid(
|
||||
|
||||
@ -10,14 +10,35 @@ val Purple40 = Color(0xFF6650a4)
|
||||
val PurpleGrey40 = Color(0xFF625b71)
|
||||
val Pink40 = Color(0xFF7D5260)
|
||||
|
||||
// Custom colors for Calendar Widget
|
||||
// Custom colors for Calendar Widget - Light Mode
|
||||
val PrimaryColor = Color(0xFF667EEA)
|
||||
val SecondaryColor = Color(0xFF764BA2)
|
||||
val BackgroundColor = Color(0xFFF5F5F9)
|
||||
val SurfaceColor = Color(0xFFF2F2F2)
|
||||
val ErrorColor = Color(0xFFFF4757)
|
||||
|
||||
// Task status colors
|
||||
// Task status colors - Light Mode
|
||||
val TaskGreen = Color(0xFF00B894)
|
||||
val TaskYellow = Color(0xFFFDCB6E)
|
||||
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)
|
||||
@ -14,7 +14,7 @@
|
||||
android:layout_height="wrap_content"
|
||||
android:text="Task Name"
|
||||
android:textSize="14sp"
|
||||
android:textColor="@color/black"
|
||||
android:textColor="?android:attr/textColorPrimary"
|
||||
android:textAlignment="center"
|
||||
android:ellipsize="end"
|
||||
android:maxLines="1" />
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
android:text="@string/app_name"
|
||||
android:textSize="16sp"
|
||||
android:textStyle="bold"
|
||||
android:textColor="@color/black" />
|
||||
android:textColor="?android:attr/textColorPrimary" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/widget_refresh_button"
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
android:text="@string/app_name"
|
||||
android:textSize="14sp"
|
||||
android:textStyle="bold"
|
||||
android:textColor="@color/black" />
|
||||
android:textColor="?android:attr/textColorPrimary" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/widget_refresh_button"
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
android:text="@string/app_name"
|
||||
android:textSize="12sp"
|
||||
android:textStyle="bold"
|
||||
android:textColor="@color/black" />
|
||||
android:textColor="?android:attr/textColorPrimary" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/widget_refresh_button"
|
||||
|
||||
24
android-app/app/src/main/res/values-night/colors.xml
Normal file
24
android-app/app/src/main/res/values-night/colors.xml
Normal 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>
|
||||
25
android-app/app/src/main/res/values-night/themes.xml
Normal file
25
android-app/app/src/main/res/values-night/themes.xml
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user