Dynamic theme switching and visual tweaks (#1556)

* Dynamic theme switching and visual tweaks

* update action runner to use macos-11 for iOS 15 support

* additional tweaks

* refinements

* refinements

* formatting and tweaks

src/App/Styles/Android.xaml

@@ -6,46 +6,151 @@
     <Style TargetType="Entry"
            ApplyToDerivedTypes="True">
         <Setter Property="PlaceholderColor"
-                Value="{StaticResource InputPlaceholderColor}" />
+                Value="{DynamicResource InputPlaceholderColor}" />
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
         <Setter Property="Margin"
                 Value="-4, 0, -4, -4" />
     </Style>
     <Style TargetType="Picker"
            ApplyToDerivedTypes="True">
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
         <Setter Property="Margin"
                 Value="-4, 0, -4, -4" />
     </Style>
+    <Style TargetType="DatePicker"
+           ApplyToDerivedTypes="True">
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource BackgroundColor}" />
+    </Style>
+    <Style TargetType="TimePicker"
+           ApplyToDerivedTypes="True">
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource BackgroundColor}" />
+    </Style>
     <Style TargetType="Editor"
            ApplyToDerivedTypes="True">
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
         <Setter Property="PlaceholderColor"
-                Value="{StaticResource InputPlaceholderColor}" />
+                Value="{DynamicResource InputPlaceholderColor}" />
         <Setter Property="Margin"
                 Value="-4, 0, -4, -4" />
     </Style>
+    <Style TargetType="Switch"
+           ApplyToDerivedTypes="True">
+        <Setter Property="OnColor"
+                Value="{DynamicResource SwitchOnColor}" />
+    </Style>
     <Style TargetType="SearchBar"
            ApplyToDerivedTypes="True">
         <Setter Property="BackgroundColor"
                 Value="Transparent" />
         <Setter Property="TextColor"
-                Value="{StaticResource TitleEntryTextColor}" />
+                Value="{DynamicResource TitleEntryTextColor}" />
         <Setter Property="CancelButtonColor"
-                Value="{StaticResource TitleEntryTextColor}" />
+                Value="{DynamicResource TitleEntryTextColor}" />
         <Setter Property="PlaceholderColor"
-                Value="{StaticResource TitleEntryPlaceholderColor}" />
+                Value="{DynamicResource TitleEntryPlaceholderColor}" />
+    </Style>
+    <Style TargetType="ContentPage"
+           ApplyToDerivedTypes="True">
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource BackgroundColor}" />
     </Style>
     <Style TargetType="controls:ExtendedSlider">
         <Setter Property="MinimumTrackColor"
-                Value="{StaticResource SliderTrackMinColor}" />
+                Value="{DynamicResource SliderTrackMinColor}" />
         <Setter Property="MaximumTrackColor"
-                Value="{StaticResource SliderTrackMinColor}" />
+                Value="{DynamicResource SliderTrackMinColor}" />
         <Setter Property="ThumbColor"
-                Value="{StaticResource SliderThumbColor}" />
+                Value="{DynamicResource SliderThumbColor}" />
         <Setter Property="ThumbBorderColor"
-                Value="{StaticResource SliderThumbBorderColor}" />
+                Value="{DynamicResource SliderThumbBorderColor}" />
+    </Style>
+    <Style TargetType="controls:ExtendedStepper">
+        <Setter Property="StepperBackgroundColor"
+                Value="{DynamicResource StepperBackgroundColor}" />
+        <Setter Property="StepperForegroundColor"
+                Value="{DynamicResource StepperForegroundColor}" />
     </Style>
     
     <!-- Buttons -->
     
