Addition of colour handling for system light dark theme

Added in the ability for the app to respond to system changes to the light/dark themes and change accordingly when this happens. New version is 11.
g-weston · Dec 23, 2024 · 7d76861 · 7d76861
1 parent 8375c07
commit 7d76861
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 39 deletions.
diff --git a/AboutPage.xaml b/AboutPage.xaml
@@ -2,7 +2,8 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="UmpireCounterMAUI.AboutPage"
-             Title="About">
+             Title="About"
+             BackgroundColor="{AppThemeBinding Light=White, Dark=Black}">
     <ContentPage.Content>
 
             <Grid>
@@ -21,20 +22,22 @@
                 <Label Text="Cricket Umpire Counter"
                        VerticalOptions="CenterAndExpand" 
                        HorizontalOptions="CenterAndExpand"
-                       FontSize="Large"
-                       TextColor="{StaticResource Primary}"
+                       FontSize="Title"
+                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Secondary}}"
                        Grid.Row="0"
                        Grid.Column="1"/>
                 <Label Text="Cricket umpire counting app for use in real matches to aid umpires. Customisable level of counting available to give you the choice of what you want to track!"
                        VerticalOptions="CenterAndExpand"
                        HorizontalOptions="CenterAndExpand"
+                       TextColor="{AppThemeBinding Light=Gray, Dark={StaticResource Secondary}}"
                        FontSize="Medium"
                        HorizontalTextAlignment="Center"
                        Grid.Row="1" 
                        Grid.Column="1"/>
-                <Label Text="Version 0.10"
+                <Label Text="Version 0.11"
                        VerticalOptions="CenterAndExpand"
                        HorizontalOptions="CenterAndExpand"
+                       TextColor="{AppThemeBinding Light=Gray, Dark={StaticResource Secondary}}"
                        FontSize="Small"
                        Grid.Row="2"
                        Grid.Column="1"/>

diff --git a/AdvancedCounter.xaml b/AdvancedCounter.xaml
@@ -2,7 +2,8 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="UmpireCounterMAUI.AdvancedCounter"
-             Title="Counter">
+             Title="Counter"
+             BackgroundColor="{AppThemeBinding Light=White, Dark=Black}">
 
     <ContentPage.ToolbarItems>
         <ToolbarItem Text="Reset" Clicked="ResetButtonClicked"/>
@@ -26,17 +27,126 @@
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
 
