light theme updates

davidortinau · Jan 21, 2022 · a47ab61 · a47ab61
1 parent 6c2849f
commit a47ab61
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 23 deletions.
diff --git a/src/WeatherTwentyOne/App.xaml b/src/WeatherTwentyOne/App.xaml
@@ -12,7 +12,6 @@
     <Application.MainPage>
         <Shell 
             FlyoutWidth="68"
-            FlyoutBackgroundColor="{StaticResource Background_Mid}"
             FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">
 
             <!--<Shell.FlyoutHeaderTemplate>

diff --git a/src/WeatherTwentyOne/App.xaml.cs b/src/WeatherTwentyOne/App.xaml.cs
@@ -8,6 +8,8 @@ public App()
     {
         InitializeComponent();
 
+        App.Current.UserAppTheme = OSAppTheme.Light;
+
         if (Device.Idiom == TargetIdiom.Phone)
             Shell.Current.CurrentItem = PhoneTabs;
 

diff --git a/src/WeatherTwentyOne/Pages/FavoritesPage.xaml b/src/WeatherTwentyOne/Pages/FavoritesPage.xaml
@@ -15,7 +15,7 @@
                 CornerRadius="20"
                 HasShadow="False"
                 x:DataType="c:Location"
-                BackgroundColor="{StaticResource Background_Mid}">
+                BackgroundColor="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource Background_Mid}}">
                 <GridLayout
                                 RowDefinitions="42,40,*"
                                 Padding="20">

diff --git a/src/WeatherTwentyOne/Pages/SettingsPage.xaml b/src/WeatherTwentyOne/Pages/SettingsPage.xaml
@@ -37,7 +37,7 @@
                             <Label Text="Clear"
                                    HorizontalOptions="Center"
                                 VerticalOptions="Center"
-                                class="Headline"
+                                TextColor="{StaticResource White}"
                             />
                         </Border>
                     </VerticalStackLayout>
@@ -151,9 +151,9 @@
                         Source="https://devblogs.microsoft.com/xamarin/wp-content/uploads/sites/44/2019/03/Screen-Shot-2017-01-03-at-3.35.53-PM-150x150.png">
                     <Image.Clip>
                         <EllipseGeometry 
-                                Center="98,98"
-                                RadiusX="98"
-                                RadiusY="98"/>
+                                Center="75,75"
+                                RadiusX="75"
+                                RadiusY="75"/>
                     </Image.Clip>
                 </Image>
 

diff --git a/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml b/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml
@@ -30,6 +30,13 @@
     <Color x:Key="Accent_Blue200">#72ACF1</Color>
     <Color x:Key="TabOff">#91A7B7</Color>
 
+    <!-- light theme alternatives -->
+    <Color x:Key="DarkGray">#212125</Color>
+    <Color x:Key="MidGray">#CFCFD3</Color>
+    <Color x:Key="LightGray">#EFEFEF</Color>
+
+
+
     <FontImageSource
                 x:Key="SearchIcon"
                 FontFamily="FontAwesome"
@@ -40,18 +47,26 @@
      <!-- SHELL -->
     <Style x:Key="BaseStyle"
            TargetType="Element">
-            <Setter Property="Shell.FlyoutBackground"
-                        Value="{AppThemeBinding Light={StaticResource NeutralDarker}, Dark={StaticResource Background_Mid}}"/>
+            <Setter Property="Shell.FlyoutBackgroundColor"
+                        Value="{AppThemeBinding 
+                                Light={StaticResource LightGray}, 
+                                Dark={StaticResource Background_Mid}}"/>
             <Setter Property="Shell.BackgroundColor"
-                    Value="{AppThemeBinding Light={StaticResource NeutralDarker}, Dark={StaticResource Background_Mid}}" />
+                    Value="{AppThemeBinding 
+                        Light={StaticResource LightGray}, 
+                        Dark={StaticResource Background_Mid}}" />
             <Setter Property="Shell.ForegroundColor"
-                Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+                Value="{AppThemeBinding 
+                        Light={StaticResource DarkGray}, 
+                        Dark={StaticResource White}}" />
             <Setter Property="Shell.TitleColor"
