fix(ui): 修复主题切换功能,支持明暗主题动态切换
- 替换所有硬编码颜色为动态颜色 - 所有页面使用 Theme.of(context) 获取主题颜色 - 支持深色和浅色主题切换 - 修复 GlassPanel 和 NeonGlow 组件的主题适配 - 完善 lightMaterial ColorScheme 定义 - 测试主题切换功能正常 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -42,9 +42,10 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppColorScheme.darkBackground,
|
||||
backgroundColor: colorScheme.background,
|
||||
body: Consumer<AuthProvider>(
|
||||
builder: (context, auth, _) {
|
||||
return SingleChildScrollView(
|
||||
@@ -62,7 +63,7 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
|
||||
'System Build v1.0.0-Neo',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: AppColorScheme.darkOnSurfaceVariant.withValues(alpha: 0.4),
|
||||
color: colorScheme.onSurfaceVariant.withOpacity(0.4),
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
),
|
||||
@@ -97,6 +98,7 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
|
||||
}
|
||||
|
||||
void _showAboutDialog() {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
showShadDialog(
|
||||
context: context,
|
||||
builder: (context) => ShadDialog(
|
||||
@@ -113,7 +115,7 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
|
||||
children: [
|
||||
Text(
|
||||
'虚拟货币模拟交易平台',
|
||||
style: TextStyle(color: AppColorScheme.darkOnSurfaceVariant),
|
||||
style: TextStyle(color: colorScheme.onSurfaceVariant),
|
||||
),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
_InfoRow(icon: Icons.code, text: '版本: 1.0.0'),
|
||||
@@ -169,6 +171,9 @@ class _UserCard extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
return GlassPanel(
|
||||
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm),
|
||||
child: Row(
|
||||
@@ -181,7 +186,7 @@ class _UserCard extends StatelessWidget {
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColorScheme.neonGlowPrimary,
|
||||
color: colorScheme.primary.withOpacity(isDark ? 0.15 : 0.08),
|
||||
blurRadius: 20,
|
||||
),
|
||||
],
|
||||
@@ -195,17 +200,17 @@ class _UserCard extends StatelessWidget {
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.darkTertiary,
|
||||
color: AppColorScheme.up,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: AppColorScheme.darkBackground,
|
||||
color: colorScheme.background,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.verified,
|
||||
size: 14,
|
||||
color: AppColorScheme.darkOnTertiary,
|
||||
color: colorScheme.onTertiary,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -221,7 +226,7 @@ class _UserCard extends StatelessWidget {
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColorScheme.darkOnSurface,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.sm),
|
||||
@@ -232,10 +237,10 @@ class _UserCard extends StatelessWidget {
|
||||
vertical: AppSpacing.xs,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
|
||||
color: colorScheme.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
border: Border.all(
|
||||
color: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
|
||||
color: colorScheme.primary.withOpacity(0.2),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
@@ -244,7 +249,7 @@ class _UserCard extends StatelessWidget {
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.2,
|
||||
color: AppColorScheme.darkPrimary,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -253,7 +258,7 @@ class _UserCard extends StatelessWidget {
|
||||
),
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -271,14 +276,16 @@ class _AppLogo extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return CircleAvatar(
|
||||
radius: radius,
|
||||
backgroundColor: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
|
||||
backgroundColor: colorScheme.primary.withOpacity(0.2),
|
||||
child: Text(
|
||||
text ?? '₿',
|
||||
style: TextStyle(
|
||||
fontSize: fontSize,
|
||||
color: AppColorScheme.darkPrimary,
|
||||
color: colorScheme.primary,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
@@ -295,15 +302,17 @@ class _InfoRow extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
Icon(icon, size: 14, color: AppColorScheme.darkOnSurfaceVariant),
|
||||
Icon(icon, size: 14, color: colorScheme.onSurfaceVariant),
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -321,6 +330,7 @@ class _MenuList extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final themeProvider = context.watch<ThemeProvider>();
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return GlassPanel(
|
||||
padding: EdgeInsets.zero,
|
||||
@@ -331,7 +341,7 @@ class _MenuList extends StatelessWidget {
|
||||
_ThemeToggleTile(isDarkMode: themeProvider.isDarkMode),
|
||||
_buildDivider(),
|
||||
// 菜单项
|
||||
..._buildMenuItems(),
|
||||
..._buildMenuItems(colorScheme),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -345,41 +355,41 @@ class _MenuList extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _buildMenuItems() {
|
||||
List<Widget> _buildMenuItems(ColorScheme colorScheme) {
|
||||
final items = [
|
||||
_MenuItem(
|
||||
icon: LucideIcons.userCheck,
|
||||
title: '实名认证',
|
||||
subtitle: '完成实名认证,解锁更多功能',
|
||||
iconColor: AppColorScheme.darkPrimary,
|
||||
iconColor: colorScheme.primary,
|
||||
onTap: () => onShowComingSoon('实名认证'),
|
||||
),
|
||||
_MenuItem(
|
||||
icon: LucideIcons.shield,
|
||||
title: '安全设置',
|
||||
subtitle: '密码、二次验证等安全设置',
|
||||
iconColor: AppColorScheme.darkSecondary,
|
||||
iconColor: colorScheme.secondary,
|
||||
onTap: () => onShowComingSoon('安全设置'),
|
||||
),
|
||||
_MenuItem(
|
||||
icon: LucideIcons.bell,
|
||||
title: '消息通知',
|
||||
subtitle: '管理消息推送设置',
|
||||
iconColor: AppColorScheme.darkTertiary,
|
||||
iconColor: AppColorScheme.up,
|
||||
onTap: () => onShowComingSoon('消息通知'),
|
||||
),
|
||||
_MenuItem(
|
||||
icon: LucideIcons.settings,
|
||||
title: '系统设置',
|
||||
subtitle: '主题、语言等偏好设置',
|
||||
iconColor: AppColorScheme.darkPrimary,
|
||||
iconColor: colorScheme.primary,
|
||||
onTap: () => onShowComingSoon('系统设置'),
|
||||
),
|
||||
_MenuItem(
|
||||
icon: LucideIcons.info,
|
||||
title: '关于我们',
|
||||
subtitle: '版本信息与用户协议',
|
||||
iconColor: AppColorScheme.darkOnSurfaceVariant,
|
||||
iconColor: colorScheme.onSurfaceVariant,
|
||||
onTap: onShowAbout,
|
||||
),
|
||||
];
|
||||
@@ -401,6 +411,7 @@ class _ThemeToggleTile extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final themeProvider = context.read<ThemeProvider>();
|
||||
|
||||
return InkWell(
|
||||
@@ -414,7 +425,7 @@ class _ThemeToggleTile extends StatelessWidget {
|
||||
children: [
|
||||
_MenuIcon(
|
||||
icon: isDarkMode ? LucideIcons.moon : LucideIcons.sun,
|
||||
color: AppColorScheme.darkPrimary,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
||||
Expanded(
|
||||
@@ -426,7 +437,7 @@ class _ThemeToggleTile extends StatelessWidget {
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColorScheme.darkOnSurface,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.xs / 2),
|
||||
@@ -434,7 +445,7 @@ class _ThemeToggleTile extends StatelessWidget {
|
||||
isDarkMode ? '当前:深色主题' : '当前:浅色主题',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -443,8 +454,8 @@ class _ThemeToggleTile extends StatelessWidget {
|
||||
Switch(
|
||||
value: isDarkMode,
|
||||
onChanged: (_) => themeProvider.toggleTheme(),
|
||||
activeTrackColor: AppColorScheme.darkPrimary.withValues(alpha: 0.5),
|
||||
activeColor: AppColorScheme.darkPrimary,
|
||||
activeTrackColor: colorScheme.primary.withOpacity(0.5),
|
||||
activeColor: colorScheme.primary,
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -461,6 +472,8 @@ class _MenuItemTile extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return InkWell(
|
||||
onTap: item.onTap,
|
||||
child: Padding(
|
||||
@@ -481,7 +494,7 @@ class _MenuItemTile extends StatelessWidget {
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColorScheme.darkOnSurface,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
if (item.subtitle != null) ...[
|
||||
@@ -490,7 +503,7 @@ class _MenuItemTile extends StatelessWidget {
|
||||
item.subtitle!,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -500,7 +513,7 @@ class _MenuItemTile extends StatelessWidget {
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 18,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -518,16 +531,17 @@ class _MenuIcon extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final iconColor = color ?? AppColorScheme.darkPrimary;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final iconColor = color ?? colorScheme.primary;
|
||||
|
||||
return Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.1),
|
||||
color: iconColor.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.md + AppSpacing.xs),
|
||||
border: Border.all(
|
||||
color: iconColor.withValues(alpha: 0.2),
|
||||
color: iconColor.withOpacity(0.2),
|
||||
),
|
||||
),
|
||||
child: Icon(icon, size: 20, color: iconColor),
|
||||
|
||||
Reference in New Issue
Block a user