+    <Style TargetType="Button">
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource ButtonBackgroundColor}" />
+        <Setter Property="BorderColor"
+                Value="{DynamicResource ButtonBorderColor}" />
+        <Setter Property="BorderWidth"
+                Value="1" />
+        <Setter Property="TextColor"
+                Value="{DynamicResource ButtonTextColor}" />
+        <Setter Property="FontSize"
+                Value="18" />
+        <Setter Property="CornerRadius"
+                Value="5" />
+        <Setter Property="Margin"
+                Value="0, 5, 0, 0" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal" />
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor"
+                                    Value="{DynamicResource ButtonBackgroundColorDisabled}" />
+                            <Setter Property="BorderWidth"
+                                    Value="0" />
+                            <Setter Property="TextColor"
+                                    Value="{DynamicResource ButtonTextColorDisabled}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+    <Style TargetType="Button"
+           Class="btn-primary">
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource PrimaryColor}" />
+        <Setter Property="BorderColor"
+                Value="{DynamicResource PrimaryColor}" />
+        <Setter Property="BorderWidth" 
+                Value="1" />
+        <Setter Property="TextColor"
+                Value="{DynamicResource ButtonPrimaryTextColor}" />
+        <Setter Property="FontSize"
+                Value="18" />
+        <Setter Property="FontAttributes"
+                Value="Bold" />
+        <Setter Property="CornerRadius"
+                Value="5" />
+        <Setter Property="Margin"
+                Value="0, 5, 0, 0" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal" />
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="TextColor"
+                                    Value="{DynamicResource ButtonPrimaryTextColorDisabled}" />
+                            <Setter Property="BackgroundColor"
+                                    Value="{DynamicResource ButtonPrimaryBackgroundColorDisabled}" />
+                            <Setter Property="BorderColor"
+                                    Value="{DynamicResource ButtonPrimaryBackgroundColorDisabled}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
     <Style TargetType="Button"
            ApplyToDerivedTypes="True"
            Class="btn-icon-platform">
@@ -84,7 +189,7 @@
     <Style TargetType="Label"
            Class="list-header-platform">
         <Setter Property="TextColor"
-                Value="{StaticResource ListHeaderTextColor}" />
+                Value="{DynamicResource ListHeaderTextColor}" />
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="FontAttributes"
@@ -93,7 +198,7 @@
     <Style TargetType="BoxView"
            Class="list-section-separator-top-platform">
         <Setter Property="Color"
-                Value="{StaticResource ListItemBorderColor}" />
+                Value="{DynamicResource ListItemBorderColor}" />
     </Style>
     <Style TargetType="BoxView"
            Class="list-section-separator-bottom-platform">
@@ -134,7 +239,7 @@
     <Style TargetType="Label"
            Class="box-header-platform">
         <Setter Property="TextColor"
-                Value="{StaticResource BoxHeaderTextColor}" />
+                Value="{DynamicResource BoxHeaderTextColor}" />
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="FontAttributes"

src/App/Styles/Base.xaml

@@ -10,38 +10,38 @@
         <Setter Property="FontSize"
                 Value="Medium" />
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
     </Style>
     <Style TargetType="Label"
            x:Key="text-default">
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
     </Style>
     <Style TargetType="Label"
            Class="text-default">
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
     </Style>
     <Style TargetType="Label"
            Class="text-muted"
            ApplyToDerivedTypes="True">
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            x:Key="text-danger">
         <Setter Property="TextColor"
-                Value="{StaticResource DangerColor}" />
+                Value="{DynamicResource DangerColor}" />
     </Style>
     <Style TargetType="Label"
            Class="text-danger">
         <Setter Property="TextColor"
-                Value="{StaticResource DangerColor}" />
+                Value="{DynamicResource DangerColor}" />
     </Style>
     <Style TargetType="Label"
            Class="text-success">
         <Setter Property="TextColor"
-                Value="{StaticResource SuccessColor}" />
+                Value="{DynamicResource SuccessColor}" />
     </Style>
     <Style TargetType="Label"
            Class="text-sm">
@@ -64,18 +64,18 @@
     <Style TargetType="TabbedPage"
            ApplyToDerivedTypes="True">
         <Setter Property="BarBackgroundColor"
-                Value="{StaticResource TabBarBackgroundColor}" />
+                Value="{DynamicResource TabBarBackgroundColor}" />
         <Setter Property="SelectedTabColor"
-                Value="{StaticResource TabBarSelectedItemColor}" />
+                Value="{DynamicResource TabBarSelectedItemColor}" />
         <Setter Property="UnselectedTabColor"
-                Value="{StaticResource TabBarItemColor}" />
+                Value="{DynamicResource TabBarItemColor}" />
     </Style>
   <Style TargetType="NavigationPage"
          ApplyToDerivedTypes="True">
     <Setter Property="BarTextColor"
-            Value="{StaticResource NavigationBarTextColor}" />
+            Value="{DynamicResource NavigationBarTextColor}" />
     <Setter Property="BarBackgroundColor"
-            Value="{StaticResource NavigationBarBackgroundColor}" />
+            Value="{DynamicResource NavigationBarBackgroundColor}" />
   </Style>
 
     <!-- Buttons -->