-        <Label Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" x:Name="ScoreHeaderLabel" Text="{Binding ScoreHeader}" FontSize="75" CharacterSpacing="2" TextColor="DodgerBlue" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
-        <Label Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" x:Name="OversHeaderLabel" Text="{Binding OversHeader }" FontSize="60" TextColor="DodgerBlue" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
-        <Label Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" x:Name="TimeHeaderLabel" Text="{Binding TimeHeader}" FontSize="Small" TextColor="DodgerBlue" HorizontalTextAlignment="End" VerticalTextAlignment="Start" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" IsVisible="true" />
-        <Label Grid.Column="1" Grid.Row="2" Text="Runs" x:Name="RunsLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" TextColor="DodgerBlue" />
-        <Button Grid.Column="0" Grid.Row="2" Text="-" x:Name="RunsDecreaseButton" FontSize="Large" Clicked="DecreaseTotalClicked" CornerRadius="25" BorderColor="{StaticResource Secondary}" BorderWidth="5"/>
-        <Button Grid.Column="2" Grid.Row="2" Text="+" x:Name="RunsIncreaseButton" FontSize="Large" Clicked="IncreaseTotalClicked" CornerRadius="25" BorderColor="{StaticResource Secondary}" BorderWidth="5"/>
-        <Label Grid.Column="1" Grid.Row="3" Text="Wickets" x:Name="WicketsLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" TextColor="DodgerBlue" />
-        <Button Grid.Column="0" Grid.Row="3" Text="-" x:Name="WicketsDecreaseButton" FontSize="Large" Clicked="DecreaseWicketsClicked" CornerRadius="25" BorderColor="{StaticResource Secondary}" BorderWidth="5"/>
-        <Button Grid.Column="2" Grid.Row="3" Text="+" x:Name="WicketsIncreaseButton" FontSize="Large" Clicked="IncreaseWicketsClicked" CornerRadius="25" BorderColor="{StaticResource Secondary}" BorderWidth="5"/>
-        <Label Grid.Column="1" Grid.Row="4" Text="Balls Bowled" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" TextColor="DodgerBlue" />
-        <Button Grid.Column="0" Grid.Row="4" Text="-" FontSize="Large" Clicked="DecreaseOversClicked" CornerRadius="25" BorderColor="{StaticResource Secondary}" BorderWidth="5"/>
-        <Button Grid.Column="2" Grid.Row="4" Text="+" FontSize="Large" Clicked="IncreaseOversClicked" CornerRadius="25" BorderColor="{StaticResource Secondary}" BorderWidth="5"/>
+        <Label Grid.Column="0"
+               Grid.ColumnSpan="3"
+               Grid.Row="0"
+               x:Name="ScoreHeaderLabel"
+               Text="{Binding ScoreHeader}"
+               FontSize="75"
+               CharacterSpacing="2"
+               TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark=White}"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               HorizontalOptions="FillAndExpand"
+               VerticalOptions="FillAndExpand" />
+
+        <Label Grid.Column="0"
+               Grid.ColumnSpan="3"
+               Grid.Row="1"
+               x:Name="OversHeaderLabel"
+               Text="{Binding OversHeader }"
+               FontSize="60"
+               TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark=White}"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Start"
+               HorizontalOptions="FillAndExpand"
+               VerticalOptions="FillAndExpand" />
+
+        <Label Grid.Column="0"
+               Grid.ColumnSpan="3"
+               Grid.Row="0"
+               x:Name="TimeHeaderLabel"
+               Text="{Binding TimeHeader}"
+               FontSize="Small"
+               TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark=White}"
+               HorizontalTextAlignment="End"
+               VerticalTextAlignment="Start"
+               HorizontalOptions="FillAndExpand"
+               VerticalOptions="FillAndExpand"
+               IsVisible="true" />
+
+        <Label Grid.Column="1"
+               Grid.Row="2"
+               Text="Runs"
+               x:Name="RunsLabel"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               FontSize="Large"
+               TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark=White}" />
+
+        <Button Grid.Column="0"
+                Grid.Row="2"
+                Text="-"
+                x:Name="RunsDecreaseButton"
+                FontSize="Large"
+                Clicked="DecreaseTotalClicked"
+                CornerRadius="25"
+                BorderColor="{AppThemeBinding Light=White, Dark=Black}"
+                BorderWidth="5" />
+
+        <Button Grid.Column="2"
+                Grid.Row="2"
+                Text="+"
+                x:Name="RunsIncreaseButton"
+                FontSize="Large"
+                Clicked="IncreaseTotalClicked"
+                CornerRadius="25"
+                BorderColor="{AppThemeBinding Light=White, Dark=Black}"
+                BorderWidth="5" />
+
+        <Label Grid.Column="1"
+               Grid.Row="3"
+               Text="Wickets"
+               x:Name="WicketsLabel"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               FontSize="Large"
+               TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark=White}" />
+
+        <Button Grid.Column="0"
+                Grid.Row="3"
+                Text="-"
+                x:Name="WicketsDecreaseButton"
+                FontSize="Large"
+                Clicked="DecreaseWicketsClicked"
+                CornerRadius="25"
+                BorderColor="{AppThemeBinding Light=White, Dark=Black}"
+                BorderWidth="5" />
+
+        <Button Grid.Column="2"
+                Grid.Row="3"
+                Text="+"
+                x:Name="WicketsIncreaseButton"
+                FontSize="Large"
+                Clicked="IncreaseWicketsClicked"
+                CornerRadius="25"
+                BorderColor="{AppThemeBinding Light=White, Dark=Black}"
+                BorderWidth="5" />
+
+        <Label Grid.Column="1"
+               Grid.Row="4"
+               Text="Balls Bowled"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               FontSize="Large"
+               TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark=White}" />
+
+        <Button Grid.Column="0"
+                Grid.Row="4"
+                Text="-"
+                FontSize="Large"
+                Clicked="DecreaseOversClicked"
+                CornerRadius="25"
+                BorderColor="{AppThemeBinding Light=White, Dark=Black}"
+                BorderWidth="5"/>
+
+        <Button Grid.Column="2"
+                Grid.Row="4"
+                Text="+"
+                FontSize="Large"
+                Clicked="IncreaseOversClicked"
+                CornerRadius="25"
+                BorderColor="{AppThemeBinding Light=White, Dark=Black}"
+                BorderWidth="5"/>
     </Grid>
 </ContentPage>
