wip: Fix UI display effect

apps/biyi_app/lib/app/home/limited_functionality_banner.dart

@@ -84,9 +84,10 @@ class AllowAccessListItem extends StatelessWidget {
                           ),
                       ],
                       style: TextStyle(
-                        color: ReflectColors.amber.shade900,
+                        color: ReflectColors.neutral.shade700,
                         decoration: TextDecoration.underline,
-                        decorationColor: ReflectColors.amber.shade900,
+                        decorationThickness: 1.5,
+                        decorationColor: ReflectColors.neutral.shade700,
                         fontWeight: FontWeight.w700,
                         fontSize: 13,
                         height: 18 / 13,
@@ -212,11 +213,16 @@ class LimitedFunctionalityBanner extends StatelessWidget {
         ),
       ),
       actions: [
-        Button(
-          kind: ButtonKind.secondary,
-          variant: ButtonVariant.tinted,
-          onPressed: onTappedRecheckIsAllowedAllAccess,
-          child: Text(LocaleKeys.app_home_limited_banner_btn_check_again.tr()),
+        Theme(
+          data: Theme.of(context).copyWith(brightness: Brightness.light),
+          child: Button(
+            kind: ButtonKind.secondary,
+            variant: ButtonVariant.tinted,
+            onPressed: onTappedRecheckIsAllowedAllAccess,
+            child: Text(
+              LocaleKeys.app_home_limited_banner_btn_check_again.tr(),
+            ),
+          ),
         ),
         Expanded(child: Container()),
       ],

apps/biyi_app/lib/app/home/toolbar_item_always_on_top.dart

@@ -25,6 +25,7 @@ class _ToolbarItemAlwaysOnTopState extends State<ToolbarItemAlwaysOnTop> {
 
   @override
   Widget build(BuildContext context) {
+    final iconThemeData = Theme.of(context).iconTheme;
     return AnimatedContainer(
       duration: const Duration(milliseconds: 200),
       curve: Curves.fastOutSlowIn,
@@ -36,9 +37,7 @@ class _ToolbarItemAlwaysOnTopState extends State<ToolbarItemAlwaysOnTop> {
         _isAlwaysOnTop ? FluentIcons.pin_20_filled : FluentIcons.pin_20_regular,
         variant: IconButtonVariant.transparent,
         padding: EdgeInsets.zero,
-        color: _isAlwaysOnTop
-            ? Theme.of(context).primaryColor
-            : Theme.of(context).iconTheme.color,
+        color: _isAlwaysOnTop ? null : iconThemeData.color,
         onPressed: () {
           setState(() {
             _isAlwaysOnTop = !_isAlwaysOnTop;

apps/biyi_app/lib/app/home/toolbar_item_settings.dart

@@ -1,7 +1,6 @@
 import 'package:biyi_app/app/router_config.dart';
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:go_router/go_router.dart';
-import 'package:reflect_colors/reflect_colors.dart';
 import 'package:reflect_ui/reflect_ui.dart';
 import 'package:uni_platform/uni_platform.dart';
 import 'package:window_manager/window_manager.dart';
@@ -29,12 +28,11 @@ class _ToolbarItemSettingsState extends State<ToolbarItemSettings> {
 
   @override
   Widget build(BuildContext context) {
-    Brightness brightness = Theme.of(context).brightness;
+    final iconThemeData = Theme.of(context).iconTheme;
     return IconButton(
       FluentIcons.settings_20_regular,
       variant: IconButtonVariant.transparent,
-      color:
-          brightness == Brightness.light ? Colors.black : ReflectColors.gray,
+      color: iconThemeData.color,
       onPressed: _handleClick,
     );
   }

apps/biyi_app/lib/app/home/translation_input_view.dart

@@ -46,7 +46,9 @@ class TranslationInputView extends StatelessWidget {
 
   Widget _buildToolbarItems(BuildContext context) {
     final ThemeData themeData = Theme.of(context);
-    return Row(
+    final IconThemeData iconThemeData = Theme.of(context).iconTheme;
+    return GappedRow(
+      gap: 6,
       children: [
         Tooltip(
           message: LocaleKeys.app_home_tip_translation_mode.tr(
@@ -65,7 +67,7 @@ class TranslationInputView extends StatelessWidget {
                     icon,
                     color: translationMode == TranslationMode.auto
                         ? themeData.colorScheme.primary
-                        : null,
+                        : iconThemeData.color,
                     size: 20,
                   ),
                   if (translationMode == TranslationMode.auto)
@@ -105,7 +107,7 @@ class TranslationInputView extends StatelessWidget {
           ),
         ),
         const SizedBox(
-          width: 8,
+          width: 0,
           height: 20,
           child: VerticalDivider(),
         ),
@@ -115,15 +117,17 @@ class TranslationInputView extends StatelessWidget {
           child: IconButton(
             FluentIcons.crop_20_regular,
             variant: IconButtonVariant.subtle,
+            iconColor: iconThemeData.color,
             onPressed: onClickExtractTextFromScreenCapture,
           ),
         ),
-        const SizedBox(width: 4),
         Tooltip(
           message: LocaleKeys.app_home_tip_extract_text_from_clipboard.tr(),
           child: IconButton(
             FluentIcons.clipboard_text_ltr_20_regular,
             variant: IconButtonVariant.subtle,
+            iconColor: iconThemeData.color,
+            iconSize: 20,
             onPressed: onClickExtractTextFromClipboard,
           ),
         ),
@@ -237,9 +241,7 @@ class TranslationInputView extends StatelessWidget {
           ),
           const Padding(
             padding: EdgeInsets.symmetric(horizontal: 12),
-            child: Divider(
-              height: 1,
-            ),
+            child: Divider(height: 1),
           ),
           Container(
             padding: const EdgeInsets.only(

apps/biyi_app/lib/app/home/translation_target_select_view.dart

@@ -105,6 +105,7 @@ class _TranslationTargetSelectViewState
 
   @override
   Widget build(BuildContext context) {
+    IconThemeData iconThemeData = Theme.of(context).iconTheme;
     TextTheme textTheme = Theme.of(context).textTheme;
     if (widget.translationMode == TranslationMode.auto) {
       return Container();
@@ -153,7 +154,7 @@ class _TranslationTargetSelectViewState
                             FluentIcons.chevron_down_20_regular,
                             size: 14,
                             color: widget.isShowSourceLanguageSelector
-                                ? Theme.of(context).primaryColor
+                                ? iconThemeData.color
                                 : textTheme.bodyMedium!.color,
                           ),
                         ),
@@ -176,10 +177,10 @@ class _TranslationTargetSelectViewState
                     transform: Matrix4.rotationZ(
                       _isRotated ? math.pi / 1 : 0,
                     ),
-                    child: const Icon(
+                    child: Icon(
                       FluentIcons.arrow_swap_20_regular,
                       size: 20,
-                      color: Colors.black,
+                      color: iconThemeData.color,
                     ),
                   ),
                   onPressed: () {
@@ -240,11 +241,7 @@ class _TranslationTargetSelectViewState
           ),
           if (widget.isShowSourceLanguageSelector ||
               widget.isShowTargetLanguageSelector)
-            const Divider(
-                // height: 0,
-                // indent: 12,
-                // endIndent: 12,
-                ),
+            const Divider(),
           if (widget.isShowSourceLanguageSelector)
             AvailableLanguageSelector(
               value: widget.sourceLanguage,

apps/biyi_app/lib/main.dart

@@ -27,52 +27,46 @@ const String _kDefaultFontFamily = 'Inter';
 
 const TextStyle _kBodyLargeTextStyle = TextStyle(
   fontFamily: _kDefaultFontFamily,
-  color: Colors.black,
   fontSize: 16,
   height: 20 / 16,
 );
 
 const TextStyle _kBodyMediumTextStyle = TextStyle(
   fontFamily: _kDefaultFontFamily,
-  color: Colors.black,
   fontSize: 14,
   height: 18 / 14,
 );
 
 const TextStyle _kBodySmallTextStyle = TextStyle(
   fontFamily: _kDefaultFontFamily,
-  color: Colors.black,
   fontSize: 12,
   height: 16 / 12,
 );
 
 const TextStyle _kLabelLargeTextStyle = TextStyle(
   fontFamily: _kDefaultFontFamily,
   fontWeight: FontWeight.w600,
-  color: Colors.black,
   fontSize: 14,
   height: 18 / 14,
 );
 
 const TextStyle _kLabelMediumTextStyle = TextStyle(
   fontFamily: _kDefaultFontFamily,
   fontWeight: FontWeight.w600,
-  color: Colors.black,
   fontSize: 12,
   height: 16 / 12,
 );
 
 const TextStyle _kLabelSmallTextStyle = TextStyle(
   fontFamily: _kDefaultFontFamily,
   fontWeight: FontWeight.w600,
-  color: Colors.black,
   fontSize: 10,
   height: 14 / 10,
 );
 
 final _lightThemeBase = ThemeData.light();
 
-final _lightTheme = _lightThemeBase.copyWith(
+final _lightTheme = ThemeData(
   colorScheme: _lightThemeBase.colorScheme.copyWith(
     primary: ReflectColors.blue,
     // onPrimary,
@@ -112,8 +106,8 @@ final _lightTheme = _lightThemeBase.copyWith(
     // surfaceContainerHigh,
     // surfaceContainerHighest,
     // onSurfaceVariant,
-    outline: ReflectColors.gray.shade300,
-    outlineVariant: ReflectColors.gray.shade300,
+    outline: ReflectColors.gray.shade200,
+    outlineVariant: ReflectColors.gray.shade200,
     // shadow,
     // scrim,
     // inverseSurface,
@@ -123,28 +117,98 @@ final _lightTheme = _lightThemeBase.copyWith(
   ),
   scaffoldBackgroundColor: ReflectColors.gray.shade100,
   textTheme: _lightThemeBase.textTheme.copyWith(
-    bodyLarge: _kBodyLargeTextStyle,
-    bodyMedium: _kBodyMediumTextStyle,
-    bodySmall: _kBodySmallTextStyle,
-    labelLarge: _kLabelLargeTextStyle,
-    labelMedium: _kLabelMediumTextStyle,
-    labelSmall: _kLabelSmallTextStyle,
+    bodyLarge: _kBodyLargeTextStyle.copyWith(
+      color: Colors.black,
+    ),
+    bodyMedium: _kBodyMediumTextStyle.copyWith(
+      color: Colors.black,
+    ),
+    bodySmall: _kBodySmallTextStyle.copyWith(
+      color: Colors.black,
+    ),
+    labelLarge: _kLabelLargeTextStyle.copyWith(
+      color: Colors.black,
+    ),
+    labelMedium: _kLabelMediumTextStyle.copyWith(
+      color: Colors.black,
+    ),
+    labelSmall: _kLabelSmallTextStyle.copyWith(
+      color: Colors.black,
+    ),
   ),
 );
 
 final _darkThemeBase = ThemeData.dark();
 
 final _darkTheme = _darkThemeBase.copyWith(
-  colorScheme: _lightThemeBase.colorScheme.copyWith(
-    primary: ReflectColors.indigo,
+  colorScheme: _darkThemeBase.colorScheme.copyWith(
+    primary: ReflectColors.blue,
+    // onPrimary,
+    // primaryContainer,
+    // onPrimaryContainer,
+    // primaryFixed,
+    // primaryFixedDim,
+    // onPrimaryFixed,
+    // onPrimaryFixedVariant,
+    // secondary,
+    // onSecondary,
+    // secondaryContainer,
+    // onSecondaryContainer,
+    // secondaryFixed,
+    // secondaryFixedDim,
+    // onSecondaryFixed,
+    // onSecondaryFixedVariant,
+    // tertiary,
+    // onTertiary,
+    // tertiaryContainer,
+    // onTertiaryContainer,
+    // tertiaryFixed,
+    // tertiaryFixedDim,
+    // onTertiaryFixed,
+    // onTertiaryFixedVariant,
+    // error,
+    // onError,
+    // errorContainer,
+    // onErrorContainer,
+    // surface,
+    // onSurface,
+    // surfaceDim,
+    // surfaceBright,
+    // surfaceContainerLowest,
+    surfaceContainerLow: ReflectColors.neutral.shade900,
+    // surfaceContainer,
+    // surfaceContainerHigh,
+    // surfaceContainerHighest,
+    // onSurfaceVariant,
+    outline: ReflectColors.neutral.shade800,
+    outlineVariant: ReflectColors.neutral.shade800,
+    // shadow,
+    // scrim,
+    // inverseSurface,
+    // onInverseSurface,
+    // inversePrimary,
+    // surfaceTint,
   ),
+  scaffoldBackgroundColor: Colors.black,
   textTheme: _darkThemeBase.textTheme.copyWith(
-    bodyLarge: _kBodyLargeTextStyle,
-    bodyMedium: _kBodyMediumTextStyle,
-    bodySmall: _kBodySmallTextStyle,
-    labelLarge: _kLabelLargeTextStyle,
-    labelMedium: _kLabelMediumTextStyle,
-    labelSmall: _kLabelSmallTextStyle,
+    bodyLarge: _kBodyLargeTextStyle.copyWith(
+      color: Colors.white,
+    ),
+    bodyMedium: _kBodyMediumTextStyle.copyWith(
+      color: Colors.white,
+    ),
+    bodySmall: _kBodySmallTextStyle.copyWith(
+      color: Colors.white,
+    ),
+    labelLarge: _kLabelLargeTextStyle.copyWith(
+      color: Colors.white,
+    ),
+    labelMedium: _kLabelMediumTextStyle.copyWith(
+      color: Colors.white,
+    ),
+    labelSmall: _kLabelSmallTextStyle.copyWith(
+      color: Colors.white,
+    ),
   ),
 );
 

apps/biyi_app/lib/widgets/translation_result_record_view/translation_engine_tag.dart

@@ -45,11 +45,7 @@ class _TranslationEngineTagState extends State<TranslationEngineTag> {
         alignment: Alignment.centerRight,
         child: Container(
           decoration: BoxDecoration(
-            color: Theme.of(context).scaffoldBackgroundColor,
-            border: Border.all(
-              color: Theme.of(context).dividerColor,
-              width: 0.5,
-            ),
+            color: Theme.of(context).colorScheme.outlineVariant,
             borderRadius: const BorderRadius.only(
               topLeft: Radius.circular(20),
               bottomLeft: Radius.circular(20),

apps/biyi_app/lib/widgets/translation_result_record_view/translation_result_record_view.dart

@@ -53,6 +53,7 @@ class TranslationResultRecordView extends StatelessWidget {
   }
 
   Widget _buildRequestLoading(BuildContext context) {
+    IconThemeData iconThemeData = Theme.of(context).iconTheme;
     return Container(
       constraints: const BoxConstraints(
         minHeight: 40,
@@ -66,7 +67,7 @@ class TranslationResultRecordView extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           SpinKitThreeBounce(
-            color: Theme.of(context).textTheme.bodySmall!.color,
+            color: iconThemeData.color,
             size: 12.0,
           ),
         ],

apps/biyi_app/pubspec.lock

@@ -888,7 +888,7 @@ packages:
     description:
       path: "packages/reflect_ui"
       ref: HEAD
-      resolved-ref: "844717324f3c9388bc79dc648382b23e074a3a19"
+      resolved-ref: c3c19c259ddfcb6f3e74e8e85f1d62545efa37fc
       url: "https://github.com/leanflutter/reflect_ui.git"
     source: git
     version: "0.0.1"