@@ -89,13 +89,13 @@
            Class="btn-muted"
            ApplyToDerivedTypes="True">
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Button"
            Class="btn-disabled"
            ApplyToDerivedTypes="True">
         <Setter Property="TextColor"
-                Value="{StaticResource DisabledIconColor}" />
+                Value="{DynamicResource DisabledIconColor}" />
     </Style>
     <Style x:Key="btn-fab" TargetType="Button">
         <Setter Property="HeightRequest" 
@@ -110,6 +110,10 @@
                 Value="16" />
         <Setter Property="Margin" 
                 Value="16" />
+        <Setter Property="CornerRadius" 
+                Value="100" />
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource FabColor}" />
     </Style>
 
     <!-- Title -->
@@ -121,7 +125,7 @@
         <Setter Property="Padding"
                 Value="0" />
         <Setter Property="TextColor"
-                Value="{StaticResource TitleTextColor}" />
+                Value="{DynamicResource TitleTextColor}" />
     </Style>
 
     <!-- List -->
@@ -151,7 +155,7 @@
         <Setter Property="VerticalTextAlignment"
                 Value="Center" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
         <Setter Property="HorizontalOptions"
                 Value="End" />
         <Setter Property="VerticalOptions"
@@ -200,7 +204,7 @@
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            ApplyToDerivedTypes="True"
@@ -208,14 +212,14 @@
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            Class="list-subtitle">
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            Class="list-icon"
@@ -229,7 +233,7 @@
         <Setter Property="VerticalTextAlignment"
                 Value="Center" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Button"
            ApplyToDerivedTypes="True"
@@ -239,7 +243,42 @@
         <Setter Property="Padding"
                 Value="0" />
         <Setter Property="TextColor"
-                Value="{StaticResource ButtonColor}" />
+                Value="{DynamicResource ButtonColor}" />
+    </Style>
+    <Style TargetType="Button"
+           ApplyToDerivedTypes="True"
+           Class="segmented-button">
+        <Setter Property="BackgroundColor"
+                Value="Transparent" />
+        <Setter Property="BorderColor"
+                Value="{DynamicResource PrimaryColor}" />
+        <Setter Property="BorderWidth"
+                Value="1" />
+        <Setter Property="CornerRadius"
+                Value="0" />
+        <Setter Property="TextColor"
+                Value="{DynamicResource PrimaryColor}" />
+        <Setter Property="FontAttributes"
+                Value="None" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal" />
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor"
+                                    Value="{DynamicResource PrimaryColor}" />
+                            <Setter Property="BorderWidth"
+                                    Value="0" />
+                            <Setter Property="TextColor"
+                                    Value="{DynamicResource TitleTextColor}" />
+                            <Setter Property="FontAttributes"
+                                    Value="Bold" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
     </Style>
 
     <!-- Box -->
@@ -316,21 +355,46 @@
            Class="box-row-button">
         <Setter Property="BackgroundColor"
                 Value="Transparent" />
+        <Setter Property="BorderWidth"
+                Value="0" />
         <Setter Property="Padding"
                 Value="0" />
         <Setter Property="TextColor"
-                Value="{StaticResource ButtonColor}" />
+                Value="{DynamicResource ButtonColor}" />
         <Setter Property="HorizontalOptions"
                 Value="End" />
         <Setter Property="VerticalOptions"
                 Value="CenterAndExpand" />
     </Style>
+    <Style TargetType="Button"
+           ApplyToDerivedTypes="True"
+           Class="box-overlay">
+        <Setter Property="BackgroundColor"
+                Value="Transparent" />
+        <Setter Property="BorderWidth"
+                Value="0" />
+        <Setter Property="Padding"
+                Value="0" />
+        <Setter Property="TextColor"
+                Value="Transparent" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal" />
+                    <VisualState x:Name="Disabled" />
+                    <VisualState x:Name="Focused" />
+                    <VisualState x:Name="Selected" />
+                    <VisualState x:Name="Pressed" />
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
     <Style TargetType="BoxView"
            Class="box-row-separator">
         <Setter Property="HeightRequest"
                 Value="1" />
         <Setter Property="Color"
-                Value="{StaticResource BoxBorderColor}" />
+                Value="{DynamicResource BoxBorderColor}" />
     </Style>
     <Style TargetType="Label"
            Class="box-label">
