From 106c70be002cfdfb55e61b3abd1109cb9297e086 Mon Sep 17 00:00:00 2001
From: A-Guldborg <aguh@itu.dk>
Date: Tue, 16 Apr 2024 22:59:25 +0200
Subject: [PATCH] Adds dark mode

---
 Shifty.App/Components/MenuItems.razor      |  5 ++-
 Shifty.App/Components/ProductManager.razor |  5 ++-
 Shifty.App/Components/UserTable.razor      |  7 ++--
 Shifty.App/Shared/MainLayout.razor         | 44 ++++++++++++++++++++--
 Shifty.App/wwwroot/index.html              |  2 +-
 5 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/Shifty.App/Components/MenuItems.razor b/Shifty.App/Components/MenuItems.razor
index f2537e4..5fca9e2 100644
--- a/Shifty.App/Components/MenuItems.razor
+++ b/Shifty.App/Components/MenuItems.razor
@@ -43,7 +43,8 @@
                     <MudIconButton
                         Size="@Size.Medium"
                         Icon="@Icons.Material.Outlined.Edit"
-                        Color="Color.Primary"
+                        Color="Color.Dark"
+                        Variant="Variant.Outlined"
                         OnClick="@context.Actions.StartEditingItemAsync" />
                 </CellTemplate>
             </TemplateColumn>
