將黑暗模式由 Switch 改為 Picker 型態並新增"跟隨系統預設"的顏色模式

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // 使用 IntelliSense 以得知可用的屬性。
+    // 暫留以檢視現有屬性的描述。
+    // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": ".NET MAUI",
+            "type": "maui",
+            "request": "launch",
+            "preLaunchTask": "maui: Build"
+        }
+    ]
+}

src/DateCalculator/MainPage.xaml

@@ -9,6 +9,11 @@
             Spacing="25"
             Padding="30,0"
             VerticalOptions="Center">
+            <Switch
+                x:Name="DarkModeSwitch"
+                Toggled="OnDarkModeToggled"
+                HorizontalOptions="End">
+            </Switch>
             <Grid>
                 <Grid.RowDefinitions>
                     <RowDefinition />
@@ -39,7 +44,7 @@
                     x:Name="DateSelectDatePicker"
                     FontSize="24"
                     HorizontalOptions="Center"
-                    Format="yyyy 年 MM 月 dd 日"
+                    Format="yyyy / MM / dd "
                     Margin="20" />
             </Grid>
             <Grid>
@@ -110,7 +115,7 @@
                     x:Name="DateDiffDatePicker"
                     FontSize="24"
                     HorizontalOptions="Center"
-                    Format="yyyy 年 MM 月 dd 日"
+                    Format="yyyy / MM / dd "
                     Margin="20" 
                     IsVisible="false"/>
                 <Label
@@ -129,7 +134,7 @@
                 SemanticProperties.Hint="重算" />
             <Button
                 x:Name="ClearBtn"
-                BackgroundColor="#FF5151"
+                BackgroundColor="{StaticResource Red}"
                 Text="重算"
                 FontSize="Large"
                 Clicked="OnClearBtnClicked"

src/DateCalculator/MainPage.xaml.cs

@@ -1,4 +1,8 @@
 using System.Globalization;
+using System.Runtime.InteropServices;
+using Microsoft.UI;
+using Microsoft.UI.Xaml.Controls;
+using Windows.Devices.HumanInterfaceDevice;
 
 namespace DateCalculator
 {
@@ -20,21 +24,30 @@ public MainPage()
             SetDefault();
 
             if (Application.Current != null) 
-                Application.Current.UserAppTheme = AppTheme.Light;
+                Application.Current.UserAppTheme = Application.Current.RequestedTheme;
+
+            if (Application.Current.RequestedTheme == AppTheme.Light)
+            {
+                DarkModeSwitch.IsToggled = false;
+            }
+            else
+            {
+                DarkModeSwitch.IsToggled = true;
+            }
         }
 
         private void OnADBtnClicked(object sender, EventArgs e)
         {
             isTwYear = false;
-
+            
             ADBtn.BackgroundColor = toggledBackgroundColor;
             TWBtn.BackgroundColor = defaultTWBtnBackgroundColor;
         }
 
         private void OnTWBtnClicked(object sender, EventArgs e)
         {
             isTwYear = true;
-
+            
             ADBtn.BackgroundColor = defaultADBtnBackgroundColor;
             TWBtn.BackgroundColor = toggledBackgroundColor;
         }
@@ -128,7 +141,7 @@ private bool IsValidType()
 
             if (int.TryParse(YearEntry.Text, out _) || int.TryParse(MonthEntry.Text, out _) || int.TryParse(DayEntry.Text, out _))
             {
-                isType = true;    
+                isType = true;
             }
             else
             {
@@ -149,11 +162,6 @@ private void SetDefault()
             isCalculateDays = false;
             isFront = false;
 
-            defaultADBtnBackgroundColor = ADBtn.BackgroundColor;
-            defaultTWBtnBackgroundColor = TWBtn.BackgroundColor;
-            defaultFrontBtnBackgroundColor = FrontBtn.BackgroundColor;
-            defaultBackBtnBackgroundColor = BackBtn.BackgroundColor;
-            defaultDiffBtnBackgroundColor = DiffBtn.BackgroundColor;
             toggledBackgroundColor = Color.FromRgb(255, 82, 82);
         }
 
@@ -208,11 +216,10 @@ private void UIReset()
             DateSelectDatePicker.Date = DateTime.Now;
             DateDiffDatePicker.Date = DateTime.Now;
 
