From d78b8e273f3123d79737049379443ee8405d952c Mon Sep 17 00:00:00 2001
From: jerrry08 <jeremyyearwood99@gmail.com>
Date: Sun, 21 Jan 2024 14:40:43 -0400
Subject: [PATCH] Update themes

---
 Anikin/ViewModels/ProfileViewModel.cs         |  34 +++--
 Anikin/Views/AnimeItemView.xaml               |   3 +-
 Anikin/Views/AnimeTabView.xaml                |  31 ++---
 Anikin/Views/Episodes/EpisodePage.xaml        | 120 +++++++++---------
 Anikin/Views/Episodes/EpisodesTabView.xaml    |   5 +-
 Anikin/Views/ProfileTabView.xaml              |  34 +++++
 .../Templates/AnimeCarouselTemplateView.xaml  |   3 +-
 .../Templates/AnimeTypeRangeTemplateView.xaml |   2 +-
 .../Templates/CarouselGenreTemplateView.xaml  |   1 +
 Anikin/Views/Templates/GenreTemplateView.xaml |   3 +-
 .../Templates/SemiEpisodeTemplateView.xaml    |   1 -
 11 files changed, 140 insertions(+), 97 deletions(-)

diff --git a/Anikin/ViewModels/ProfileViewModel.cs b/Anikin/ViewModels/ProfileViewModel.cs
index 30da621..258769e 100644
--- a/Anikin/ViewModels/ProfileViewModel.cs
+++ b/Anikin/ViewModels/ProfileViewModel.cs
@@ -1,13 +1,10 @@
-using System;
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Anikin.Services;
 using Anikin.ViewModels.Framework;
 using Anikin.Views;
 using Anikin.Views.Settings;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
-using Microsoft.Extensions.DependencyInjection;
-using Microsoft.Maui;
 using Microsoft.Maui.ApplicationModel;
 using Microsoft.Maui.Controls;
 
@@ -31,6 +28,27 @@ public ProfileViewModel(SettingsService settingsService)
         };
     }
 
+    [RelayCommand]
+    private void ThemeSelected(int index)
+    {
+        var selectedTheme = (AppTheme)index;
+
+        if (Settings.AppTheme == selectedTheme)
+        {
+            // For some reason, EventToCommandBehavior does not get removed
+            // when calling `new AppShell()`
+            return;
+        }
+
+        Settings.AppTheme = selectedTheme;
+        Settings.Save();
+
+        App.ApplyTheme();
+
+        if (Application.Current is not null)
+            Application.Current.MainPage = new AppShell();
+    }
+
     [RelayCommand]
     async Task LoginWithAnilist()
     {
@@ -62,11 +80,9 @@ async Task LoginWithAnilist()
 
         var clientID = "14733";
 
-        var result = await Browser
-            .Default
-            .OpenAsync(
-                $"https://anilist.co/api/v2/oauth/authorize?client_id={clientID}&response_type=token"
-            );
+        var result = await Browser.Default.OpenAsync(
+            $"https://anilist.co/api/v2/oauth/authorize?client_id={clientID}&response_type=token"
+        );
     }
 
     [RelayCommand]
diff --git a/Anikin/Views/AnimeItemView.xaml b/Anikin/Views/AnimeItemView.xaml
index a4fcc65..0dcd339 100644
--- a/Anikin/Views/AnimeItemView.xaml
+++ b/Anikin/Views/AnimeItemView.xaml
@@ -111,7 +111,8 @@
                     LineBreakMode="TailTruncation"
                     MaxLines="2"
                     Text="{Binding Title.PreferredTitle}"
-                    TextColor="#E9FFFFFF" />
+                    TextColor="{AppThemeBinding Light={StaticResource Gray900},
+                                                Dark=#E9FFFFFF}" />
             </Grid>
         </Grid>
     </Border>
