From 4ca943e61bde503b8e16c3fce5081bf9a3363e2f Mon Sep 17 00:00:00 2001
From: a-bertrand <a.bertrand@zero-gachis.com>
Date: Tue, 3 Nov 2020 17:09:08 +0100
Subject: [PATCH 1/2] :sparkles::lipstick: add dark theme

---
 Smartway.UiComponent.Sample/App.xaml          | 13 +----
 .../Basics/BasicComponents.xaml               | 15 +++++
 .../Basics/BasicComponents.xaml.cs            | 14 +++++
 Smartway.UiComponent.Sample/MainPage.xaml     |  4 +-
 Smartway.UiComponent.Sample/MainPage.xaml.cs  | 11 +++-
 .../MainPageViewModel.cs                      |  6 ++
 .../Smartway.UiComponent.Sample.csproj        |  6 ++
 Smartway.UiComponent/Resources/Themes.xaml    | 58 +++++++++++++++++++
 Smartway.UiComponent/Resources/Themes.xaml.cs | 14 +++++
 .../Smartway.UiComponent.csproj               |  6 ++
 10 files changed, 132 insertions(+), 15 deletions(-)
 create mode 100644 Smartway.UiComponent.Sample/Basics/BasicComponents.xaml
 create mode 100644 Smartway.UiComponent.Sample/Basics/BasicComponents.xaml.cs
 create mode 100644 Smartway.UiComponent/Resources/Themes.xaml
 create mode 100644 Smartway.UiComponent/Resources/Themes.xaml.cs

diff --git a/Smartway.UiComponent.Sample/App.xaml b/Smartway.UiComponent.Sample/App.xaml
index 4c241ad..6f60ea2 100644
--- a/Smartway.UiComponent.Sample/App.xaml
+++ b/Smartway.UiComponent.Sample/App.xaml
@@ -4,24 +4,13 @@
              xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:resources="clr-namespace:Smartway.UiComponent.Resources;assembly=Smartway.UiComponent"
-             xmlns:sample="clr-namespace:Smartway.UiComponent.Sample;assembly=Smartway.UiComponent.Sample"
              mc:Ignorable="d"
              x:Class="Smartway.UiComponent.Sample.App">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <resources:Colors />
-                <sample:Theme/>
+                <resources:Themes />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
-        <Style TargetType="Label">
-            <Setter Property="FontFamily" Value="OpenSans"></Setter>
-            <Style.Triggers>
-                <Trigger TargetType="Label" Property="FontAttributes" Value="Bold">
-                    <Setter Property="FontFamily"
-                            Value="OpenSansBold" />
-                </Trigger>
-            </Style.Triggers>
-        </Style>
     </Application.Resources>
 </Application>