@@ -54,7 +55,7 @@
                     @{
                         if (context.Item.Active)
                         {
-                            <MudIconButton Size="@Size.Small" Color="Color.Dark" OnClick="@(() => ConfirmActiveToggle(context.Item))"
+                            <MudIconButton Variant="Variant.Outlined" Size="@Size.Small" Color="Color.Dark" OnClick="@(() => ConfirmActiveToggle(context.Item))"
                                 Icon="@Icons.Material.Filled.Visibility" />
                         }
                         else
diff --git a/Shifty.App/Components/ProductManager.razor b/Shifty.App/Components/ProductManager.razor
index 01a538e..77648ec 100644
--- a/Shifty.App/Components/ProductManager.razor
+++ b/Shifty.App/Components/ProductManager.razor
@@ -48,7 +48,8 @@
                     <MudIconButton
                         Size="@Size.Medium"
                         Icon="@Icons.Material.Outlined.Edit"
-                        Color="Color.Primary"
+                        Variant="Variant.Outlined"
+                        Color="Color.Dark"
                         OnClick="@context.Actions.StartEditingItemAsync" />
                 </CellTemplate>
             </TemplateColumn>
@@ -57,7 +58,7 @@
                     @{
                         if (context.Item.Visible)
                         {
-                            <MudIcon Size="@Size.Small" Color="Color.Dark"
+                            <MudIcon Size="@Size.Small" 
                                 Icon="@Icons.Material.Filled.Visibility" />
                         }
                         else
diff --git a/Shifty.App/Components/UserTable.razor b/Shifty.App/Components/UserTable.razor
index fd6d41a..b85e0f3 100644
--- a/Shifty.App/Components/UserTable.razor
+++ b/Shifty.App/Components/UserTable.razor
@@ -29,7 +29,8 @@
                 ValueChanged="@(s => OnSearch(s))" 
                 Placeholder="Search" 
                 Adornment="Adornment.Start" 
-                AdornmentIcon="Icons.Material.Filled.Search" 
+                AdornmentIcon="@Icons.Material.Filled.Search" 
+                
                 IconSize="Size.Medium" />
         </ToolBarContent>
         <HeaderContent>
@@ -59,7 +60,7 @@
         <NoRecordsContent>No matching records found</NoRecordsContent>
         <PagerContent><MudTablePager /></PagerContent>
         <EditButtonContent Context="button">
-            <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@button.ButtonAction" Disabled="@button.ButtonDisabled" />
+            <MudIconButton Size="@Size.Small" Variant="Variant.Outlined" Icon="@Icons.Material.Outlined.Edit" OnClick="@button.ButtonAction" Disabled="@button.ButtonDisabled" />
         </EditButtonContent>
     </MudTable>
 </MudContainer>
@@ -120,6 +121,6 @@
     {
         ((SimpleUserResponse)user).UserGroup = UserGroupBeforeEdit;
         StateHasChanged();
-        Snackbar.Add("Canceled editing", Severity.Warning);
+        Snackbar.Add("Canceled editing", Severity.Info);
     }
 }
\ No newline at end of file
diff --git a/Shifty.App/Shared/MainLayout.razor b/Shifty.App/Shared/MainLayout.razor
index c9ab966..95f10eb 100644
--- a/Shifty.App/Shared/MainLayout.razor
+++ b/Shifty.App/Shared/MainLayout.razor
@@ -2,7 +2,7 @@
 @using MudBlazor.Utilities
 @inherits LayoutComponentBase
 
-<MudThemeProvider Theme="_theme"/>
+<MudThemeProvider Theme="_theme" @bind-IsDarkMode="_darkmode" @ref="_themeProvider"/>
 <MudDialogProvider
     CloseOnEscapeKey="true"
 />
@@ -14,6 +14,8 @@
             <MudAppBar Elevation="0">
                 <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((_) => DrawerToggle())"/>
                 <MudText Typo="Typo.h6" Align="Align.Left">Analog Shifty</MudText>
+                <MudSpacer />
+                <MudIconButton Icon="@(_darkmode ? Icons.Material.Filled.DarkMode : Icons.Material.Filled.LightMode)" Color="Color.Inherit" Edge="Edge.End" OnClick="@((_) => _darkmode = !_darkmode)"/>
             </MudAppBar>
             <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
                 <MudDrawerHeader>
@@ -28,7 +30,7 @@
         <NotAuthorized>
             <MudAppBar></MudAppBar>
                 <MudMainContent>
-                    <MudPaper Elevation="0" Height="60vh" Class="d-flex justify-center align-center" Style=@($"background:{_theme.Palette.Background}")>
+                    <MudPaper Elevation="0" Height="60vh" Class="d-flex justify-center align-center" >
                         <MudPaper Width="40vw">
                             <MudAlert Severity="Severity.Info">Please login</MudAlert>
                             <Login/>
@@ -41,10 +43,12 @@
 
 @code {
     bool _drawerOpen = true;
+    MudThemeProvider _themeProvider;
+    private bool _darkmode { get; set; } = false;
 
     readonly MudTheme _theme = new MudTheme()
     {
-        Palette = new Palette()
+        Palette = new PaletteLight()
         {
             Primary = new MudColor("#775440"),
             Secondary = new MudColor("#38251a"),
@@ -56,6 +60,31 @@
             Warning = new MudColor("#fed521"),
             Success = new MudColor("#738d4b"),
             Dark = Colors.Grey.Darken3,
+        },
+        PaletteDark = new PaletteDark()
+        {
+            Primary = new MudColor("#B85C38"),
+            Secondary = new MudColor("#38251a"),
+            Tertiary = new MudColor("#8c674c"),
+            AppbarBackground = new MudColor("#1f1b16"),
+            Surface = new MudColor("#29221b"),
+            Background = new MudColor("#1f1b16"),
+            Info = new MudColor("#20455f"),
+            Error = new MudColor("#893c24"),
+            Warning = new MudColor("#fed521"),
+            Success = new MudColor("#738d4b"),
+            Dark = new MudColor("E0C097"),
+            TextPrimary = new MudColor("#f7e8da"),
+            TextSecondary = new MudColor("#f7e8da"),
+            AppbarText = new MudColor("#f7e8da"),
+            DrawerText = new MudColor("#f7e8da"),
+            DrawerIcon = new MudColor("#f7e8da"),
+            DrawerBackground = new MudColor("#29221b"),
+            Divider = new MudColor("#13110f"),
+            DividerLight = new MudColor("#13110f"),
+            TableLines = new MudColor("#13110f"),
+            ActionDefault = new MudColor("#E0C097"),
+            ActionDisabled = new MudColor("#474747"),
         }
     };
 
@@ -63,6 +92,15 @@
     {
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _darkmode = await _themeProvider.GetSystemPreference();
+            StateHasChanged();
+        }
+    }
+
     void DrawerToggle()
     {
         _drawerOpen = !_drawerOpen;
diff --git a/Shifty.App/wwwroot/index.html b/Shifty.App/wwwroot/index.html
index 75bb695..56a8b8e 100755
--- a/Shifty.App/wwwroot/index.html
+++ b/Shifty.App/wwwroot/index.html
@@ -22,7 +22,7 @@
   <body>
     <div
       id="app"
-      style="background: #e9e9e9; display: flex; justify-content: center"
+      style="display: flex; justify-content: center"
     >
       <div style="padding: 20vh">
         <img