From ae4aec97614f24a6c1dbddc5b8e491680ee871f9 Mon Sep 17 00:00:00 2001
From: Matthew Leibowitz <mattleibow@live.com>
Date: Thu, 5 Dec 2024 01:55:28 +0800
Subject: [PATCH] Fixed sample

---
 samples/SkiaSharpDemo/App.xaml                |  2 -
 samples/SkiaSharpDemo/App.xaml.cs             | 10 +-
 .../Demos/BlurHash/BlurHashPage.xaml          |  5 +-
 .../Demos/Confetti/ConfettiPage.xaml          |  6 +-
 .../Demos/Extended/InterpolationPage.xaml     |  4 +-
 .../Demos/Extended/ShapesPage.xaml.cs         |  1 +
 .../Resources/Styles/Colors.xaml              | 23 +++--
 .../Resources/Styles/Styles.xaml              | 97 ++++++++++++++++---
 .../Views/BottomTab/BottomTabBar.cs           |  4 +-
 .../BottomTab/BottomTabBarResources.xaml      | 15 +--
 .../OptionButtons/OptionButtonsResources.xaml |  3 +-
 11 files changed, 124 insertions(+), 46 deletions(-)

diff --git a/samples/SkiaSharpDemo/App.xaml b/samples/SkiaSharpDemo/App.xaml
index 2670e5fc..9963e842 100644
--- a/samples/SkiaSharpDemo/App.xaml
+++ b/samples/SkiaSharpDemo/App.xaml
@@ -11,8 +11,6 @@
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                 <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
-                <views:BottomTabBarResources />
-                <views:OptionButtonsResources />
             </ResourceDictionary.MergedDictionaries>
 
             <converters:RoundToIntConverter x:Key="RoundToInt" />
diff --git a/samples/SkiaSharpDemo/App.xaml.cs b/samples/SkiaSharpDemo/App.xaml.cs
index c33e252a..2da42454 100644
--- a/samples/SkiaSharpDemo/App.xaml.cs
+++ b/samples/SkiaSharpDemo/App.xaml.cs
@@ -1,4 +1,6 @@
-namespace SkiaSharpDemo;
+using SkiaSharpDemo.Views;
+
+namespace SkiaSharpDemo;
 
 public partial class App : Application
 {
@@ -6,6 +8,10 @@ public App()
 	{
 		InitializeComponent();
 
-		MainPage = new AppShell();
+		Resources.MergedDictionaries.Add(new OptionButtonsResources());
+		Resources.MergedDictionaries.Add(new BottomTabBarResources());
 	}
+
+	protected override Window CreateWindow(IActivationState? activationState) =>
+		new Window(new AppShell());
 }
diff --git a/samples/SkiaSharpDemo/Demos/BlurHash/BlurHashPage.xaml b/samples/SkiaSharpDemo/Demos/BlurHash/BlurHashPage.xaml
index f97ba9bb..91463026 100644
--- a/samples/SkiaSharpDemo/Demos/BlurHash/BlurHashPage.xaml
+++ b/samples/SkiaSharpDemo/Demos/BlurHash/BlurHashPage.xaml
@@ -25,8 +25,9 @@
         </Grid>
 
         <CarouselView Grid.Row="1"
-                      HeightRequest="1" MinimumHeightRequest="100"
-                      ItemsSource="{Binding Sources}" CurrentItem="{Binding Source}"
+                      MinimumHeightRequest="100"
+                      ItemsSource="{Binding Sources}"
+                      CurrentItem="{Binding Source}"
                       PeekAreaInsets="24,0"
                       Margin="-12,0">
             <CarouselView.ItemTemplate>
diff --git a/samples/SkiaSharpDemo/Demos/Confetti/ConfettiPage.xaml b/samples/SkiaSharpDemo/Demos/Confetti/ConfettiPage.xaml
index 8257888a..6db9c739 100644
--- a/samples/SkiaSharpDemo/Demos/Confetti/ConfettiPage.xaml
+++ b/samples/SkiaSharpDemo/Demos/Confetti/ConfettiPage.xaml
@@ -22,7 +22,7 @@
                  HorizontalOptions="End" VerticalOptions="Start"
                  IsVisible="{Binding IsComplete, Source={Reference confettiView}}" />
 