diff --git a/Anikin/Views/AnimeTabView.xaml b/Anikin/Views/AnimeTabView.xaml
index cb1f0a2..18240b8 100644
--- a/Anikin/Views/AnimeTabView.xaml
+++ b/Anikin/Views/AnimeTabView.xaml
@@ -42,7 +42,7 @@
         IsRefreshing="{Binding IsRefreshing}"
         ZIndex="-1">
         <ScrollView>
-            <Grid x:Name="MainGrid" RowDefinitions="auto,*">
+            <Grid Padding="0,-2,0,0" x:Name="MainGrid" RowDefinitions="auto,*">
                 <!--<skl:SKLottieView
                     Grid.Column="1"
                     BackgroundColor="Transparent"
@@ -166,16 +166,9 @@
                                     <Span
                                         FontAttributes="Bold"
                                         FontSize="Body"
-                                        Text="Top "
-                                        TextColor="#D9FFFFFF" />
-                                    <Span
-                                        FontSize="Body"
-                                        Text="Airing "
-                                        TextColor="#D9FFFFFF" />
-                                    <Span
-                                        FontSize="Body"
-                                        Text="Anime"
-                                        TextColor="#D9FFFFFF" />
+                                        Text="Top " />
+                                    <Span FontSize="Body" Text="Airing " />
+                                    <Span FontSize="Body" Text="Anime" />
                                 </FormattedString>
                             </Label.FormattedText>
                         </Label>
@@ -184,8 +177,7 @@
                             FontAttributes="Bold"
                             FontSize="11"
                             HorizontalOptions="End"
-                            Text="See all &gt;"
-                            TextColor="#D9FFFFFF" />
+                            Text="See all &gt;" />
                     </Grid>
 
                     <CollectionView
@@ -247,12 +239,8 @@
                                     <Span
                                         FontAttributes="Bold"
                                         FontSize="Body"
-                                        Text="Recently "
-                                        TextColor="#D9FFFFFF" />
-                                    <Span
-                                        FontSize="Body"
-                                        Text="Updated "
-                                        TextColor="#D9FFFFFF" />
+                                        Text="Recently " />
+                                    <Span FontSize="Body" Text="Updated " />
                                 </FormattedString>
                             </Label.FormattedText>
                         </Label>
@@ -261,8 +249,7 @@
                             FontAttributes="Bold"
                             FontSize="11"
                             HorizontalOptions="End"
-                            Text="See all &gt;"
-                            TextColor="#D9FFFFFF" />
+                            Text="See all &gt;" />
                     </Grid>
 
                     <CollectionView
@@ -337,7 +324,7 @@
                         </CollectionView.EmptyView>
                     </CollectionView>
 
-                    <Grid>
+                    <Grid MinimumHeightRequest="200">
                         <Grid
                             HorizontalOptions="CenterAndExpand"
                             IsVisible="{Binding SelectedRange.IsLoading}"
diff --git a/Anikin/Views/Episodes/EpisodePage.xaml b/Anikin/Views/Episodes/EpisodePage.xaml
index 9a94f08..2b966fd 100644
--- a/Anikin/Views/Episodes/EpisodePage.xaml
+++ b/Anikin/Views/Episodes/EpisodePage.xaml
@@ -31,7 +31,7 @@
 
     <Grid>
         <Grid
-            HeightRequest="50"
+            HeightRequest="40"
             VerticalOptions="Start"
             ZIndex="1">
             <Grid.Background>
@@ -136,6 +136,7 @@
                             <Label
                                 FontAttributes="Bold"
                                 Text="{Binding Entity.MeanScore, Converter={StaticResource RatingConverter}}"
+                                TextColor="White"
                                 VerticalOptions="Center" />
                             <Label
                                 FontFamily="Material"
@@ -186,7 +187,7 @@
                         <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.2">
                             <GradientStop Offset="0" Color="Transparent" />
                             <GradientStop Offset="0.16" Color="#5E000000" />
-                            <GradientStop Offset="1" Color="Black" />
+                            <GradientStop Offset="1" Color="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
                         </LinearGradientBrush>
                     </VerticalStackLayout.Background>
 