diff --git a/App.xaml b/App.xaml
@@ -11,6 +11,7 @@
             <Color x:Key="Secondary">White</Color>
             <Style TargetType="Button">
                 <Setter Property="TextColor" Value="{StaticResource Secondary}"></Setter>
+                <Setter Property="BorderColor" Value="#332196F3" />
                 <Setter Property="VisualStateManager.VisualStateGroups">
                     <VisualStateGroupList>
                         <VisualStateGroup x:Name="CommonStates">
@@ -28,6 +29,60 @@
                     </VisualStateGroupList>
                 </Setter>
             </Style>
-        </ResourceDictionary>        
+        </ResourceDictionary>
     </Application.Resources>
 </Application>
+
+<!--
+<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                    x:Class="UmpireCounterMAUI.LightTheme">
+    <Color x:Key="Primary">#2196F3</Color>
+    <Color x:Key="Secondary">White</Color>
+    <Style TargetType="Button">
+        <Setter Property="TextColor" Value="{StaticResource Secondary}"></Setter>
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="#332196F3" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+</ResourceDictionary>
+
+<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+            x:Class="UmpireCounterMAUI.DarkTheme">
+    <Color x:Key="Primary">#2196F3</Color>
+    <Color x:Key="Secondary">White</Color>
+    <Style TargetType="Button">
+        <Setter Property="TextColor" Value="{StaticResource Secondary}"></Setter>
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="#332196F3" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+</ResourceDictionary>
+-->
diff --git a/AppShell.xaml b/AppShell.xaml
@@ -40,8 +40,8 @@
                         <VisualStateGroup x:Name="CommonStates">
                             <VisualState x:Name="Normal">
                                 <VisualState.Setters>
-                                    <Setter Property="BackgroundColor" Value="{x:OnPlatform WinUI=Transparent, iOS=White, Android=Transparent}" />
-                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
+                                    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
+                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Secondary}}" />
                                 </VisualState.Setters>
                             </VisualState>
                             <VisualState x:Name="Selected">
@@ -63,7 +63,7 @@
                         <VisualStateGroup x:Name="CommonStates">
                             <VisualState x:Name="Normal">
                                 <VisualState.Setters>
-                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
+                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark=White}" />
                                 </VisualState.Setters>
                             </VisualState>
                         </VisualStateGroup>
@@ -122,7 +122,7 @@
                 <Image Source="UmpireCounterLogoMedium"
                        Grid.Row="0" />
                 <!-- TODO need to make this available generally rather than just a singular platform going forward-->
-                <BoxView Color="{StaticResource Secondary}"
+                <BoxView Color="{AppThemeBinding Light=White, Dark=Black}"
                          HeightRequest="5"
                          Grid.Row="1" />
             </Grid>
@@ -154,7 +154,7 @@
                 <Button TextColor="{StaticResource Secondary}"
                         Text="About"
                         Clicked="AboutButtonClicked"/>
-                <Label Text="Version 0.10"
+                <Label Text="Version 0.11"
                        TextColor="{StaticResource Secondary}"
                        HorizontalTextAlignment="Center"/>
                 <BoxView Color="{StaticResource Primary}"

diff --git a/Platforms/Android/AndroidManifest.xml b/Platforms/Android/AndroidManifest.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="10" android:versionName="0.10" package="com.companyname.umpirecounter">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="11" android:versionName="0.11" package="com.companyname.umpirecounter">
 	<application android:allowBackup="true" android:icon="@mipmap/cricketumpirecountersvg_logo" android:supportsRtl="true" android:label="Umpire Counter"></application>
 	<uses-permission android:name="android.permission.VIBRATE" />
 	<uses-permission android:name="android.permission.WAKE_LOCK" />

diff --git a/Resources/Styles/Colors.xaml b/Resources/Styles/Colors.xaml
@@ -6,7 +6,7 @@
 
     <!-- Note: For Android please see also Platforms\Android\Resources\values\colors.xml -->
 
-    <Color x:Key="Primary">#512BD4</Color>
+    <Color x:Key="Primary">#2196F3</Color>
     <Color x:Key="PrimaryDark">#ac99ea</Color>
     <Color x:Key="PrimaryDarkText">#242424</Color>
     <Color x:Key="Secondary">#DFD8F7</Color>