-        <views:BottomTabBar SelectedIndex="{Binding SelectedTab}" PagePadding="12,6">
+        <views:BottomTabBar SelectedIndex="{Binding SelectedTab}" PagePadding="12" Background="{StaticResource BackgroundBrush}">
             <views:BottomTabCollection>
 
                 <!-- "add type" -->
@@ -101,7 +101,7 @@
                 </views:BottomTab>
 
                 <views:BottomTab Title="&#xf3fd;" HorizontalOptions="Fill" VerticalOptions="Center">
-                    <Grid ColumnDefinitions="Auto,*,30"
+                    <Grid ColumnDefinitions="Auto,*,Auto"
                           RowDefinitions="Auto,Auto"
                           ColumnSpacing="12" RowSpacing="12" Padding="12">
                         <Label Text="Min"
@@ -127,7 +127,7 @@
                 </views:BottomTab>
 
                 <views:BottomTab Title="&#xf017;" HorizontalOptions="Fill" VerticalOptions="Center">
-                    <Grid ColumnDefinitions="Auto,*,30"
+                    <Grid ColumnDefinitions="Auto,*,Auto"
                           RowDefinitions="Auto,Auto"
                           ColumnSpacing="12" RowSpacing="12" Padding="12">
                         <Label Text="Lifetime"
diff --git a/samples/SkiaSharpDemo/Demos/Extended/InterpolationPage.xaml b/samples/SkiaSharpDemo/Demos/Extended/InterpolationPage.xaml
index 3d8b41eb..0c8adb41 100644
--- a/samples/SkiaSharpDemo/Demos/Extended/InterpolationPage.xaml
+++ b/samples/SkiaSharpDemo/Demos/Extended/InterpolationPage.xaml
@@ -7,9 +7,7 @@
     <StackLayout Spacing="12">
 
         <Label Text="{Binding Interpolation, StringFormat='{}{0:0}%'}" HorizontalOptions="Center" />
-        <Slider Minimum="0" Maximum="100" Value="{Binding Interpolation}"
-                MinimumTrackColor="Black" MaximumTrackColor="Black"
-                ThumbColor="Black" />
+        <Slider Minimum="0" Maximum="100" Value="{Binding Interpolation}" />
 
         <Button Text="Toggle Animation" Command="{Binding AnimateCommand}" />
 
diff --git a/samples/SkiaSharpDemo/Demos/Extended/ShapesPage.xaml.cs b/samples/SkiaSharpDemo/Demos/Extended/ShapesPage.xaml.cs
index 7a605fd2..1b4e917e 100644
--- a/samples/SkiaSharpDemo/Demos/Extended/ShapesPage.xaml.cs
+++ b/samples/SkiaSharpDemo/Demos/Extended/ShapesPage.xaml.cs
@@ -65,6 +65,7 @@ private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
 		{
 			IsAntialias = true,
 			TextSize = 12,
+			Color = ((SolidColorBrush)App.Current!.Resources["ForegroundBrush"]).Color.ToSKColor(),
 		};
 
 		// create the paint for the shapes
diff --git a/samples/SkiaSharpDemo/Resources/Styles/Colors.xaml b/samples/SkiaSharpDemo/Resources/Styles/Colors.xaml
index 245758ba..4e685620 100644
--- a/samples/SkiaSharpDemo/Resources/Styles/Colors.xaml
+++ b/samples/SkiaSharpDemo/Resources/Styles/Colors.xaml
@@ -4,11 +4,21 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
+    <!-- Note: For Android please see also Platforms\Android\Resources\values\colors.xml -->
+
     <Color x:Key="Primary">#512BD4</Color>