@@ -202,70 +203,71 @@
                             LineBreakMode="TailTruncation"
                             MaxLines="1"
                             Text="{Binding Entity.Title.PreferredTitle}"
+                            TextColor="White"
                             VerticalOptions="Center">
                             <Label.Behaviors>
                                 <berry:TouchBehavior LongPressCommand="{Binding BindingContext.CopyTitleCommand, Source={x:Reference this}}" />
                             </Label.Behaviors>
                         </Label>
 
-                        <ImageButton
-                            x:Name="favouriteBtn"
-                            Grid.Column="2"
-                            Margin="0"
-                            Padding="5"
-                            BackgroundColor="Transparent"
-                            Clicked="FavouriteButton_OnClick"
-                            HeightRequest="50">
-                            <ImageButton.Triggers>
-                                <DataTrigger
-                                    Binding="{Binding IsFavorite}"
-                                    TargetType="ImageButton"
-                                    Value="True">
-                                    <Setter Property="Source">
-                                        <Setter.Value>
-                                            <FontImageSource
-                                                FontFamily="Material"
-                                                Glyph="{x:Static materialDesign:MaterialDesignIcons.Favorite}"
-                                                Size="30"
-                                                Color="{AppThemeBinding Light={StaticResource Black},
-                                                                        Dark=Red}" />
-                                        </Setter.Value>
-                                    </Setter>
-                                </DataTrigger>
-                                <DataTrigger
-                                    Binding="{Binding IsFavorite}"
-                                    TargetType="ImageButton"
-                                    Value="False">
-                                    <Setter Property="Source">
-                                        <Setter.Value>
-                                            <FontImageSource
-                                                FontFamily="Material"
-                                                Glyph="{x:Static materialDesign:MaterialDesignIcons.FavoriteOutline}"
-                                                Size="30"
-                                                Color="{AppThemeBinding Light={StaticResource Black},
-                                                                        Dark={StaticResource White}}" />
-                                        </Setter.Value>
-                                    </Setter>
-                                </DataTrigger>
-                            </ImageButton.Triggers>
-                        </ImageButton>
+                        <Grid Grid.Column="2">
+                            <ImageButton
+                                x:Name="favouriteBtn"
+                                Margin="0"
+                                Padding="2"
+                                BackgroundColor="Transparent"
+                                Clicked="FavouriteButton_OnClick"
+                                HeightRequest="50">
+                                <ImageButton.Triggers>
+                                    <DataTrigger
+                                        Binding="{Binding IsFavorite}"
+                                        TargetType="ImageButton"
+                                        Value="True">
+                                        <Setter Property="Source">
+                                            <Setter.Value>
+                                                <FontImageSource
+                                                    FontFamily="Material"
+                                                    Glyph="{x:Static materialDesign:MaterialDesignIcons.Favorite}"
+                                                    Size="30"
+                                                    Color="Red" />
+                                            </Setter.Value>
+                                        </Setter>
+                                    </DataTrigger>
+                                    <DataTrigger
+                                        Binding="{Binding IsFavorite}"
+                                        TargetType="ImageButton"
+                                        Value="False">
+                                        <Setter Property="Source">
+                                            <Setter.Value>
+                                                <FontImageSource
+                                                    FontFamily="Material"
+                                                    Glyph="{x:Static materialDesign:MaterialDesignIcons.FavoriteOutline}"
+                                                    Size="30"
+                                                    Color="White" />
+                                            </Setter.Value>
+                                        </Setter>
+                                    </DataTrigger>
+                                </ImageButton.Triggers>
+                            </ImageButton>
+                        </Grid>
 
