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(),
|
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(
|
||||||
|
|||||||
@ -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
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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(
|
||||||
|
|||||||
@ -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)
|
||||||
@ -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" />
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
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