-                Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
-            <Setter Property="Shell.DisabledColor"
+                Value="{AppThemeBinding 
+                        Light={StaticResource DarkGray}, 
+                        Dark={StaticResource White}}" />
+            <!--<Setter Property="Shell.DisabledColor"
                 Value="#B4000000" />
             <Setter Property="Shell.UnselectedColor"
-                Value="#CC0000" />
+                Value="#CC0000" />-->
             <Setter Property="Shell.NavBarHasShadow"
                 Value="False"/>
 
@@ -74,21 +89,29 @@
 
     <Style TargetType="Page" ApplyToDerivedTypes="True">
         <Setter Property="Padding" Value="0"/>
-        <Setter Property="BackgroundColor" Value="{StaticResource Background_Dark}"/>
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding 
+            Light={StaticResource MidGray},
+            Dark={StaticResource Background_Dark}}"/>
     </Style>
 
     <Style TargetType="NavigationPage" ApplyToDerivedTypes="True">
-        <Setter Property="BackgroundColor" Value="{StaticResource Background_Mid}"/>
-        <Setter Property="BarBackgroundColor" Value="{StaticResource Background_Mid}"/>
-        <Setter Property="BarTextColor" Value="{StaticResource White}"/>
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding 
+            Light={StaticResource LightGray},
+            Dark={StaticResource Background_Dark}}"/>
+        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding 
+            Light={StaticResource LightGray},
+            Dark={StaticResource Background_Dark}}"/>
+        <Setter Property="BarTextColor" Value="{AppThemeBinding 
+                                                Light={StaticResource DarkGray}, 
+                                                Dark={StaticResource White}}"/>
     </Style>
 
     <Style TargetType="Label">
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize"
                 Value="17"/>
         <Setter Property="TextColor"
-                Value="{StaticResource White}"/>
+                Value="{AppThemeBinding Light={StaticResource DarkGray}, Dark={StaticResource White}}"/>
     </Style>
     <Style TargetType="Label"
             Class="LargeTitle">
@@ -119,15 +142,13 @@
             Class="Subhead">
         <Setter Property="FontSize"
                 Value="14"/>
-        <Setter Property="TextColor"
-                Value="{StaticResource White}"/>
     </Style>
     <Style TargetType="Label"
             Class="SubContent">
         <Setter Property="FontSize"
                 Value="14"/>
         <Setter Property="TextColor"
-                Value="{StaticResource TabOff}"/>
+                Value="{AppThemeBinding Light={StaticResource MidGray}, Dark={StaticResource TabOff}}"/>
     </Style>
     <Style TargetType="Label"
             Class="Footnote">

diff --git a/src/WeatherTwentyOne/ViewModels/SettingsViewModel.cs b/src/WeatherTwentyOne/ViewModels/SettingsViewModel.cs
@@ -45,6 +45,8 @@ public SettingsViewModel()
     {
         SelectUnits = new Command<string>(OnSelectUnits);
         ChangeThemeMode = new Command<bool>(OnChangeThemeMode);
+
+
     }
 
     private void OnChangeThemeMode(bool dark)

diff --git a/src/WeatherTwentyOne/Views/CurrentWidget.xaml b/src/WeatherTwentyOne/Views/CurrentWidget.xaml
@@ -30,6 +30,7 @@
         </Border.StrokeShape>
         <Label
                     Text="Clear"
+                    TextColor="{StaticResource White}"
                     HorizontalOptions="Center"
                     FontSize="18"/>
     </Border>

diff --git a/src/WeatherTwentyOne/Views/WidgetsPanel.xaml b/src/WeatherTwentyOne/Views/WidgetsPanel.xaml
@@ -12,7 +12,7 @@
                 CornerRadius="20"
                 HasShadow="False"
                 x:DataType="m:Metric"
-                BackgroundColor="{StaticResource Background_Mid}">
+                BackgroundColor="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource Background_Mid}}">
                 <Grid
                     Margin="20"
                     ColumnDefinitions="*"
@@ -48,7 +48,7 @@
                 HeightRequest="154"
                 WidthRequest="154"
                 Stroke="Transparent"
-                BackgroundColor="{StaticResource Background_Mid}">
+                BackgroundColor="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource Background_Mid}}">
                 <Border.StrokeShape>
                     <RoundRectangle CornerRadius="40"/>
                 </Border.StrokeShape>