-                        <Button
-                            Grid.Column="3"
-                            Margin="0"
-                            Padding="0"
-                            BackgroundColor="Transparent"
-                            Command="{Binding ShareUriCommand}"
-                            HeightRequest="50">
-                            <Button.ImageSource>
-                                <FontImageSource
-                                    FontFamily="Material"
-                                    Glyph="{x:Static materialDesign:MaterialDesignIcons.Share}"
-                                    Size="30"
-                                    Color="{AppThemeBinding Light={StaticResource Black},
-                                                            Dark={StaticResource White}}" />
-                            </Button.ImageSource>
-                        </Button>
+                        <Grid Grid.Column="3">
+                            <ImageButton
+                                Grid.Column="3"
+                                Margin="0"
+                                Padding="3"
+                                BackgroundColor="Transparent"
+                                Command="{Binding ShareUriCommand}"
+                                HeightRequest="50">
+                                <ImageButton.Source>
+                                    <FontImageSource
+                                        FontFamily="Material"
+                                        Glyph="{x:Static materialDesign:MaterialDesignIcons.Share}"
+                                        Size="30"
+                                        Color="White" />
+                                </ImageButton.Source>
+                            </ImageButton>
+                        </Grid>
                     </Grid>
 
                     <!--<FlexLayout
diff --git a/Anikin/Views/Episodes/EpisodesTabView.xaml b/Anikin/Views/Episodes/EpisodesTabView.xaml
index dd53f87..317c814 100644
--- a/Anikin/Views/Episodes/EpisodesTabView.xaml
+++ b/Anikin/Views/Episodes/EpisodesTabView.xaml
@@ -66,7 +66,8 @@
                 <Switch
                     IsToggled="{Binding IsDubSelected}"
                     OnColor="{StaticResource Primary}"
-                    ThumbColor="{StaticResource Secondary}"
+                    ThumbColor="{AppThemeBinding Light=Black,
+                                                 Dark={StaticResource Secondary}}"
                     VerticalOptions="Center" />
                 <Label
                     FontAttributes="Bold"
@@ -102,7 +103,7 @@
                         FontFamily="SoraBold"
                         FontSize="16"
                         Text="Wrong Title?"
-                        TextColor="{StaticResource Secondary}"
+                        TextColor="#9575ff"
                         TextDecorations="Underline" />
                 </Grid>
             </Border>
diff --git a/Anikin/Views/ProfileTabView.xaml b/Anikin/Views/ProfileTabView.xaml
index 63a44c7..e5eca15 100644
--- a/Anikin/Views/ProfileTabView.xaml
+++ b/Anikin/Views/ProfileTabView.xaml
@@ -8,6 +8,7 @@
     xmlns:local="clr-namespace:Anikin"
     xmlns:materialDesign="clr-namespace:MaterialDesign"
     xmlns:models="clr-namespace:Jita.AniList.Models;assembly=Jita.AniList"
+    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
     xmlns:viewModels="clr-namespace:Anikin.ViewModels"
     x:Name="this"
     x:DataType="viewModels:ProfileViewModel">
@@ -94,6 +95,39 @@
                     Text="Enabling Developer Mode allows you to see exceptions when thrown" />
                 <Switch Grid.ColumnSpan="2" IsToggled="{Binding Settings.EnableDeveloperMode}" />
             </Grid>
+
+            <!--  Theme  -->
+            <Grid
+                Margin="0,5,0,0"
+                Padding="20,0"
+                ColumnDefinitions="auto,*">
+                <Label
+                    Margin="0,0,5,0"
+                    FontAttributes="Bold"
+                    FontSize="15"
+                    Text="Theme:"
+                    VerticalOptions="Center" />
+                <Picker
+                    x:Name="ThemePicker"
+                    Title="Themes"
+                    Grid.Column="1"
+                    FontSize="16"
+                    SelectedIndex="{Binding Settings.AppTheme}">
+                    <Picker.ItemsSource>
+                        <x:Array Type="{x:Type x:String}">
+                            <x:String>Default</x:String>
+                            <x:String>Light</x:String>
+                            <x:String>Dark</x:String>
+                        </x:Array>
+                    </Picker.ItemsSource>
+                    <Picker.Behaviors>
+                        <toolkit:EventToCommandBehavior
+                            Command="{Binding ThemeSelectedCommand}"
+                            CommandParameter="{Binding Source={x:Reference ThemePicker}, Path=SelectedIndex}"
+                            EventName="SelectedIndexChanged" />
+                    </Picker.Behaviors>
+                </Picker>
+            </Grid>
         </VerticalStackLayout>
 
         <!--  Webview causing other views when navigating to lose touch effect color  -->