@@ -339,14 +403,14 @@
         <Setter Property="FontAttributes"
                 Value="Bold" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            Class="box-label-regular">
         <Setter Property="FontSize"
                 Value="Medium" />
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
         <Setter Property="VerticalOptions"
                 Value="Center" />
     </Style>
@@ -363,14 +427,14 @@
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            Class="box-footer-label">
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
            Class="box-footer-label-switch">
@@ -382,6 +446,6 @@
         <Setter Property="FontSize"
                 Value="Medium" />
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
     </Style>
 </ResourceDictionary>

src/App/Styles/Black.xaml

@@ -18,6 +18,8 @@
     <Color x:Key="SplashBackgroundColor">#000000</Color>
     <Color x:Key="BorderColor">#282828</Color>
     <Color x:Key="DisabledIconColor">#c7c7cd</Color>
+    <Color x:Key="SeparatorColor">#282828</Color>
+    <Color x:Key="TouchColor">#52bdfb</Color>
 
     <Color x:Key="BoxBorderColor">#282828</Color>
     <Color x:Key="BoxHeaderTextColor">#52bdfb</Color>
@@ -38,9 +40,23 @@
     <Color x:Key="SliderTrackMaxColor">#282828</Color>
 
     <Color x:Key="SwitchOnColor">#52bdfb</Color>
+    <Color x:Key="SwitchThumbColor">#B9B9B9</Color>
+
+    <Color x:Key="StepperBackgroundColor">#5A595B</Color>
+    <Color x:Key="StepperForegroundColor">#ffffff</Color>
+
+    <Color x:Key="ButtonPrimaryBackgroundColor">#52bdfb</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorPressed">#058AD8</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorDisabled">#777777</Color>
+    <Color x:Key="ButtonPrimaryTextColor">#ffffff</Color>
+    <Color x:Key="ButtonPrimaryTextColorDisabled">#cccccc</Color>
 
-    <Color x:Key="ButtonTextColor">#ffffff</Color>
     <Color x:Key="ButtonBackgroundColor">#5A595B</Color>
+    <Color x:Key="ButtonBackgroundColorPressed">#414042</Color>
+    <Color x:Key="ButtonBackgroundColorDisabled">#5A595B</Color>
+    <Color x:Key="ButtonBorderColor">#898989</Color>
+    <Color x:Key="ButtonTextColor">#ffffff</Color>
+    <Color x:Key="ButtonTextColorDisabled">#aaaaaa</Color>
 
     <Color x:Key="FabColor">#52bdfb</Color>
     <Color x:Key="FabPressedColor">#3ea1da</Color>

src/App/Styles/Dark.xaml

@@ -18,6 +18,8 @@
     <Color x:Key="SplashBackgroundColor">#222222</Color>
     <Color x:Key="BorderColor">#191919</Color>
     <Color x:Key="DisabledIconColor">#c7c7cd</Color>
+    <Color x:Key="SeparatorColor">#191919</Color>
+    <Color x:Key="TouchColor">#52bdfb</Color>
 
     <Color x:Key="BoxBorderColor">#191919</Color>
     <Color x:Key="BoxHeaderTextColor">#52bdfb</Color>
@@ -38,9 +40,23 @@
     <Color x:Key="SliderTrackMaxColor">#191919</Color>
 
     <Color x:Key="SwitchOnColor">#52bdfb</Color>
+    <Color x:Key="SwitchThumbColor">#B9B9B9</Color>
+
+    <Color x:Key="StepperBackgroundColor">#5A595B</Color>
+    <Color x:Key="StepperForegroundColor">#ffffff</Color>
+
+    <Color x:Key="ButtonPrimaryBackgroundColor">#52bdfb</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorPressed">#058AD8</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorDisabled">#777777</Color>
+    <Color x:Key="ButtonPrimaryTextColor">#ffffff</Color>
+    <Color x:Key="ButtonPrimaryTextColorDisabled">#cccccc</Color>
 
-    <Color x:Key="ButtonTextColor">#ffffff</Color>
     <Color x:Key="ButtonBackgroundColor">#5A595B</Color>
+    <Color x:Key="ButtonBackgroundColorPressed">#414042</Color>
+    <Color x:Key="ButtonBackgroundColorDisabled">#5A595B</Color>
+    <Color x:Key="ButtonBorderColor">#898989</Color>
+    <Color x:Key="ButtonTextColor">#ffffff</Color>
+    <Color x:Key="ButtonTextColorDisabled">#aaaaaa</Color>
 
     <Color x:Key="FabColor">#52bdfb</Color>
     <Color x:Key="FabPressedColor">#3ea1da</Color>

