fix: Light theme inconsistencies in colored containers (closes #18)

Oberhauser-Dev · Dec 23, 2023 · 79c2bfd · 79c2bfd
1 parent c06fa53
commit 79c2bfd
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 22 deletions.
diff --git a/wrestling_scoreboard_client/lib/ui/components/themed.dart b/wrestling_scoreboard_client/lib/ui/components/themed.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class ThemedContainer extends StatelessWidget {
+  final Color? color;
+  final double? height;
+  final EdgeInsets? padding;
+  final EdgeInsets? margin;
+  final Widget child;
+
+  const ThemedContainer({
+    required this.child,
+    this.height,
+    this.color,
+    this.padding,
+    this.margin,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor =
+        ThemeData.estimateBrightnessForColor(color ?? Theme.of(context).colorScheme.background) == Brightness.light
+            ? Colors.black
+            : Colors.white;
+    return Container(
+      color: color,
+      padding: padding,
+      margin: margin,
+      height: height,
+      child: DefaultTextStyle.merge(style: TextStyle(color: textColor), child: child),
+    );
+  }
+}
diff --git a/wrestling_scoreboard_client/lib/ui/display/bout/bout_actions.dart b/wrestling_scoreboard_client/lib/ui/display/bout/bout_actions.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:wrestling_scoreboard_client/data/bout_role.dart';
 import 'package:wrestling_scoreboard_client/ui/components/scaled_text.dart';
+import 'package:wrestling_scoreboard_client/ui/components/themed.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class ActionsWidget extends StatelessWidget {
@@ -25,7 +26,7 @@ class ActionsWidget extends StatelessWidget {
               final color = getColorFromBoutRole(e.role);
               return Tooltip(
                   message: durationToString(e.duration),
-                  child: Container(
+                  child: ThemedContainer(
                     margin: const EdgeInsets.symmetric(horizontal: 1),
                     padding: EdgeInsets.all(padding),
                     color: color,

diff --git a/wrestling_scoreboard_client/lib/ui/display/bout/bout_display.dart b/wrestling_scoreboard_client/lib/ui/display/bout/bout_display.dart
@@ -10,6 +10,7 @@ import 'package:wrestling_scoreboard_client/data/wrestling_style.dart';
 import 'package:wrestling_scoreboard_client/ui/components/consumer.dart';
 import 'package:wrestling_scoreboard_client/ui/components/exception.dart';
 import 'package:wrestling_scoreboard_client/ui/components/scaled_text.dart';
+import 'package:wrestling_scoreboard_client/ui/components/themed.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/bout_action_controls.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/bout_actions.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/bout_main_controls.dart';
@@ -21,7 +22,6 @@ import 'package:wrestling_scoreboard_client/ui/models/participant_state_model.da
 import 'package:wrestling_scoreboard_client/ui/overview/team_match_overview.dart';
 import 'package:wrestling_scoreboard_client/ui/utils.dart';
 import 'package:wrestling_scoreboard_client/util/audio/audio.dart';
-import 'package:wrestling_scoreboard_client/util/colors.dart';
 import 'package:wrestling_scoreboard_client/util/network/data_provider.dart';
 import 'package:wrestling_scoreboard_client/util/print/pdf/score_sheet.dart';
 import 'package:wrestling_scoreboard_client/util/units.dart';
@@ -245,7 +245,7 @@ class BoutState extends State<BoutScreen> {
   displayClassificationPoints(ParticipantState? pStatus, MaterialColor color, double padding) {
     return Consumer<ParticipantState?>(
       builder: (context, data, child) => pStatus?.classificationPoints != null
-          ? Container(
+          ? ThemedContainer(
               color: color.shade800,
               padding: EdgeInsets.symmetric(vertical: padding * 3, horizontal: padding * 2),
               child: Center(
@@ -273,7 +273,7 @@ class BoutState extends State<BoutScreen> {
   displayParticipant(ParticipantState? pStatus, BoutRole role, double padding) {
     var color = getColorFromBoutRole(role);
 
-    return Container(
+    return ThemedContainer(
       color: color,
       child: IntrinsicHeight(
         child: SingleConsumer<ParticipantState>(
@@ -367,7 +367,7 @@ class BoutState extends State<BoutScreen> {
     double padding = width / 100;
     final bottomPadding = EdgeInsets.only(bottom: padding);
 
-    MaterialColor stopwatchColor = stopwatch == _breakStopwatch ? Colors.orange : white;
+    Color stopwatchColor = stopwatch == _breakStopwatch ? Colors.orange : Theme.of(context).colorScheme.onBackground;
 
     final shareAction = IconButton(
       icon: const Icon(Icons.share),

diff --git a/wrestling_scoreboard_client/lib/ui/display/bout/bout_main_controls.dart b/wrestling_scoreboard_client/lib/ui/display/bout/bout_main_controls.dart
@@ -3,6 +3,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
 import 'package:wrestling_scoreboard_client/data/bout_result.dart';
 import 'package:wrestling_scoreboard_client/data/bout_role.dart';
+import 'package:wrestling_scoreboard_client/ui/components/themed.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/bout_display.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/bout_shortcuts.dart';
 import 'package:wrestling_scoreboard_client/util/network/data_provider.dart';
@@ -41,14 +42,14 @@ class BoutMainControlsState extends State<BoutMainControls> {
                 Expanded(
                     child: widget.boutState.bouts.first == widget.boutState.bout
                         ? IconButton(
-                            color: Colors.white24,
+                            color: Theme.of(context).disabledColor,
                             icon: const Icon(Icons.close),
                             onPressed: () {
                               widget.callback(const BoutScreenActionIntent.quit());
                             },
                           )
                         : IconButton(
-                            color: Colors.white24,
+                            color: Theme.of(context).disabledColor,
                             icon: const Icon(Icons.arrow_back),
                             onPressed: () {
                               widget.callback(const BoutScreenActionIntent.previousBout());
@@ -65,14 +66,14 @@ class BoutMainControlsState extends State<BoutMainControls> {
                 Expanded(
                     child: widget.boutState.bouts.last == widget.boutState.bout
                         ? IconButton(
-                            color: Colors.white24,
+                            color: Theme.of(context).disabledColor,
                             icon: const Icon(Icons.close),
                             onPressed: () {
                               widget.callback(const BoutScreenActionIntent.quit());
                             },
                           )
                         : IconButton(
-                            color: Colors.white24,
+                            color: Theme.of(context).disabledColor,
                             icon: const Icon(Icons.arrow_forward),
                             onPressed: () {
                               widget.callback(const BoutScreenActionIntent.nextBout());
@@ -109,7 +110,7 @@ class BoutMainControlsState extends State<BoutMainControls> {
       value: null,
       child: Text(AppLocalizations.of(context)!.optionSelect, style: TextStyle(color: Theme.of(context).disabledColor)),
     ));
-    return Container(
+    return ThemedContainer(
       color: role == widget.boutState.bout.winnerRole ? getColorFromBoutRole(role) : null,
       child: ButtonTheme(
           alignedDropdown: true,

diff --git a/wrestling_scoreboard_client/lib/ui/display/bout/technical_points.dart b/wrestling_scoreboard_client/lib/ui/display/bout/technical_points.dart
@@ -4,6 +4,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
 import 'package:wrestling_scoreboard_client/data/bout_role.dart';
 import 'package:wrestling_scoreboard_client/ui/components/scaled_text.dart';
+import 'package:wrestling_scoreboard_client/ui/components/themed.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/time_display.dart';
 import 'package:wrestling_scoreboard_client/ui/models/participant_state_model.dart';
 import 'package:wrestling_scoreboard_client/util/colors.dart';
@@ -19,7 +20,7 @@ class TechnicalPoints extends StatelessWidget {
   Widget build(BuildContext context) {
     final width = MediaQuery.of(context).size.width;
     final cellHeight = width / 6;
-    return Container(
+    return ThemedContainer(
       color: getColorFromBoutRole(role),
       height: cellHeight,
       child: Column(

diff --git a/wrestling_scoreboard_client/lib/ui/display/bout/time_display.dart b/wrestling_scoreboard_client/lib/ui/display/bout/time_display.dart
@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:wrestling_scoreboard_client/ui/components/scaled_text.dart';
+import 'package:wrestling_scoreboard_client/ui/utils.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class TimeDisplay extends StatefulWidget {
-  final MaterialColor color;
+  final Color color;
   final ObservableStopwatch stopwatch;
   final double? fontSize;
 
@@ -47,7 +48,7 @@ class TimeDisplayState extends State<TimeDisplay> {
     return ScaledText(
       _currentTime,
       fontSize: widget.fontSize ?? 14,
-      color: widget.stopwatch.isRunning ? widget.color : widget.color.shade200,
+      color: widget.stopwatch.isRunning ? widget.color : widget.color.disabled(),
       minFontSize: 12,
       softWrap: false,
     );

diff --git a/wrestling_scoreboard_client/lib/ui/display/common.dart b/wrestling_scoreboard_client/lib/ui/display/common.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:wrestling_scoreboard_client/ui/components/scaled_text.dart';
+import 'package:wrestling_scoreboard_client/ui/components/themed.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class CommonElements {
@@ -8,7 +9,7 @@ class CommonElements {
     final padding = width / 100;
     final edgeInsets = EdgeInsets.all(padding);
     return [
-      Container(
+      ThemedContainer(
           color: Colors.red.shade800,
           padding: edgeInsets,
           child: Center(
@@ -21,7 +22,7 @@ class CommonElements {
       Row(
         children: [
           Expanded(
-            child: Container(
+            child: ThemedContainer(
               color: Colors.red.shade900,
               child: Center(
                 child: ScaledText(
@@ -34,7 +35,7 @@ class CommonElements {
             ),
           ),
           Expanded(
-            child: Container(
+            child: ThemedContainer(
               color: Colors.blue.shade900,
               child: Center(
                 child: ScaledText(
@@ -48,7 +49,7 @@ class CommonElements {
           ),
         ],
       ),
-      Container(
+      ThemedContainer(
         color: Colors.blue.shade800,
         padding: edgeInsets,
         child: Center(

diff --git a/wrestling_scoreboard_client/lib/ui/display/match/match_display.dart b/wrestling_scoreboard_client/lib/ui/display/match/match_display.dart
@@ -7,6 +7,7 @@ import 'package:wrestling_scoreboard_client/data/wrestling_style.dart';
 import 'package:wrestling_scoreboard_client/ui/components/consumer.dart';
 import 'package:wrestling_scoreboard_client/ui/components/exception.dart';
 import 'package:wrestling_scoreboard_client/ui/components/scaled_text.dart';
+import 'package:wrestling_scoreboard_client/ui/components/themed.dart';
 import 'package:wrestling_scoreboard_client/ui/display/bout/bout_display.dart';
 import 'package:wrestling_scoreboard_client/ui/display/common.dart';
 import 'package:wrestling_scoreboard_client/ui/overview/team_match_overview.dart';
@@ -140,14 +141,14 @@ class BoutListItemTwo {
   const BoutListItemTwo({required this.match, required this.bout, required this.actions});
 
   displayName({ParticipantState? pStatus, required BoutRole role, double? fontSize, required BuildContext context}) {
-    return Container(
+    return ThemedContainer(
       color: getColorFromBoutRole(role),
       child: Center(
         child: ScaledText(
           pStatus == null
               ? AppLocalizations.of(context)!.participantVacant
               : pStatus.participation.membership.person.fullName,
-          color: pStatus == null ? Colors.white30 : Colors.white,
+          color: pStatus == null ? Colors.white.disabled() : Colors.white,
           fontSize: 17,
           minFontSize: 14,
         ),
@@ -164,7 +165,7 @@ class BoutListItemTwo {
         children: [
           Expanded(
               flex: 70,
-              child: Container(
+              child: ThemedContainer(
                 color: color,
                 child: Center(
                   child: ScaledText(
@@ -175,7 +176,7 @@ class BoutListItemTwo {
               )),
           Expanded(
             flex: 50,
-            child: Container(
+            child: ThemedContainer(
               color: color,
               child: Center(
                 child: pState?.classificationPoints != null
@@ -235,7 +236,7 @@ class BoutListItemTwo {
                 children: [
                   Expanded(
                       flex: 70,
-                      child: Container(
+                      child: ThemedContainer(
                         color: data?.winnerRole != null ? getColorFromBoutRole(data!.winnerRole!).shade800 : null,
                         child: Center(
                           child: ScaledText(getAbbreviationFromBoutResult(data?.result, context), fontSize: 12),

diff --git a/wrestling_scoreboard_client/lib/ui/utils.dart b/wrestling_scoreboard_client/lib/ui/utils.dart
@@ -1,4 +1,14 @@
 import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
 
 final isMobile =
     !kIsWeb && (defaultTargetPlatform == TargetPlatform.android || defaultTargetPlatform == TargetPlatform.iOS);
+
+extension ColorExtension on Color {
+  /// Get disabled state of a color.
+  /// This adheres to the Material Design specifications:
+  /// https://m3.material.io/foundations/interaction/states/applying-states#4aff9c51-d20f-4580-a510-862d2e25e931
+  Color disabled() {
+    return withOpacity(0.38);
+  }
+}