diff --git a/Anikin/Views/Templates/AnimeCarouselTemplateView.xaml b/Anikin/Views/Templates/AnimeCarouselTemplateView.xaml
index e25b2a8..82e4773 100644
--- a/Anikin/Views/Templates/AnimeCarouselTemplateView.xaml
+++ b/Anikin/Views/Templates/AnimeCarouselTemplateView.xaml
@@ -56,7 +56,7 @@
                 <!--  StartPoint defaults to (0,0)  -->
                 <LinearGradientBrush EndPoint="0,0.98">
                     <GradientStop Offset="0.4" Color="Transparent" />
-                    <GradientStop Offset="1.0" Color="Black" />
+                    <GradientStop Offset="1.0" Color="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
                 </LinearGradientBrush>
             </Grid.Background>
         </Grid>
@@ -111,6 +111,7 @@
                         LineBreakMode="TailTruncation"
                         MaxLines="5"
                         Text="{Binding Title.PreferredTitle}"
+                        TextColor="White"
                         VerticalOptions="Center" />
 
                     <Label
diff --git a/Anikin/Views/Templates/AnimeTypeRangeTemplateView.xaml b/Anikin/Views/Templates/AnimeTypeRangeTemplateView.xaml
index 4e4760e..16000ab 100644
--- a/Anikin/Views/Templates/AnimeTypeRangeTemplateView.xaml
+++ b/Anikin/Views/Templates/AnimeTypeRangeTemplateView.xaml
@@ -14,7 +14,7 @@
     <Grid BackgroundColor="Transparent">
         <Border
             Grid.Column="0"
-            BackgroundColor="{StaticResource Gray830}"
+            BackgroundColor="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray830}}"
             HorizontalOptions="FillAndExpand"
             StrokeThickness="0"
             VerticalOptions="FillAndExpand">
diff --git a/Anikin/Views/Templates/CarouselGenreTemplateView.xaml b/Anikin/Views/Templates/CarouselGenreTemplateView.xaml
index 068e990..318e375 100644
--- a/Anikin/Views/Templates/CarouselGenreTemplateView.xaml
+++ b/Anikin/Views/Templates/CarouselGenreTemplateView.xaml
@@ -27,6 +27,7 @@
                 HorizontalOptions="Center"
                 HorizontalTextAlignment="Center"
                 Text="{Binding}"
+                TextColor="White"
                 VerticalTextAlignment="Center" />
         </Border>
     </Grid>
diff --git a/Anikin/Views/Templates/GenreTemplateView.xaml b/Anikin/Views/Templates/GenreTemplateView.xaml
index dbd720b..e9906ea 100644
--- a/Anikin/Views/Templates/GenreTemplateView.xaml
+++ b/Anikin/Views/Templates/GenreTemplateView.xaml
@@ -13,7 +13,8 @@
     <Grid Margin="2,0" BackgroundColor="Transparent">
         <Border
             Grid.Column="0"
-            BackgroundColor="{StaticResource Gray830}"
+            BackgroundColor="{AppThemeBinding Light={StaticResource Gray400},
+                                              Dark={StaticResource Gray830}}"
             HorizontalOptions="Center"
             StrokeThickness="0"
             VerticalOptions="FillAndExpand">
diff --git a/Anikin/Views/Templates/SemiEpisodeTemplateView.xaml b/Anikin/Views/Templates/SemiEpisodeTemplateView.xaml
index 070514b..e23a3fa 100644
--- a/Anikin/Views/Templates/SemiEpisodeTemplateView.xaml
+++ b/Anikin/Views/Templates/SemiEpisodeTemplateView.xaml
@@ -42,7 +42,6 @@
         <Image
             Aspect="AspectFill"
             BackgroundColor="Transparent"
-            Opacity="0.8"
             Source="{Binding Image}" />
 
         <!--  Display Progress  -->