src/App/Styles/Light.xaml

@@ -15,9 +15,11 @@
     <Color x:Key="InputPlaceholderColor">#d0d0d0</Color>
 
     <Color x:Key="BackgroundColor">#ffffff</Color>
-    <Color x:Key="SplashBackgroundColor">#efeff4</Color>
+    <Color x:Key="SplashBackgroundColor">#ffffff</Color>
     <Color x:Key="BorderColor">#dddddd</Color>
     <Color x:Key="DisabledIconColor">#c7c7cd</Color>
+    <Color x:Key="SeparatorColor">#dddddd</Color>
+    <Color x:Key="TouchColor">#bbbbbb</Color>
 
     <Color x:Key="BoxBorderColor">#dddddd</Color>
     <Color x:Key="BoxHeaderTextColor">#175DDC</Color>
@@ -38,9 +40,23 @@
     <Color x:Key="SliderTrackMaxColor">#dddddd</Color>
     
     <Color x:Key="SwitchOnColor">#175DDC</Color>
+    <Color x:Key="SwitchThumbColor">#ECECEC</Color>
 
+    <Color x:Key="StepperBackgroundColor">#eeeeee</Color>
+    <Color x:Key="StepperForegroundColor">#000000</Color>
+
+    <Color x:Key="ButtonPrimaryBackgroundColor">#175DDC</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorPressed">#1249AC</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorDisabled">#bbbbbb</Color>
+    <Color x:Key="ButtonPrimaryTextColor">#ffffff</Color>
+    <Color x:Key="ButtonPrimaryTextColorDisabled">#ffffff</Color>
+
+    <Color x:Key="ButtonBackgroundColor">#eeeeee</Color>
+    <Color x:Key="ButtonBackgroundColorPressed">#cccccc</Color>
+    <Color x:Key="ButtonBackgroundColorDisabled">#eeeeee</Color>
+    <Color x:Key="ButtonBorderColor">#aaaaaa</Color>
     <Color x:Key="ButtonTextColor">#000000</Color>
-    <Color x:Key="ButtonBackgroundColor">#dddddd</Color>
+    <Color x:Key="ButtonTextColorDisabled">#aaaaaa</Color>
 
     <Color x:Key="FabColor">#175DDC</Color>
     <Color x:Key="FabPressedColor">#3883af</Color>

src/App/Styles/Nord.xaml

@@ -18,6 +18,8 @@
     <Color x:Key="SplashBackgroundColor">#2e3440</Color>
     <Color x:Key="BorderColor">#2e3440</Color>
     <Color x:Key="DisabledIconColor">#d8dee9</Color>
+    <Color x:Key="SeparatorColor">#2e3440</Color>
+    <Color x:Key="TouchColor">#81a1c1</Color>
 
     <Color x:Key="BoxBorderColor">#2e3440</Color>
     <Color x:Key="BoxHeaderTextColor">#81a1c1</Color>
@@ -38,9 +40,23 @@
     <Color x:Key="SliderTrackMaxColor">#2e3440</Color>
 
     <Color x:Key="SwitchOnColor">#81a1c1</Color>
+    <Color x:Key="SwitchThumbColor">#e5e9f0</Color>
+
+    <Color x:Key="StepperBackgroundColor">#4c566a</Color>
+    <Color x:Key="StepperForegroundColor">#e5e9f0</Color>
+
+    <Color x:Key="ButtonPrimaryBackgroundColor">#81a1c1</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorPressed">#4E769E</Color>
+    <Color x:Key="ButtonPrimaryBackgroundColorDisabled">#5C6C7B</Color>
+    <Color x:Key="ButtonPrimaryTextColor">#e5e9f0</Color>
+    <Color x:Key="ButtonPrimaryTextColorDisabled">#ACB5C5</Color>
 
-    <Color x:Key="ButtonTextColor">#e5e9f0</Color>
     <Color x:Key="ButtonBackgroundColor">#4c566a</Color>
+    <Color x:Key="ButtonBackgroundColorPressed">#3A4251</Color>
+    <Color x:Key="ButtonBackgroundColorDisabled">#454951</Color>
+    <Color x:Key="ButtonBorderColor">#5E6A82</Color>
+    <Color x:Key="ButtonTextColor">#e5e9f0</Color>
+    <Color x:Key="ButtonTextColorDisabled">#aaaaaa</Color>
 
     <Color x:Key="FabColor">#81a1c1</Color>
     <Color x:Key="FabPressedColor">#81a1c1</Color>

