feat: update theme handling and improve UI consistency across various screens

Author: oldrev

client/lib/app/app.dart

@@ -106,16 +106,6 @@ class _BorneoAppState extends State<BorneoApp> {
 
   @override
   Widget build(BuildContext context) {
-    /*
-      theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff493b72), brightness: Brightness.light),
-        useMaterial3: true, // 推荐使用 Material 3
-      ),
-      darkTheme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff493b72), brightness: Brightness.dark),
-        useMaterial3: true, // 推荐使用 Material 3
-      ),
-    */
     return MultiProvider(
       providers: [
         Provider<EventBus>(create: (_) => widget.globalEventBus),
@@ -126,8 +116,16 @@ class _BorneoAppState extends State<BorneoApp> {
           return MaterialApp(
             title: 'Borneo Aqua',
             navigatorKey: _navigatorKey,
-            theme: BorneoTheme(Theme.of(context).textTheme).light(),
-            darkTheme: BorneoTheme(Theme.of(context).textTheme).dark(),
+            //theme: BorneoTheme(Theme.of(context).textTheme).light(),
+            //darkTheme: BorneoTheme(Theme.of(context).textTheme).dark(),
+            theme: ThemeData(
+              colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff493b72), brightness: Brightness.light),
+              useMaterial3: true, // 推荐使用 Material 3
+            ),
+            darkTheme: ThemeData(
+              colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff493b72), brightness: Brightness.dark),
+              useMaterial3: true, // 推荐使用 Material 3
+            ),
             themeMode: _themeMode,
             locale: _locale,
             supportedLocales: kSupportedLocales,
@@ -150,10 +148,13 @@ class _BorneoAppState extends State<BorneoApp> {
                 SystemChrome.setSystemUIOverlayStyle(
                   SystemUiOverlayStyle(
                     statusBarColor: Colors.transparent,
-                    statusBarIconBrightness: Brightness.dark,
-                    systemNavigationBarColor: effectiveBrightness == Brightness.light
+                    statusBarIconBrightness: theme.brightness,
+                    systemNavigationBarColor: theme.colorScheme.surfaceContainer,
+                    /*
+                    effectiveBrightness == Brightness.light
                         ? Colors.white
-                        : theme.colorScheme.surfaceContainerHighest,
+                        : theme.colorScheme.surfaceContainer,
+                        */
                     systemNavigationBarIconBrightness: effectiveBrightness == Brightness.light
                         ? Brightness.dark
                         : Brightness.light,

client/lib/devices/borneo/lyfi/manifest.dart

@@ -56,16 +56,16 @@ class LyfiDeviceModuleMetadata extends DeviceModuleMetadata {
   }
 
   static List<Widget> _secondaryStatesBuilder(BuildContext context, AbstractDeviceSummaryViewModel vm) {
-    final modeWidget = Selector<AbstractDeviceSummaryViewModel, LyfiMode?>(
-      selector: (_, vm) => (vm as LyfiSummaryDeviceViewModel).ledMode,
-      builder: (context, mode, child) => Text(_modeText(context, mode), style: Theme.of(context).textTheme.labelSmall),
-    );
     final stateWidget = Selector<AbstractDeviceSummaryViewModel, LyfiState?>(
       selector: (_, vm) => (vm as LyfiSummaryDeviceViewModel).ledState,
       builder: (context, state, child) =>
           Text(_stateText(context, state), style: Theme.of(context).textTheme.labelSmall),
     );
-    return [modeWidget, stateWidget];
+    final modeWidget = Selector<AbstractDeviceSummaryViewModel, LyfiMode?>(
+      selector: (_, vm) => (vm as LyfiSummaryDeviceViewModel).ledMode,
+      builder: (context, mode, child) => Text(_modeText(context, mode), style: Theme.of(context).textTheme.labelSmall),
+    );
+    return [stateWidget, modeWidget];
   }
 
   /// Custom card center: bar chart of per-channel brightness.
@@ -115,20 +115,13 @@ class LyfiDeviceModuleMetadata extends DeviceModuleMetadata {
     }
   }
 
-  static String _stateText(BuildContext context, LyfiState? state) {
-    switch (state) {
-      case LyfiState.normal:
-        return context.translate('NORM');
-      case LyfiState.dimming:
-        return context.translate('DIMM');
-      case LyfiState.temporary:
-        return context.translate('TEMP');
-      case LyfiState.preview:
-        return context.translate('PREV');
-      default:
-        return '-';
-    }
-  }
+  static String _stateText(BuildContext context, LyfiState? state) => switch (state) {
+    LyfiState.normal => context.translate('NORM'),
+    LyfiState.dimming => context.translate('DIMM'),
+    LyfiState.temporary => context.translate('TEMP'),
+    LyfiState.preview => context.translate('PREV'),
+    _ => '-',
+  };
 
   static Future<WotThing> _createWotThing(
     DeviceEntity device,
@@ -161,7 +154,7 @@ class _LyfiBrightnessChart extends StatelessWidget {
     final fraction = (value / kLyfiBrightnessMax).clamp(0.0, 1.0).toDouble();
     final pct = (fraction * 100).round();
     final primaryColor = HexColor.fromHex(ch.color);
-    final trackColor = Theme.of(context).colorScheme.surfaceContainerLow;
+    final trackColor = Theme.of(context).colorScheme.surfaceContainerHigh;
     return Center(
       child: LayoutBuilder(
         builder: (context, constraints) {

client/lib/devices/borneo/lyfi/views/brightness_slider_list.dart

@@ -39,7 +39,10 @@ class BrightnessSliderList<TEditor extends IEditor> extends StatelessWidget {
               SizedBox(height: 4),
               Text(
                 '${(channelValue / kLyfiBrightnessMax * 100.0).toStringAsFixed(1).padLeft(5, '\u2007')}%',
-                style: Theme.of(context).textTheme.labelMedium?.copyWith(fontFeatures: [FontFeature.tabularFigures()]),
+                style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                  color: Theme.of(context).colorScheme.onSurface,
+                  fontFeatures: [FontFeature.tabularFigures()],
+                ),
               ),
             ],
           ),
@@ -57,7 +60,7 @@ class BrightnessSliderList<TEditor extends IEditor> extends StatelessWidget {
       padding: EdgeInsets.zero,
       itemCount: editor.availableChannelCount,
       itemBuilder: (context, index) => sliders[index],
-      separatorBuilder: (context, index) => Divider(height: 1, color: Theme.of(context).dividerColor),
+      separatorBuilder: (context, index) => Divider(height: 1, color: Theme.of(context).dividerTheme.color, indent: 16),
     );
   }
 }

client/lib/devices/borneo/lyfi/views/brightness_slider_list_tile.dart

@@ -27,9 +27,9 @@ class BrightnessSliderListTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final handlerSize = 24.0;
+    final trackBarBorder = Border.all(color: Theme.of(context).colorScheme.surfaceContainerHigh, width: 1.5);
     return ListTile(
       dense: true,
-      tileColor: Theme.of(context).colorScheme.surfaceContainerHigh,
       minVerticalPadding: 0,
       contentPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 0),
       title: FlutterSlider(
@@ -46,7 +46,7 @@ class BrightnessSliderListTile extends StatelessWidget {
             child: Center(
               child: Icon(
                 Icons.circle,
-                color: disabled ? color : color.withValues(alpha: 0.38),
+                color: disabled ? color.withValues(alpha: 0.38) : color,
                 size: handlerSize * 0.60,
               ),
             ),
@@ -66,15 +66,10 @@ class BrightnessSliderListTile extends StatelessWidget {
         trackBar: FlutterSliderTrackBar(
           activeTrackBarHeight: 8,
           inactiveTrackBarHeight: 8,
-          activeTrackBar: BoxDecoration(
-            border: Border.all(color: Theme.of(context).colorScheme.surfaceDim, width: 1.5),
-            color: disabled ? color.withValues(alpha: 0.38) : color,
-            borderRadius: BorderRadius.circular(3),
-          ),
-          inactiveTrackBar: BoxDecoration(
-            color: Theme.of(context).colorScheme.surfaceDim,
-            borderRadius: BorderRadius.circular(3),
-          ),
+          activeDisabledTrackBarColor: color.withValues(alpha: 0.15),
+          inactiveDisabledTrackBarColor: color.withValues(alpha: 0.15),
+          activeTrackBar: BoxDecoration(border: trackBarBorder, color: color),
+          inactiveTrackBar: BoxDecoration(border: trackBarBorder, color: color.withValues(alpha: 0.24)),
         ),
         onDragging: (index, low, _) => onChanged(low.toInt()),
         onDragCompleted: (index, low, _) => onChanged(low.toInt()),

client/lib/devices/borneo/lyfi/views/dashboard/dashboard_acclimation_tile.dart

@@ -146,7 +146,7 @@ class DashboardAcclimationTile extends StatelessWidget {
                   child: Icon(
                     Icons.calendar_month_outlined,
                     size: 64,
-                    color: theme.colorScheme.onSurface.withValues(alpha: 0.15),
+                    color: theme.colorScheme.inversePrimary.withValues(alpha: 0.24),
                   ),
                 ),
             ],

client/lib/devices/borneo/lyfi/views/dashboard/dashboard_settings_tile.dart

@@ -32,57 +32,33 @@ class DashboardSettingsTile extends StatelessWidget {
         Widget tile = DashboardTile(
           disabled: isDisabled,
           onPressed: isDisabled ? null : () => _openSettings(context, gt),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Icon(Icons.settings, size: 32, color: effectiveIconColor),
-              const SizedBox(width: 8),
-              Expanded(
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      context.translate("Settings"),
-                      style: theme.textTheme.titleMedium?.copyWith(color: effectiveFgColor),
-                    ),
-                  ],
+          child: Badge(
+            key: Key('settings_red_dot'),
+            largeSize: 12,
+            smallSize: 12,
+            isLabelVisible: showDot,
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Icon(Icons.settings, size: 32, color: effectiveIconColor),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        context.translate("Settings"),
+                        style: theme.textTheme.titleMedium?.copyWith(color: effectiveFgColor),
+                      ),
+                    ],
+                  ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
         );
 
-        if (showDot) {
-          // use a tiny notification-style badge rather than a huge circle.
-          // typical apps use something like 6–10px diameter with a white border.
-          const double dotDiameter = 10.0;
-          const double borderWidth = 1.5;
-          // keep the badge fully inside the tile so it doesn't hit siblings on
-          // large screens.  Use a small inset relative to corner radius.
-          final double inset = DashboardTile.cornerRadius / 4;
-          tile = Stack(
-            clipBehavior: Clip.none,
-            children: [
-              tile,
-              Positioned(
-                top: inset,
-                right: inset,
-                child: Container(
-                  key: const Key('settings_red_dot'),
-                  width: dotDiameter,
-                  height: dotDiameter,
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.error,
-                    shape: BoxShape.circle,
-                    border: Border.all(color: Theme.of(context).scaffoldBackgroundColor, width: borderWidth),
-                  ),
-                ),
-              ),
-            ],
-          );
-        }
-
         return tile;
       },
     );

client/lib/devices/borneo/lyfi/views/dashboard/dashboard_temporary_tile.dart

@@ -108,7 +108,7 @@ class DashboardTemporaryTile extends StatelessWidget {
                   child: Icon(
                     Icons.flashlight_on,
                     size: 64,
-                    color: theme.colorScheme.onSurface.withValues(alpha: 0.15),
+                    color: theme.colorScheme.inversePrimary.withValues(alpha: 0.24),
                   ),
                 ),
             ],

client/lib/devices/borneo/lyfi/views/editor/schedule_editor_view.dart

@@ -160,7 +160,7 @@ class ScheduleEditorView extends StatelessWidget {
             // Bottom buttons
             Consumer<ScheduleEditorViewModel>(
               builder: (context, vm, child) => ScreenTopRoundedContainer(
-                color: Theme.of(context).colorScheme.surfaceContainerHighest,
+                color: Theme.of(context).colorScheme.surfaceContainer,
                 padding: const EdgeInsets.fromLTRB(8, 24, 8, 8),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,

client/lib/devices/borneo/lyfi/views/moon_screen.dart

@@ -39,7 +39,6 @@ class MoonScreen extends StatelessWidget {
       create: (cb) => vm,
       builder: (context, child) {
         return Scaffold(
-          backgroundColor: Theme.of(context).scaffoldBackgroundColor,
           appBar: AppBar(
             title: Text(context.translate('Moonlight')),
             actions: [
@@ -67,22 +66,17 @@ class MoonScreen extends StatelessWidget {
                 return Column(
                   mainAxisSize: MainAxisSize.max,
                   children: [
-                    Container(
-                      color: Theme.of(context).scaffoldBackgroundColor,
-                      padding: const EdgeInsets.all(0),
-                      child: AspectRatio(
-                        aspectRatio: 1.5,
-                        child: Consumer<MoonViewModel>(builder: (context, vm, _) => buildGraph(context, vm)),
-                      ),
+                    AspectRatio(
+                      aspectRatio: 1.5,
+                      child: Consumer<MoonViewModel>(builder: (context, vm, _) => buildGraph(context, vm)),
                     ),
                     const SizedBox(height: 24),
                     Expanded(
                       child: Consumer<MoonViewModel>(
                         builder: (context, vm, _) => ScreenTopRoundedContainer(
-                          color: Theme.of(context).colorScheme.surfaceContainerHighest,
-                          child: SingleChildScrollView(
-                            child: BrightnessSliderList(vm.editor, disabled: !vm.enabled || !vm.canEdit),
-                          ),
+                          color: Theme.of(context).colorScheme.surfaceContainer,
+                          padding: EdgeInsets.fromLTRB(0, 24, 0, 24),
+                          child: BrightnessSliderList(vm.editor, disabled: !vm.enabled || !vm.canEdit),
                         ),
                       ),
                     ),

client/lib/features/devices/views/device_card.dart

@@ -30,7 +30,7 @@ class DeviceCard extends StatelessWidget {
       selector: (_, vm) => (isOnline: vm.isOnline, isPowerOn: vm.isPowerOn, name: vm.deviceEntity.name),
       builder: (context, status, _) {
         final colorScheme = Theme.of(context).colorScheme;
-        final bgColor = colorScheme.surfaceContainer;
+        final bgColor = colorScheme.surfaceContainerHighest;
         final fgColor = colorScheme.onSurface;
 
         return ClipRRect(
@@ -84,7 +84,7 @@ class DeviceCard extends StatelessWidget {
                                 ),
                         ),
                       ),
-                      const SizedBox(height: 2),
+                      const SizedBox(height: 4),
                       // Status row
                       Padding(
                         padding: const EdgeInsets.only(right: 8),
@@ -172,7 +172,8 @@ class DeviceCard extends StatelessWidget {
             if (i > 0)
               SizedBox(
                 height: 12,
-                child: VerticalDivider(thickness: 1.5, width: 8, color: fgColor.withValues(alpha: 0.38)),
+                width: 12,
+                child: Icon(Icons.circle, size: 4, color: fgColor.withValues(alpha: 0.38)),
               ),
             widgets[i],
           ],
@@ -226,6 +227,7 @@ class DeviceCard extends StatelessWidget {
       case 'change-group':
         final groupEntities = parentVM.groups.where((gvm) => !gvm.isDummy).map((gvm) => gvm.model).toList();
         showModalBottomSheet(
+          backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
           context: context,
           builder: (BuildContext ctx) => DeviceGroupSelectionSheet(
             availableGroups: groupEntities,