Adds dark mode

AnalogIO · Apr 16, 2024 · 106c70b · 106c70b
1 parent 11d9448
commit 106c70b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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);
     }
 }
diff --git 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,13 +60,47 @@
             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"),
         }
     };
 
     protected override void OnInitialized()
     {
     }
 
+    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
@@ -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