src/App/Styles/iOS.xaml

@@ -6,84 +6,171 @@
     <Style TargetType="Entry"
            ApplyToDerivedTypes="True">
         <Setter Property="PlaceholderColor"
-                Value="{StaticResource InputPlaceholderColor}" />
+                Value="{DynamicResource InputPlaceholderColor}" />
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
         <Setter Property="Margin"
                 Value="0, 5, 0, 12" />
     </Style>
     <Style TargetType="Picker"
            ApplyToDerivedTypes="True">
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
         <Setter Property="Margin"
                 Value="0, 5, 0, 12" />
     </Style>
+    <Style TargetType="DatePicker"
+           ApplyToDerivedTypes="True">
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource BackgroundColor}" />
+    </Style>
+    <Style TargetType="TimePicker"
+           ApplyToDerivedTypes="True">
+        <Setter Property="TextColor"
+                Value="{DynamicResource TextColor}" />
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource BackgroundColor}" />
+    </Style>
     <Style TargetType="Editor"
            ApplyToDerivedTypes="True">
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
         <Setter Property="BackgroundColor"
-                Value="{StaticResource BackgroundColor}" />
+                Value="{DynamicResource BackgroundColor}" />
         <Setter Property="PlaceholderColor"
-                Value="{StaticResource InputPlaceholderColor}" />
+                Value="{DynamicResource InputPlaceholderColor}" />
         <Setter Property="Margin"
                 Value="0, 0, 0, 12" />
     </Style>
     <Style TargetType="Switch"
            ApplyToDerivedTypes="True">
         <Setter Property="OnColor"
-                Value="{StaticResource SwitchOnColor}" />
+                Value="{DynamicResource SwitchOnColor}" />
     </Style>
     <Style TargetType="SearchBar"
            ApplyToDerivedTypes="True">
         <Setter Property="BackgroundColor"
-                Value="{StaticResource ListHeaderBackgroundColor}" />
+                Value="{DynamicResource ListHeaderBackgroundColor}" />
         <Setter Property="TextColor"
-                Value="{StaticResource TextColor}" />
+                Value="{DynamicResource TextColor}" />
         <Setter Property="CancelButtonColor"
-                Value="{StaticResource PrimaryColor}" />
+                Value="{DynamicResource PrimaryColor}" />
         <Setter Property="PlaceholderColor"
                 Value="#777777" />
     </Style>
     <Style TargetType="ContentPage"
            ApplyToDerivedTypes="True">
         <Setter Property="BackgroundColor"
-                Value="{StaticResource BackgroundColor}" />
+                Value="{DynamicResource BackgroundColor}" />
     </Style>
     <Style TargetType="CollectionView"
            ApplyToDerivedTypes="True">
         <Setter Property="BackgroundColor"
-                Value="{StaticResource BackgroundColor}" />
+                Value="{DynamicResource BackgroundColor}" />
     </Style>
     <Style TargetType="RefreshView"
            ApplyToDerivedTypes="True">
         <Setter Property="RefreshColor"
-                Value="{StaticResource PrimaryColor}" />
+                Value="{DynamicResource PrimaryColor}" />
     </Style>
     <Style TargetType="ActivityIndicator"
            ApplyToDerivedTypes="True">
         <Setter Property="Color"
-                Value="{StaticResource PrimaryColor}" />
+                Value="{DynamicResource PrimaryColor}" />
     </Style>
     <Style TargetType="controls:ExtendedSlider">
         <Setter Property="MinimumTrackColor"
-                Value="{StaticResource SliderTrackMinColor}" />
+                Value="{DynamicResource SliderTrackMinColor}" />
         <Setter Property="MaximumTrackColor"
-                Value="{StaticResource SliderTrackMaxColor}" />
+                Value="{DynamicResource SliderTrackMaxColor}" />
         <Setter Property="ThumbColor"
-                Value="{StaticResource SliderThumbColor}" />
+                Value="{DynamicResource SliderThumbColor}" />
+    </Style>
+    <Style TargetType="controls:ExtendedStepper">
+        <Setter Property="StepperForegroundColor"
+                Value="{DynamicResource StepperForegroundColor}" />
     </Style>
 
     <!-- Buttons -->
 
     <Style TargetType="Button">
         <Setter Property="BackgroundColor"