\ No newline at end of file
diff --git a/Smartway.UiComponent.Sample/Basics/BasicComponents.xaml b/Smartway.UiComponent.Sample/Basics/BasicComponents.xaml
new file mode 100644
index 0000000..31323d9
--- /dev/null
+++ b/Smartway.UiComponent.Sample/Basics/BasicComponents.xaml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:cards="clr-namespace:Smartway.UiComponent.Cards;assembly=Smartway.UiComponent"
+             x:Class="Smartway.UiComponent.Sample.Basics.BasicComponents">
+    <ContentPage.Content>
+        <StackLayout>
+            <Label Text="Default Label" />
+            <Label Text="Secondary Label" Style="{StaticResource SecondaryTextStyle}"/>
+            <cards:RoundedFrame Style="{StaticResource SecondaryFrame}">
+                <Label Text="Various Content"></Label>
+            </cards:RoundedFrame>
+        </StackLayout>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/Smartway.UiComponent.Sample/Basics/BasicComponents.xaml.cs b/Smartway.UiComponent.Sample/Basics/BasicComponents.xaml.cs
new file mode 100644
index 0000000..5483e2d
--- /dev/null
+++ b/Smartway.UiComponent.Sample/Basics/BasicComponents.xaml.cs
@@ -0,0 +1,14 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace Smartway.UiComponent.Sample.Basics
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class BasicComponents : ContentPage
+    {
+        public BasicComponents()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/Smartway.UiComponent.Sample/MainPage.xaml b/Smartway.UiComponent.Sample/MainPage.xaml
index 8c9c7da..287b3a4 100644
--- a/Smartway.UiComponent.Sample/MainPage.xaml
+++ b/Smartway.UiComponent.Sample/MainPage.xaml
@@ -7,8 +7,9 @@
              mc:Ignorable="d"
              x:Class="Smartway.UiComponent.Sample.MainPage"
              x:DataType="sample:MainPageViewModel">
-
     <StackLayout>
+        <Button x:Name="SwitchThemeBtn" Text="Switch ALL APP Theme" />
+        <Button Text="BasicComponents" Command="{Binding BasicComponents}"/>
         <Button Text="SectionForm" Command="{Binding SectionForm}"/>
         <Button Text="Indicators" Command="{Binding Indicators}"/>
         <Button Text="SectionSheet" Command="{Binding SectionSheet}"/>
@@ -18,5 +19,4 @@
         <Button Text="Button" Command="{Binding Button}"/>
         <Button Text="Inputs" Command="{Binding Inputs}"/>
     </StackLayout>
-
 </ContentPage>
diff --git a/Smartway.UiComponent.Sample/MainPage.xaml.cs b/Smartway.UiComponent.Sample/MainPage.xaml.cs
index a97b43d..627ddba 100644
--- a/Smartway.UiComponent.Sample/MainPage.xaml.cs
+++ b/Smartway.UiComponent.Sample/MainPage.xaml.cs
@@ -1,4 +1,6 @@
-using System.ComponentModel;
+using System;
+using System.ComponentModel;
+using Xamarin.Forms;
 
 namespace Smartway.UiComponent.Sample
 {
@@ -10,6 +12,13 @@ public partial class MainPage
         public MainPage()
         {
             InitializeComponent();
+            SwitchThemeBtn.Clicked += SwitchTheme;
+        }
+
+        private void SwitchTheme(object sender, EventArgs e)
+        {
+            var currentTheme = Application.Current.RequestedTheme;
+            Application.Current.UserAppTheme = currentTheme == OSAppTheme.Light ? OSAppTheme.Dark : OSAppTheme.Light;
         }
     }
 }
diff --git a/Smartway.UiComponent.Sample/MainPageViewModel.cs b/Smartway.UiComponent.Sample/MainPageViewModel.cs
index af94b92..43b556b 100644
--- a/Smartway.UiComponent.Sample/MainPageViewModel.cs
+++ b/Smartway.UiComponent.Sample/MainPageViewModel.cs
@@ -1,4 +1,5 @@
 using System.Windows.Input;
+using Smartway.UiComponent.Sample.Basics;
 using Smartway.UiComponent.Sample.ExpanderCard;
 using Smartway.UiComponent.Sample.Buttons;
 using Smartway.UiComponent.Sample.Indicators.ViewModels;
@@ -38,6 +39,11 @@ public class MainPageViewModel : ViewModel
             await NavigateTo(new ExpanderCardSample());
         });
 