+    <Color x:Key="PrimaryDark">#ac99ea</Color>
+    <Color x:Key="PrimaryDarkText">#242424</Color>
     <Color x:Key="Secondary">#DFD8F7</Color>
+    <Color x:Key="SecondaryDarkText">#9880e5</Color>
     <Color x:Key="Tertiary">#2B0B98</Color>
+
     <Color x:Key="White">White</Color>
     <Color x:Key="Black">Black</Color>
+    <Color x:Key="Magenta">#D600AA</Color>
+    <Color x:Key="MidnightBlue">#190649</Color>
+    <Color x:Key="OffBlack">#1f1f1f</Color>
+
     <Color x:Key="Gray100">#E1E1E1</Color>
     <Color x:Key="Gray200">#C8C8C8</Color>
     <Color x:Key="Gray300">#ACACAC</Color>
@@ -17,11 +27,13 @@
     <Color x:Key="Gray600">#404040</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
+
     <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
     <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
     <SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>
     <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}"/>
     <SolidColorBrush x:Key="BlackBrush" Color="{StaticResource Black}"/>
+
     <SolidColorBrush x:Key="Gray100Brush" Color="{StaticResource Gray100}"/>
     <SolidColorBrush x:Key="Gray200Brush" Color="{StaticResource Gray200}"/>
     <SolidColorBrush x:Key="Gray300Brush" Color="{StaticResource Gray300}"/>
@@ -31,14 +43,7 @@
     <SolidColorBrush x:Key="Gray900Brush" Color="{StaticResource Gray900}"/>
     <SolidColorBrush x:Key="Gray950Brush" Color="{StaticResource Gray950}"/>
 
-    <Color x:Key="Yellow100Accent">#F7B548</Color>
-    <Color x:Key="Yellow200Accent">#FFD590</Color>
-    <Color x:Key="Yellow300Accent">#FFE5B9</Color>
-    <Color x:Key="Cyan100Accent">#28C2D1</Color>
-    <Color x:Key="Cyan200Accent">#7BDDEF</Color>
-    <Color x:Key="Cyan300Accent">#C3F2F4</Color>
-    <Color x:Key="Blue100Accent">#3E8EED</Color>
-    <Color x:Key="Blue200Accent">#72ACF1</Color>
-    <Color x:Key="Blue300Accent">#A7CBF6</Color>
+    <SolidColorBrush x:Key="ForegroundBrush" Color="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+    <SolidColorBrush x:Key="BackgroundBrush" Color="{AppThemeBinding Light='#ccffffff', Dark='#cc1f1f1f'}" />
 
 </ResourceDictionary>
\ No newline at end of file
diff --git a/samples/SkiaSharpDemo/Resources/Styles/Styles.xaml b/samples/SkiaSharpDemo/Resources/Styles/Styles.xaml
index 3b0fdc41..86f574d8 100644
--- a/samples/SkiaSharpDemo/Resources/Styles/Styles.xaml
+++ b/samples/SkiaSharpDemo/Resources/Styles/Styles.xaml
@@ -20,16 +20,19 @@
     </Style>
 
     <Style TargetType="BoxView">
-        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
     </Style>
 
     <Style TargetType="Button">
-        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Primary}}" />
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
+        <Setter Property="BorderWidth" Value="0"/>
         <Setter Property="CornerRadius" Value="8"/>
         <Setter Property="Padding" Value="14,10"/>
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -40,6 +43,7 @@
                             <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
                         </VisualState.Setters>
                     </VisualState>
+                    <VisualState x:Name="PointerOver" />
                 </VisualStateGroup>
             </VisualStateGroupList>
         </Setter>
@@ -47,6 +51,8 @@
 
     <Style TargetType="CheckBox">
         <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -66,6 +72,8 @@
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -86,6 +94,8 @@
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14" />
         <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -106,6 +116,8 @@
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14" />
         <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -124,6 +136,7 @@
         <Setter Property="HasShadow" Value="False" />
         <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
         <Setter Property="CornerRadius" Value="8" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
     </Style>
 
     <Style TargetType="ImageButton">