-                Value="{StaticResource ButtonBackgroundColor}" />
+                Value="{DynamicResource ButtonBackgroundColor}" />
+        <Setter Property="BorderColor"
+                Value="{DynamicResource ButtonBorderColor}" />
+        <Setter Property="BorderWidth"
+                Value="1" />
         <Setter Property="TextColor"
-                Value="{StaticResource ButtonTextColor}" />
+                Value="{DynamicResource ButtonTextColor}" />
+        <Setter Property="FontSize"
+                Value="18" />
         <Setter Property="Margin"
                 Value="0, 5, 0, 0" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal" />
+                    <VisualState x:Name="Pressed">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" 
+                                    Value="{DynamicResource ButtonBackgroundColorPressed}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor"
+                                    Value="{DynamicResource ButtonBackgroundColorDisabled}" />
+                            <Setter Property="BorderWidth"
+                                    Value="0" />
+                            <Setter Property="TextColor"
+                                    Value="{DynamicResource ButtonTextColorDisabled}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+    <Style TargetType="Button"
+           Class="btn-primary">
+        <Setter Property="BackgroundColor"
+                Value="{DynamicResource PrimaryColor}" />
+        <Setter Property="BorderColor"
+                Value="{DynamicResource PrimaryColor}" />
+        <Setter Property="BorderWidth" 
+                Value="1" />
+        <Setter Property="TextColor"
+                Value="{DynamicResource ButtonPrimaryTextColor}" />
+        <Setter Property="FontSize"
+                Value="18" />
+        <Setter Property="FontAttributes"
+                Value="Bold" />
+        <Setter Property="Margin"
+                Value="0, 5, 0, 0" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal" />
+                    <VisualState x:Name="Pressed">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" 
+                                    Value="{DynamicResource ButtonPrimaryBackgroundColorPressed}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="TextColor"
+                                    Value="{DynamicResource ButtonPrimaryTextColorDisabled}" />
+                            <Setter Property="BackgroundColor"
+                                    Value="{DynamicResource ButtonPrimaryBackgroundColorDisabled}" />
+                            <Setter Property="BorderColor"
+                                    Value="{DynamicResource ButtonPrimaryBackgroundColorDisabled}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
     </Style>
     <Style TargetType="Button"
            ApplyToDerivedTypes="True"
@@ -100,12 +187,12 @@
            Class="list-item-separator-bottom-platform"
            ApplyToDerivedTypes="True">
         <Setter Property="BackgroundColor"
-                Value="{StaticResource ListItemBorderColor}" />
+                Value="{DynamicResource ListItemBorderColor}" />
     </Style>
     <Style TargetType="StackLayout"
            Class="list-row-header-container-platform">
         <Setter Property="BackgroundColor"
-                Value="{StaticResource ListHeaderBackgroundColor}" />
+                Value="{DynamicResource ListHeaderBackgroundColor}" />
     </Style>
     <Style TargetType="StackLayout"
            Class="list-row-header-platform">
@@ -117,19 +204,19 @@
     <Style TargetType="Label"
            Class="list-header-platform">
         <Setter Property="TextColor"
-                Value="{StaticResource MutedColor}" />
+                Value="{DynamicResource MutedColor}" />
         <Setter Property="FontSize"
                 Value="Small" />
     </Style>
     <Style TargetType="BoxView"
            Class="list-section-separator-top-platform">
         <Setter Property="Color"
-                Value="{StaticResource ListSectionBorderColor}" />
+                Value="{DynamicResource ListSectionBorderColor}" />
     </Style>
     <Style TargetType="BoxView"
            Class="list-section-separator-bottom-platform">
         <Setter Property="Color"
-                Value="{StaticResource ListSectionBorderBottomColor}" />
+                Value="{DynamicResource ListSectionBorderBottomColor}" />
     </Style>
     <Style TargetType="StackLayout"
            Class="list-row-platform">
@@ -163,7 +250,7 @@
     <Style TargetType="Label"
            Class="box-header-platform">
         <Setter Property="TextColor"
-                Value="{StaticResource BoxHeaderTextColor}" />
+                Value="{DynamicResource BoxHeaderTextColor}" />
         <Setter Property="FontSize"
                 Value="Small" />
         <Setter Property="FontAttributes"