+        public ICommand BasicComponents => new Command(async () =>
+        {
+            await NavigateTo(new BasicComponents());
+        });
+
         public ICommand Separators => new Command(async () =>
         {
             await NavigateTo(new SeparatorsSample());
diff --git a/Smartway.UiComponent.Sample/Smartway.UiComponent.Sample.csproj b/Smartway.UiComponent.Sample/Smartway.UiComponent.Sample.csproj
index dc411cb..5500970 100644
--- a/Smartway.UiComponent.Sample/Smartway.UiComponent.Sample.csproj
+++ b/Smartway.UiComponent.Sample/Smartway.UiComponent.Sample.csproj
@@ -36,6 +36,9 @@
     <EmbeddedResource Update="Inputs\Views\Inputs.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
+    <EmbeddedResource Update="Basics\BasicComponents.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
     <EmbeddedResource Update="SectionSheet\Views\SectionSheetSample.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
@@ -57,6 +60,9 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Compile Update="Basics\BasicComponents.xaml.cs">
+      <DependentUpon>BasicComponents.xaml</DependentUpon>
+    </Compile>
     <Compile Update="ExpanderCard\ExpanderCardSample.xaml.cs">
       <DependentUpon>ExpanderCardSample.xaml</DependentUpon>
     </Compile>
diff --git a/Smartway.UiComponent/Resources/Themes.xaml b/Smartway.UiComponent/Resources/Themes.xaml
new file mode 100644
index 0000000..a207930
--- /dev/null
+++ b/Smartway.UiComponent/Resources/Themes.xaml
@@ -0,0 +1,58 @@
+<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                    x:Class="Smartway.UiComponent.Resources.Themes">
+    <!-- Colors -->
+    <Color x:Key="ZgDarkBlue">#010142</Color>
+    <Color x:Key="ZgNightBlue">#27304A</Color>
+    <Color x:Key="ZgDarkBackground">#010627</Color>
+    <Color x:Key="ZgSecondaryDarkBackground">#141937</Color>
+    <Color x:Key="ZgLoaderColor">Gray</Color>
+    <Color x:Key="ZgGrey">#8B8B8B</Color>
+    <Color x:Key="ZgWarning">#FF6C3B</Color>
+    <Color x:Key="ZgColdGrey2">#E2E4F0</Color>
+    <Color x:Key="ZgHighGrey">#A2A2BA</Color>
+    <Color x:Key="ZgMediumGrey">#B2B2B2</Color>
+    <Color x:Key="ZgLightGrey">#E2E4F0</Color>
+
+    <!-- Label Styles -->
+    <Style TargetType="Label">
+        <Setter Property="FontFamily" Value="OpenSans" />
+        <Setter Property="TextColor" 
+                Value="{AppThemeBinding 
+                        Light=Black, 
+                        Dark=White
+                    }"  />
+        <Style.Triggers>
+            <Trigger TargetType="Label" Property="FontAttributes" Value="Bold">
+                <Setter Property="FontFamily"
+                        Value="OpenSansBold" />
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+    <Style TargetType="Label" x:Key="SecondaryTextStyle">
+        <Setter Property="TextColor" 
+                Value="{AppThemeBinding 
+                        Light={StaticResource ZgMediumGrey}, 
+                        Dark={StaticResource ZgHighGrey}
+                    }"  />
+        <Setter Property="FontSize" Value="14"/>
+    </Style>
+
+    <!-- StackLayout Style -->
+    <Style TargetType="StackLayout">
+        <Setter Property="BackgroundColor"
+                Value="{AppThemeBinding 
+                        Light=White, 
+                        Dark={StaticResource ZgDarkBlue}
+                    }" />
+    </Style>
+
+    <!-- Frame Style -->
+    <Style TargetType="Frame" x:Key="SecondaryFrame">
+        <Setter Property="BackgroundColor"
+            Value="{AppThemeBinding 
+                    Light=White,
+                    Dark={StaticResource ZgSecondaryDarkBackground}
+                }" />
+    </Style>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Smartway.UiComponent/Resources/Themes.xaml.cs b/Smartway.UiComponent/Resources/Themes.xaml.cs
new file mode 100644
index 0000000..e284c5d
--- /dev/null
+++ b/Smartway.UiComponent/Resources/Themes.xaml.cs
@@ -0,0 +1,14 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace Smartway.UiComponent.Resources
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class Themes
+    {
+        public Themes()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/Smartway.UiComponent/Smartway.UiComponent.csproj b/Smartway.UiComponent/Smartway.UiComponent.csproj
index a59986c..b0766c9 100644
--- a/Smartway.UiComponent/Smartway.UiComponent.csproj
+++ b/Smartway.UiComponent/Smartway.UiComponent.csproj
@@ -56,6 +56,9 @@
       <AutoGen>True</AutoGen>
       <DependentUpon>Resources.resx</DependentUpon>
     </Compile>
+    <Compile Update="Resources\Themes.xaml.cs">
+      <DependentUpon>Themes.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
  
   <ItemGroup>
@@ -89,6 +92,9 @@
     <EmbeddedResource Update="Layouts\SectionSheet.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
+    <EmbeddedResource Update="Resources\Themes.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
     <EmbeddedResource Update="Resources\Colors.xaml">
       <Generator>MSBuild:Compile</Generator>
     </EmbeddedResource>

From 10eace555ea4cdbd6784575ea5ace2b6a9884243 Mon Sep 17 00:00:00 2001
From: a-bertrand <a.bertrand@zero-gachis.com>
Date: Wed, 4 Nov 2020 11:17:38 +0100
Subject: [PATCH 2/2] :sparkles: add dark theme topAppBar

---
 Smartway.UiComponent.Sample/MainPage.xaml     |   5 +-
 Smartway.UiComponent.Sample/MainPage.xaml.cs  |   6 +--
 .../Resources/Images/white_icon_close.png     | Bin 0 -> 393 bytes
 Smartway.UiComponent/Resources/Themes.xaml    |  43 +++++++++---------
 .../Smartway.UiComponent.csproj               |   2 +
 Smartway.UiComponent/TopAppBar/TopAppBar.xaml |  29 ++++++++----
 .../TopAppBar/TopAppBar.xaml.cs               |  13 ++----
 7 files changed, 51 insertions(+), 47 deletions(-)
 create mode 100644 Smartway.UiComponent/Resources/Images/white_icon_close.png

diff --git a/Smartway.UiComponent.Sample/MainPage.xaml b/Smartway.UiComponent.Sample/MainPage.xaml
index 287b3a4..b703737 100644
--- a/Smartway.UiComponent.Sample/MainPage.xaml
+++ b/Smartway.UiComponent.Sample/MainPage.xaml
@@ -6,9 +6,10 @@
              xmlns:sample="clr-namespace:Smartway.UiComponent.Sample;assembly=Smartway.UiComponent.Sample"
              mc:Ignorable="d"
              x:Class="Smartway.UiComponent.Sample.MainPage"
-             x:DataType="sample:MainPageViewModel">
+             x:DataType="sample:MainPageViewModel"
+             x:Name="Self">
     <StackLayout>
-        <Button x:Name="SwitchThemeBtn" Text="Switch ALL APP Theme" />
+        <Button x:Name="SwitchThemeBtn" Text="Switch ALL APP Theme" Command="{Binding Source={x:Reference Self}, Path=SwitchTheme}"/>
         <Button Text="BasicComponents" Command="{Binding BasicComponents}"/>
         <Button Text="SectionForm" Command="{Binding SectionForm}"/>
         <Button Text="Indicators" Command="{Binding Indicators}"/>
diff --git a/Smartway.UiComponent.Sample/MainPage.xaml.cs b/Smartway.UiComponent.Sample/MainPage.xaml.cs
index 627ddba..3e3ac8e 100644
--- a/Smartway.UiComponent.Sample/MainPage.xaml.cs
+++ b/Smartway.UiComponent.Sample/MainPage.xaml.cs
@@ -1,5 +1,6 @@
 using System;
 using System.ComponentModel;
+using System.Windows.Input;
 using Xamarin.Forms;
 
 namespace Smartway.UiComponent.Sample
@@ -12,13 +13,12 @@ public partial class MainPage
         public MainPage()
         {
             InitializeComponent();
-            SwitchThemeBtn.Clicked += SwitchTheme;
         }
 
-        private void SwitchTheme(object sender, EventArgs e)
+        public ICommand SwitchTheme => new Command( () =>
         {
             var currentTheme = Application.Current.RequestedTheme;
             Application.Current.UserAppTheme = currentTheme == OSAppTheme.Light ? OSAppTheme.Dark : OSAppTheme.Light;
-        }
+        });
     }
 }