@@ -131,6 +144,8 @@
         <Setter Property="BorderColor" Value="Transparent"/>
         <Setter Property="BorderWidth" Value="0"/>
         <Setter Property="CornerRadius" Value="0"/>
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -140,13 +155,15 @@
                             <Setter Property="Opacity" Value="0.5" />
                         </VisualState.Setters>
                     </VisualState>
+                    <VisualState x:Name="PointerOver" />
                 </VisualStateGroup>
             </VisualStateGroupList>
         </Setter>
     </Style>
 
     <Style TargetType="Label">
-        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="OpenSansRegular" />
         <Setter Property="FontSize" Value="14" />
         <Setter Property="VisualStateManager.VisualStateGroups">
@@ -163,6 +180,24 @@
         </Setter>
     </Style>
 
+    <Style TargetType="Span">
+        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+    </Style>
+
+    <Style TargetType="Label" x:Key="Headline">
+        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource MidnightBlue}, Dark={StaticResource White}}" />
+        <Setter Property="FontSize" Value="32" />
+        <Setter Property="HorizontalOptions" Value="Center" />
+        <Setter Property="HorizontalTextAlignment" Value="Center" />
+    </Style>
+
+    <Style TargetType="Label" x:Key="SubHeadline">
+        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource MidnightBlue}, Dark={StaticResource White}}" />
+        <Setter Property="FontSize" Value="24" />
+        <Setter Property="HorizontalOptions" Value="Center" />
+        <Setter Property="HorizontalTextAlignment" Value="Center" />
+    </Style>
+
     <Style TargetType="ListView">
         <Setter Property="SeparatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
         <Setter Property="RefreshControlColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
@@ -173,7 +208,9 @@
         <Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
-        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -206,10 +243,12 @@
     </Style>
 
     <Style TargetType="RadioButton">
-        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BackgroundColor" Value="Transparent"/>
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -235,6 +274,8 @@
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="OpenSansRegular" />
         <Setter Property="FontSize" Value="14" />
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -333,9 +374,11 @@
 
     <Style TargetType="TimePicker">
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
-        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BackgroundColor" Value="Transparent"/>
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
+        <Setter Property="MinimumHeightRequest" Value="44"/>
+        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -349,34 +392,58 @@
             </VisualStateGroupList>
         </Setter>
     </Style>
+  
+    <!--
+    <Style TargetType="TitleBar">
+        <Setter Property="MinimumHeightRequest" Value="32"/>
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="TitleActiveStates">
+                    <VisualState x:Name="TitleBarTitleActive">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="Transparent" />
+                            <Setter Property="ForegroundColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="TitleBarTitleInactive">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+                            <Setter Property="ForegroundColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray500}}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+    -->
 
     <Style TargetType="Page" ApplyToDerivedTypes="True">
         <Setter Property="Padding" Value="0"/>
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
     </Style>
 
     <Style TargetType="Shell" ApplyToDerivedTypes="True">
-        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
-        <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}"></Setter>
-        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
+        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
+        <Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource SecondaryDarkText}}" />
+        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource SecondaryDarkText}}" />
         <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
         <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
         <Setter Property="Shell.NavBarHasShadow" Value="False" />
         <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
-        <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
-        <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+        <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
+        <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
         <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
     </Style>
 
     <Style TargetType="NavigationPage">
-        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
+        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
         <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
         <Setter Property="IconColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
     </Style>
 
     <Style TargetType="TabbedPage">
         <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray950}}" />
-        <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+        <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
         <Setter Property="UnselectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
         <Setter Property="SelectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
     </Style>
diff --git a/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBar.cs b/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBar.cs
index 49e267a9..ac6bc3f3 100644
--- a/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBar.cs
+++ b/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBar.cs
@@ -7,7 +7,7 @@ public class BottomTabBar : TemplatedView
 		nameof(Tabs),
 		typeof(BottomTabCollection),
 		typeof(BottomTabBar),
