style(theme): 客户端切换深色视觉风格
This commit is contained in:
1 parent
295c21513c
commit
4bc04fd8ae
75 files changed
+732
-330
No files matched your search
@@ -26,7 +26,7 @@ class AppBottomNavItem {
|
||||
final bool selected;
|
||||
}
|
||||
|
||||
/// 四槽底部导航:首页 feed 用深色样式,其它页面保持浅色暖橙风格。
|
||||
/// 四槽底部导航:所有页面统一深色底与浅色图标。
|
||||
class AppBottomNav extends StatelessWidget {
|
||||
const AppBottomNav({
|
||||
super.key,
|
||||
@@ -47,24 +47,22 @@ class AppBottomNav extends StatelessWidget {
|
||||
key: barKey,
|
||||
height: AppDimens.navHeight,
|
||||
decoration: BoxDecoration(
|
||||
color: dark ? Colors.black : backgroundColor.withValues(alpha: 0.95),
|
||||
border: Border(
|
||||
top: BorderSide(color: dark ? Colors.white12 : AppColors.border),
|
||||
),
|
||||
color: dark ? AppColors.bar : backgroundColor.withValues(alpha: 0.96),
|
||||
border: const Border(top: BorderSide(color: AppColors.border)),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
for (final item in items)
|
||||
_NavDestination(
|
||||
item: item,
|
||||
unselectedColor: dark ? Colors.white70 : AppColors.navUnselected,
|
||||
unselectedColor: AppColors.navUnselected,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
if (dark) {
|
||||
return ColoredBox(
|
||||
color: Colors.black,
|
||||
color: AppColors.bar,
|
||||
child: SafeArea(top: false, child: bar),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ Future<bool> ensureSignedIn(BuildContext context) async {
|
||||
Text(
|
||||
l10n.authGateTitle,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
@@ -98,7 +98,7 @@ class AuthGatePanel extends StatelessWidget {
|
||||
l10n.authGateTitle,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
|
||||
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
|
||||
|
||||
import '../config/app_config.dart';
|
||||
import '../config/server_endpoint.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
|
||||
const String _title = '设置服务地址';
|
||||
const String _save = '保存';
|
||||
@@ -94,7 +95,7 @@ class _CatalogEndpointDialogState extends State<_CatalogEndpointDialog> {
|
||||
const Text(
|
||||
_localNetworkHint,
|
||||
key: Key('catalog-debug-endpoint-hint'),
|
||||
style: TextStyle(fontSize: 12, color: Colors.grey),
|
||||
style: TextStyle(fontSize: 12, color: AppColors.muted),
|
||||
),
|
||||
if (_error != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
|
||||
@@ -4,6 +4,8 @@ import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme/app_colors.dart';
|
||||
|
||||
const Key _toastKey = Key('centered-toast');
|
||||
const Duration _fadeDuration = Duration(milliseconds: 200);
|
||||
const Duration _visibleDuration = Duration(seconds: 2);
|
||||
@@ -11,9 +13,8 @@ const double _toastRadius = 12;
|
||||
const double _toastMaxWidth = 320;
|
||||
const double _toastHorizontalInset = 20;
|
||||
const double _toastVerticalInset = 12;
|
||||
const double _toastBackgroundOpacity = 0.78;
|
||||
const TextStyle _toastTextStyle = TextStyle(
|
||||
color: Colors.white,
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 14,
|
||||
height: 1.4,
|
||||
fontWeight: FontWeight.w500,
|
||||
@@ -108,10 +109,9 @@ class _CenteredToastState extends State<_CenteredToast>
|
||||
constraints: const BoxConstraints(maxWidth: _toastMaxWidth),
|
||||
padding: _toastPadding,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withValues(
|
||||
alpha: _toastBackgroundOpacity,
|
||||
),
|
||||
color: AppColors.raised,
|
||||
borderRadius: BorderRadius.circular(_toastRadius),
|
||||
border: Border.all(color: AppColors.border),
|
||||
),
|
||||
child: Text(
|
||||
widget.message,
|
||||
|
||||
@@ -87,12 +87,11 @@ class _EmptyMark extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final dark = Theme.of(context).brightness == Brightness.dark;
|
||||
return Icon(
|
||||
icon,
|
||||
key: const Key('empty-state-icon'),
|
||||
size: compact ? _compactIconSize : _regularIconSize,
|
||||
color: dark ? AppColors.gold : AppColors.blue,
|
||||
color: AppColors.blueSoft,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_dimens.dart';
|
||||
|
||||
/// 首页信息卡与浮层控件使用的浅色玻璃面板。
|
||||
/// 首页信息卡与浮层控件使用的深色玻璃面板。
|
||||
class GlassPanel extends StatelessWidget {
|
||||
const GlassPanel({
|
||||
super.key,
|
||||
@@ -38,7 +38,7 @@ class GlassPanel extends StatelessWidget {
|
||||
const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xE6FFFFFF), Color(0xB3FFFDFB)],
|
||||
colors: [AppColors.glassSurfaceStart, AppColors.glassSurfaceEnd],
|
||||
),
|
||||
),
|
||||
child: Padding(padding: padding ?? EdgeInsets.zero, child: child),
|
||||
|
||||
@@ -16,7 +16,7 @@ class RemoteImage extends StatelessWidget {
|
||||
this.showFallbackIcon = false,
|
||||
this.fallbackIconKey,
|
||||
this.fallbackAspectRatio,
|
||||
this.fallbackColor = AppColors.bar,
|
||||
this.fallbackColor = AppColors.raised,
|
||||
});
|
||||
|
||||
final String path;
|
||||
|
||||
@@ -16,9 +16,6 @@ const double _iconSize = 22;
|
||||
const double _iconWeight = 600;
|
||||
const double _borderWidth = 1;
|
||||
const double _shadowBlur = 8;
|
||||
const Color _lightShadowColor = Color(0x14000000);
|
||||
const Color _darkBackground = Color(0x59000000);
|
||||
const Color _darkShadowColor = Color(0x33000000);
|
||||
const Offset _lightShadowOffset = Offset(0, 2);
|
||||
|
||||
/// 二级页面统一圆形操作按钮,返回、分享和更多共用同一尺寸与表面样式。
|
||||
@@ -52,14 +49,14 @@ class AppSubpageCircleButton extends StatelessWidget {
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: dark ? _darkShadowColor : _lightShadowColor,
|
||||
color: dark ? AppColors.shadowSoft : AppColors.shadowSubtle,
|
||||
blurRadius: _shadowBlur,
|
||||
offset: dark ? Offset.zero : _lightShadowOffset,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Material(
|
||||
color: dark ? _darkBackground : AppColors.card,
|
||||
color: dark ? AppColors.headerScrim : AppColors.card,
|
||||
shape: CircleBorder(
|
||||
side: dark
|
||||
? BorderSide.none
|
||||
@@ -75,7 +72,7 @@ class AppSubpageCircleButton extends StatelessWidget {
|
||||
child: Center(
|
||||
child: Icon(
|
||||
icon,
|
||||
color: dark ? Colors.white : AppColors.onSurface,
|
||||
color: AppColors.onSurface,
|
||||
size: _iconSize,
|
||||
weight: _iconWeight,
|
||||
),
|
||||
@@ -134,8 +131,8 @@ class AppSubpageHeader extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final foreground = dark ? Colors.white : AppColors.onSurface;
|
||||
final secondary = dark ? Colors.white70 : AppColors.muted;
|
||||
final foreground = AppColors.onSurface;
|
||||
final secondary = AppColors.muted;
|
||||
return SizedBox(
|
||||
key: const Key('subpage-header'),
|
||||
height: subtitle == null ? _height : _heightWithSubtitle,
|
||||
|
||||
Reference in new issue
Block a user