diff --git a/Smartway.UiComponent/Resources/Images/white_icon_close.png b/Smartway.UiComponent/Resources/Images/white_icon_close.png
new file mode 100644
index 0000000000000000000000000000000000000000..77657dfaac2901f79ff648a8577c7afd08546030
GIT binary patch
literal 393
zcmV;40e1e0P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px$LrFwIRA>e5l?@8RAPj}ePU_9(O}jW0YUWR3p5P#Y6r1Gb%WF%o%a=Rg4!8sE
zfIHw0{E-9qeMi~>jhr-TztOstUWTX3cfp1rwFF<*o*_s*InS4Q2oik47k&H?okpqQ
z@(?>Tt5=2}kPVSqoO5_aG)8C)A!k7gfTecErHZeBtkkHWw8<JEO|F*1lrI63<d`6=
z#UsE`%-R=PKLDlB&kE4yC^5op{Z%>rnefGg$q;b(S8425a$w?qd6nQ#0b;%o{>&i;
z@ad!Oeb{F_2??Mi2l5(dMKoZVTrI~^{tD1a%@W+K$O2-iopFic2mpkJ2$m-y8zZ$i
zXY;(H;SS9ve7Z@^B5l4xw?G&m!Pb8w3d?nA)a*G#&{g-d*$}ax35et&0zj&g$V0^H
nrXSn^cfcKR2iyU7;BW^%(=^de!inVJ00000NkvXXu0mjfgu1JK

literal 0
HcmV?d00001

diff --git a/Smartway.UiComponent/Resources/Themes.xaml b/Smartway.UiComponent/Resources/Themes.xaml
index a207930..e8bcd0d 100644
--- a/Smartway.UiComponent/Resources/Themes.xaml
+++ b/Smartway.UiComponent/Resources/Themes.xaml
@@ -1,26 +1,25 @@
 <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="Smartway.UiComponent.Resources.Themes">
-    <!-- Colors -->
-    <Color x:Key="ZgDarkBlue">#010142</Color>
-    <Color x:Key="ZgNightBlue">#27304A</Color>
-    <Color x:Key="ZgDarkBackground">#010627</Color>
-    <Color x:Key="ZgSecondaryDarkBackground">#141937</Color>
-    <Color x:Key="ZgLoaderColor">Gray</Color>
-    <Color x:Key="ZgGrey">#8B8B8B</Color>
-    <Color x:Key="ZgWarning">#FF6C3B</Color>
-    <Color x:Key="ZgColdGrey2">#E2E4F0</Color>
-    <Color x:Key="ZgHighGrey">#A2A2BA</Color>
-    <Color x:Key="ZgMediumGrey">#B2B2B2</Color>
-    <Color x:Key="ZgLightGrey">#E2E4F0</Color>
+    <!-- Light theme colors -->
+    <Color x:Key="LightPrimaryBackgroundColor">White</Color>
+    <Color x:Key="LightSecondaryBackgroundColor">White</Color>
+    <Color x:Key="LightPrimaryTextColor">Black</Color>
+    <Color x:Key="LightSecondaryTextColor">#B2B2B2</Color>
+
+    <!-- Dark theme colors -->
+    <Color x:Key="DarkPrimaryBackgroundColor">#010627</Color>
+    <Color x:Key="DarkSecondaryBackgroundColor">#141937</Color>
+    <Color x:Key="DarkPrimaryTextColor">White</Color>
+    <Color x:Key="DarkSecondaryTextColor">#A2A2BA</Color>
 
     <!-- Label Styles -->
     <Style TargetType="Label">
         <Setter Property="FontFamily" Value="OpenSans" />
         <Setter Property="TextColor" 
                 Value="{AppThemeBinding 
-                        Light=Black, 
-                        Dark=White
+                        Light={StaticResource LightPrimaryTextColor}, 
+                        Dark={StaticResource DarkPrimaryTextColor}
                     }"  />
         <Style.Triggers>
             <Trigger TargetType="Label" Property="FontAttributes" Value="Bold">
@@ -32,8 +31,8 @@
     <Style TargetType="Label" x:Key="SecondaryTextStyle">
         <Setter Property="TextColor" 
                 Value="{AppThemeBinding 
-                        Light={StaticResource ZgMediumGrey}, 
-                        Dark={StaticResource ZgHighGrey}
+                        Light={StaticResource LightSecondaryTextColor}, 
+                        Dark={StaticResource DarkSecondaryTextColor}
                     }"  />
         <Setter Property="FontSize" Value="14"/>
     </Style>
@@ -42,17 +41,17 @@
     <Style TargetType="StackLayout">
         <Setter Property="BackgroundColor"
                 Value="{AppThemeBinding 
-                        Light=White, 
-                        Dark={StaticResource ZgDarkBlue}
+                        Light={StaticResource LightPrimaryBackgroundColor}, 
+                        Dark={StaticResource DarkPrimaryBackgroundColor}
                     }" />
     </Style>
 
     <!-- Frame Style -->
     <Style TargetType="Frame" x:Key="SecondaryFrame">
         <Setter Property="BackgroundColor"
-            Value="{AppThemeBinding 
-                    Light=White,
-                    Dark={StaticResource ZgSecondaryDarkBackground}
-                }" />
+                Value="{AppThemeBinding 
+                        Light={StaticResource LightSecondaryBackgroundColor},
+                        Dark={StaticResource DarkSecondaryBackgroundColor}
+                    }" />
     </Style>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/Smartway.UiComponent/Smartway.UiComponent.csproj b/Smartway.UiComponent/Smartway.UiComponent.csproj
index b0766c9..f1ac4e0 100644
--- a/Smartway.UiComponent/Smartway.UiComponent.csproj
+++ b/Smartway.UiComponent/Smartway.UiComponent.csproj
@@ -17,6 +17,7 @@
     <None Remove="Resources\Images\img_product_placeholder.png" />
     <None Remove="Resources\Images\img_product_placeholder_multilocation.png" />
     <None Remove="Resources\Images\logo_easyturn.png" />
+    <None Remove="Resources\Images\white_icon_close.png" />
   </ItemGroup>
 
   <ItemGroup>
@@ -29,6 +30,7 @@
     <EmbeddedResource Include="Resources\Images\img_product_placeholder.png" />
     <EmbeddedResource Include="Resources\Images\img_product_placeholder_multilocation.png" />
     <EmbeddedResource Include="Resources\Images\logo_easyturn.png" />
+    <EmbeddedResource Include="Resources\Images\white_icon_close.png" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/Smartway.UiComponent/TopAppBar/TopAppBar.xaml b/Smartway.UiComponent/TopAppBar/TopAppBar.xaml
index d6f98a0..7e26971 100644
--- a/Smartway.UiComponent/TopAppBar/TopAppBar.xaml
+++ b/Smartway.UiComponent/TopAppBar/TopAppBar.xaml
@@ -13,6 +13,9 @@
                 <Setter Property="HorizontalOptions" Value="Start"></Setter>
                 <Setter Property="WidthRequest" Value="24"></Setter>
                 <Setter Property="BackgroundColor" Value="Transparent"></Setter>
+                <Setter Property="Source" 
+                        Value="">
+                </Setter>
             </Style>
             <Style x:Key="LabelTitle" TargetType="Label">
                 <Setter Property="FontSize" Value="20"></Setter>
@@ -20,12 +23,10 @@
                 <Setter Property="HorizontalOptions" Value="Start"></Setter>
                 <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
                 <Setter Property="FontAttributes" Value="Bold"></Setter>
-                <Setter Property="TextColor" Value="#010142"></Setter>
                 <Setter Property="WidthRequest" Value="200"></Setter>
             </Style>
             <Style x:Key="ExtraLabel" TargetType="Label">
                 <Setter Property="FontSize" Value="16"></Setter>
-                <Setter Property="TextColor" Value="#010142"></Setter>
                 <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
                 <Setter Property="HorizontalOptions" Value="EndAndExpand"></Setter>
             </Style>
@@ -33,23 +34,31 @@
     </ContentView.Resources>
     <ContentView.Content>
         <StackLayout Orientation="Horizontal">
-                <ImageButton Style="{StaticResource ImageButton}" 
-                             Command="{Binding Source={x:Reference Self}, Path=Command}">
+                <ImageButton x:Name="ImageButton" Style="{StaticResource ImageButton}" 
+                             Command="{Binding Source={x:Reference Self}, Path=Command}"
+                             Source="{Binding Source={x:Reference Self}, Path=ImageContent}">
                     <ImageButton.Triggers>
                         <DataTrigger TargetType="ImageButton" 
-                                 Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Default">
-                        <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.icon_arrow_back.png }"/>
+                                     Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Default">
+                            <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.icon_arrow_back.png }"/>
                         </DataTrigger>
                         <DataTrigger TargetType="ImageButton" 