-		new BottomTabCollection());
+		defaultValueCreator: _ => new BottomTabCollection());
 
 	public static readonly BindableProperty SelectedIndexProperty = BindableProperty.Create(
 		nameof(SelectedIndex),
@@ -39,7 +39,7 @@ public class BottomTabBar : TemplatedView
 		nameof(PagePadding),
 		typeof(Thickness),
 		typeof(BottomTabBar),
-		new Thickness());
+		Thickness.Zero);
 
 	private Layout? tabBar;
 	private Layout? pages;
diff --git a/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBarResources.xaml b/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBarResources.xaml
index f81de267..5839c5d0 100644
--- a/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBarResources.xaml
+++ b/samples/SkiaSharpDemo/Views/BottomTab/BottomTabBarResources.xaml
@@ -8,7 +8,10 @@
 
     <DataTemplate x:Key="BottomTabBarHeaderContentTemplate">
         <views:TapLabel Text="{Binding Title}"
-                        FontFamily="FontAwesome" FontSize="20" HorizontalTextAlignment="Center"
+                        FontFamily="FontAwesome"
+                        FontSize="20"
+                        HorizontalTextAlignment="Center"
+                        TextColor="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}"
                         Padding="8"
                         HorizontalOptions="FillAndExpand"
                         Command="{Binding TabTappedCommand, Source={RelativeSource TemplatedParent}}"
@@ -18,7 +21,7 @@
     <!-- the bottom tab bar control template -->
     <ControlTemplate x:Key="BottomTabBarControlTemplate">
         <StackLayout Padding="0" Spacing="0">
-            <BoxView Color="LightGray" HeightRequest="1" />
+            <BoxView Color="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" HeightRequest="1" />
 
             <StackLayout x:Name="PART_TabBar"
                          Padding="0" Spacing="0" Orientation="Horizontal"
@@ -31,13 +34,13 @@
 
             <Grid x:Name="PART_PagesContainer"
                   Padding="{Binding PagePadding, Source={RelativeSource TemplatedParent}}" RowSpacing="0" ColumnSpacing="0"
-                  HeightRequest="100"
                   BindableLayout.ItemsSource="{Binding Tabs, Source={RelativeSource TemplatedParent}}">
                 <BindableLayout.ItemTemplate>
                     <DataTemplate>
-                        <ContentPresenter Content="{Binding}"
-                                          HorizontalOptions="{Binding HorizontalContentAlignment, Source={RelativeSource TemplatedParent}}"
-                                          VerticalOptions="{Binding VerticalContentAlignment, Source={RelativeSource TemplatedParent}}" />
+                        <ContentView
+                            Content="{Binding}"
+                            HorizontalOptions="{Binding HorizontalContentAlignment, Source={RelativeSource TemplatedParent}}"
+                            VerticalOptions="{Binding VerticalContentAlignment, Source={RelativeSource TemplatedParent}}" />
                     </DataTemplate>
                 </BindableLayout.ItemTemplate>
             </Grid>
diff --git a/samples/SkiaSharpDemo/Views/OptionButtons/OptionButtonsResources.xaml b/samples/SkiaSharpDemo/Views/OptionButtons/OptionButtonsResources.xaml
index 6beb7b4d..94f605e6 100644
--- a/samples/SkiaSharpDemo/Views/OptionButtons/OptionButtonsResources.xaml
+++ b/samples/SkiaSharpDemo/Views/OptionButtons/OptionButtonsResources.xaml
@@ -8,7 +8,7 @@
 
     <Style x:Key="OptionButtonStyle" TargetType="Button">
         <Setter Property="CornerRadius" Value="3" />
-        <Setter Property="BorderColor" Value="Black" />
+        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -40,7 +40,6 @@
     </Style>
 
     <Style x:Key="TextOptionButtonStyle" TargetType="Button" BasedOn="{StaticResource OptionButtonStyle}">
-        <Setter Property="TextColor" Value="White" />
         <Setter Property="Padding" Value="24,12" />
     </Style>