-            ADBtn.BackgroundColor = defaultADBtnBackgroundColor;
-            TWBtn.BackgroundColor = defaultTWBtnBackgroundColor;
-            FrontBtn.BackgroundColor = defaultFrontBtnBackgroundColor;
-            BackBtn.BackgroundColor = defaultBackBtnBackgroundColor;
-            DiffBtn.BackgroundColor = defaultDiffBtnBackgroundColor;
+            if(Application.Current.UserAppTheme == AppTheme.Light)
+                LightMode();
+            else
+                DarkMode();
 
             YearEntry.Text = null;
             MonthEntry.Text = null;
@@ -224,11 +231,75 @@ private void UIReset()
             DayEntry.IsVisible = true;
             DateDiffDatePicker.IsVisible = false;
         }
-
+        
         private void OnDarkModeToggled(object sender, ToggledEventArgs e)
         {
             if (Application.Current != null)
-                Application.Current.UserAppTheme = Application.Current.UserAppTheme is AppTheme.Light ? AppTheme.Dark : AppTheme.Light;
+                Application.Current.UserAppTheme = Application.Current.RequestedTheme is AppTheme.Light ? AppTheme.Dark : AppTheme.Light;
+
+            if (DarkModeSwitch.IsToggled)
+            {
+                Application.Current.UserAppTheme = AppTheme.Dark;
+            }
+            else
+            {
+                Application.Current.UserAppTheme = AppTheme.Light;
+            }
+
+            if (Application.Current.UserAppTheme == AppTheme.Light)
+            {
+                LightMode();
+            }
+            else
+            {
+                DarkMode();
+            }
+        }
+
+        private void LightMode()
+        { 
+            var hasLightColor = App.Current.Resources.TryGetValue("Primary", out var color);
+
+            if (hasLightColor)
+            {
+                var primaryColor = (Color)color;
+                defaultADBtnBackgroundColor = primaryColor;
+                defaultTWBtnBackgroundColor = primaryColor;
+                defaultFrontBtnBackgroundColor = primaryColor;
+                defaultBackBtnBackgroundColor = primaryColor;
+                defaultDiffBtnBackgroundColor = primaryColor;
+            }
+
+            TWBtn.BackgroundColor = defaultTWBtnBackgroundColor;
+            ADBtn.BackgroundColor = defaultADBtnBackgroundColor;
+            FrontBtn.BackgroundColor = defaultFrontBtnBackgroundColor;
+            BackBtn.BackgroundColor = defaultBackBtnBackgroundColor;
+            DiffBtn.BackgroundColor = defaultDiffBtnBackgroundColor;
+            DateSelectDatePicker.TextColor = defaultDiffBtnBackgroundColor;
+            DateDiffDatePicker.TextColor = defaultDiffBtnBackgroundColor;            
+        }
+
+        private void DarkMode()
+        { 
+            var hasDarkColor = App.Current.Resources.TryGetValue("Secondary", out var color);
+
+            if (hasDarkColor)
+            {
+                var secondaryColor = (Color)color;
+                defaultADBtnBackgroundColor = secondaryColor;
+                defaultTWBtnBackgroundColor = secondaryColor;
+                defaultFrontBtnBackgroundColor = secondaryColor;
+                defaultBackBtnBackgroundColor = secondaryColor;
+                defaultDiffBtnBackgroundColor = secondaryColor;
+            }
+
+            TWBtn.BackgroundColor = defaultTWBtnBackgroundColor;
+            ADBtn.BackgroundColor = defaultADBtnBackgroundColor;
+            FrontBtn.BackgroundColor = defaultFrontBtnBackgroundColor;
+            BackBtn.BackgroundColor = defaultBackBtnBackgroundColor;
+            DiffBtn.BackgroundColor = defaultDiffBtnBackgroundColor;
+            DateSelectDatePicker.TextColor = defaultDiffBtnBackgroundColor;
+            DateDiffDatePicker.TextColor = defaultDiffBtnBackgroundColor; 
         }
     }
 }

src/DateCalculator/Resources/Styles/Colors.xaml

@@ -17,6 +17,7 @@
     <Color x:Key="Gray600">#404040</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
+    <Color x:Key="Red">#FF1515</Color>
     <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
     <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
     <SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>

src/DateCalculator/Resources/Styles/Styles.xaml

@@ -24,7 +24,7 @@
     </Style>
 
     <Style TargetType="Button">
-        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Primary}}" />
+        <Setter Property="TextColor" Value="{StaticResource White}" />
         <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>