-                                 Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Modal">
+                                     Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Modal">
                             <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.icon_close.png}"/>
                         </DataTrigger>
                         <DataTrigger TargetType="ImageButton" 
-                                 Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Custom">
+                                     Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Custom">
                             <Setter Property="Source" Value="{Binding Source={x:Reference Self}, Path=IconSource}"/>
                         </DataTrigger>
-                    </ImageButton.Triggers>
-                </ImageButton>
+                        <MultiTrigger TargetType="ImageButton">
+                            <MultiTrigger.Conditions>
+                                <BindingCondition Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Modal" />
+                                <BindingCondition Binding="{Binding Source={x:Reference Self}, Path=IsDarkTheme}" Value="true" />
+                            </MultiTrigger.Conditions>
+                            <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.white_icon_close.png}"/>
+                        </MultiTrigger>
+                </ImageButton.Triggers>
+            </ImageButton>
                 <Label Style="{StaticResource LabelTitle}"
                        Text="{Binding Source={x:Reference Self}, Path=Title}" 
                        LineBreakMode="TailTruncation"/>
diff --git a/Smartway.UiComponent/TopAppBar/TopAppBar.xaml.cs b/Smartway.UiComponent/TopAppBar/TopAppBar.xaml.cs
index d82f1e2..44d41a5 100644
--- a/Smartway.UiComponent/TopAppBar/TopAppBar.xaml.cs
+++ b/Smartway.UiComponent/TopAppBar/TopAppBar.xaml.cs
@@ -1,19 +1,11 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Reflection;
-using System.Text;
-using System.Threading.Tasks;
-using System.Windows.Input;
-using System.Xml;
-using Smartway.UiComponent.Utils;
+using System.Windows.Input;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
 namespace Smartway.UiComponent.TopAppBar
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    public partial class TopAppBar : ContentView
+    public partial class TopAppBar
     {
         public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(TopAppBar));
         public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(TopAppBar));
@@ -52,6 +44,7 @@ public string IconSource
             get => (string) GetValue(IconSourceProperty);
             set => SetValue(IconSourceProperty, value);
         }
+        public bool IsDarkTheme => Application.Current.RequestedTheme == OSAppTheme.Dark;
 
         public TopAppBar()
         {