Added support for dark theme

LANCommander/Areas/Identity/Pages/Account/FirstTimeSetup.cshtml

@@ -1,4 +1,6 @@
 @page
+@using LANCommander.Models;
+@using LANCommander.Services;
 @model FirstTimeSetupModel
 @{
     Layout = "/Views/Shared/_LayoutBasic.cshtml";
@@ -11,7 +13,16 @@
     <div class="ant-col ant-col-xs-24 ant-col-md-10">
 
         <div style="text-align: center; margin-bottom: 24px;">
-            <img src="~/static/logo.svg" />
+            @switch (SettingService.GetSettings().Theme)
+            {
+                case LANCommanderTheme.Light:
+                    <img src="~/static/logo.svg" />
+                    break;
+
+                case LANCommanderTheme.Dark:
+                    <img src="~/static/logo-dark.svg" />
+                    break;
+            }
         </div>
 
         <div class="ant-card ant-card-bordered">

LANCommander/Areas/Identity/Pages/Account/Login.cshtml

@@ -1,4 +1,6 @@
 @page
+@using LANCommander.Models;
+@using LANCommander.Services;
 @model LoginModel
 @{ Layout = "/Views/Shared/_LayoutBasic.cshtml"; }
 
@@ -10,7 +12,16 @@
     <div class="ant-col ant-col-xs-24 ant-col-md-10">
 
         <div style="text-align: center; margin-bottom: 24px;">
-            <img src="~/static/logo.svg" />
+            @switch (SettingService.GetSettings().Theme)
+            {
+                case LANCommanderTheme.Light:
+                    <img src="~/static/logo.svg" />
+                    break;
+
+                case LANCommanderTheme.Dark:
+                    <img src="~/static/logo-dark.svg" />
+                    break;
+            }
         </div>
 
         @foreach (var error in ModelState.SelectMany(x => x.Value.Errors))

LANCommander/Areas/Identity/Pages/Account/Register.cshtml

@@ -1,4 +1,6 @@
 @page
+@using LANCommander.Models;
+@using LANCommander.Services;
 @model RegisterModel
 @{ Layout = "/Views/Shared/_LayoutBasic.cshtml"; }
 @{
@@ -9,7 +11,16 @@
     <div class="ant-col ant-col-xs-24 ant-col-md-10">
 
         <div style="text-align: center; margin-bottom: 24px;">
-            <img src="~/static/logo.svg" />
+            @switch (SettingService.GetSettings().Theme)
+            {
+                case LANCommanderTheme.Light:
+                    <img src="~/static/logo.svg" />
+                    break;
+
+                case LANCommanderTheme.Dark:
+                    <img src="~/static/logo-dark.svg" />
+                    break;
+            }
         </div>
 
         <div class="ant-card ant-card-bordered">

LANCommander/Models/Settings.cs

@@ -1,5 +1,11 @@
 namespace LANCommander.Models
 {
+    public enum LANCommanderTheme
+    {
+        Light,
+        Dark
+    }
+
     public class LANCommanderSettings
     {
         public int Port { get; set; } = 1337;
@@ -7,6 +13,7 @@
         public string DatabaseConnectionString { get; set; } = "";
         public string IGDBClientId { get; set; } = "";
         public string IGDBClientSecret { get; set; } = "";
+        public LANCommanderTheme Theme { get; set; }
 
         public LANCommanderAuthenticationSettings Authentication { get; set; } = new LANCommanderAuthenticationSettings();
     }

LANCommander/Pages/Games/Edit.razor

@@ -15,8 +15,8 @@
 @inject NavigationManager NavigationManager
 @inject ModalService ModalService
 
-<Layout Class="site-layout-background" Style="padding: 24px 0;">
+<Layout Class="panel-layout" Style="padding: 24px 0;">
-    <Sider Class="site-layout-background" Width="200">
+    <Sider Width="200">
         <Menu Mode="@MenuMode.Inline" Style="height: 100%;">
             <MenuItem RouterLink="@($"/Games/{Game.Id}/General")">General</MenuItem>
 
@@ -53,7 +53,7 @@
             </PageHeaderExtra>
         </PageHeader>
 
-        <div class="site-layout-content">
+        <div class="panel-layout-content">
             <div data-panel="General">
                 <Form Model="@Game" Layout="@FormLayout.Vertical">
                     <FormItem Label="Title">
@@ -132,28 +132,10 @@
     </Content>
 </Layout>
 
-<style>
-    .site-layout-background {
-        background: #fff;
-    }
-
-    .site-layout-content {
-        padding: 0 24px;
-    }
-
-    .ant-layout-content > .ant-page-header-heading {
-        padding-top: 0;
-    }
-
-    [data-panel] {
-        display: none;
-    }
-</style>
-
 @if (!String.IsNullOrWhiteSpace(Panel))
 {
     <style>
-        [data-panel="@Panel"] {
+        .panel-layout [data-panel="@Panel"] {
             display: block;
         }
     </style>
@@ -161,7 +143,7 @@
 else
 {
     <style>
-        [data-panel="General"] {
+        .panel-layout [data-panel="General"] {
             display: block;
         }
     </style>

LANCommander/Pages/Servers/Edit.razor

@@ -9,8 +9,8 @@
 @inject IMessageService MessageService
 @inject NavigationManager NavigationManager
 
-<Layout Class="site-layout-background" Style="padding: 24px 0;">
+<Layout Class="panel-layout" Style="padding: 24px 0;">
-    <Sider Class="site-layout-background" Width="200">
+    <Sider Width="200">
         <Menu Mode="@MenuMode.Inline" Style="height: 100%;">
             <MenuItem RouterLink="@($"/Servers/{Server.Id}/General")">General</MenuItem>
 
@@ -48,7 +48,7 @@
         </PageHeader>
 
 
-        <div class="site-layout-content">
+        <div class="panel-layout-content">
             @if (Panel == "General" || String.IsNullOrWhiteSpace(Panel))
             {
                 <Form Model="@Server" Layout="@FormLayout.Vertical">
@@ -140,20 +140,6 @@
     </Content>
 </Layout>
 
-<style>
-    .site-layout-background {
-        background: #fff;
-    }
-
-    .site-layout-content {
-        padding: 0 24px;
-    }
-
-    .ant-layout-content > .ant-page-header-heading {
-        padding-top: 0;
-    }
-</style>
-
 @code {
     [Parameter] public Guid Id { get; set; }
     [Parameter] public string Panel { get; set; }

LANCommander/Pages/Settings/General.razor

@@ -1,6 +1,7 @@
 @page "/Settings"
 @page "/Settings/General"
 @using LANCommander.Models;
+@using LANCommander.Extensions;
 @layout SettingsLayout
 @inject SettingService SettingService
 @inject IGDBService IGDBService
@@ -17,6 +18,13 @@
 
         <Text Type="@TextElementType.Secondary">Enabling the beacon will allow clients on the same network to auto-discover the LANCommander address.</Text>
 
+        <FormItem Label="Theme">
+            <Select @bind-Value="context.Theme" TItem="LANCommanderTheme" TItemValue="LANCommanderTheme" DataSource="Enum.GetValues<LANCommanderTheme>()">
+                <LabelTemplate Context="Value">@Value.GetDisplayName()</LabelTemplate>
+                <ItemTemplate Context="Value">@Value.GetDisplayName()</ItemTemplate>
+            </Select>
+        </FormItem>
+
         <Divider Text="IGDB Credentials" />
 
         <Text Type="@TextElementType.Secondary">In order to use IGDB metadata, you need a Twitch developer account. <a href="https://api-docs.igdb.com/#account-creation" target="_blank">Click here</a> for more details.</Text>

LANCommander/Pages/Settings/SettingsLayout.razor

@@ -2,8 +2,8 @@
 @layout MainLayout
 @attribute [Authorize(Roles = "Administrator")]
 
-<Layout Class="site-layout-background" Style="padding: 24px 0;">
+<Layout Class="panel-layout" Style="padding: 24px 0;">
-    <Sider Class="site-layout-background" Width="200">
+    <Sider Width="200">
         <Menu Mode=@MenuMode.Inline Style="height: 100%">
             <MenuItem RouterLink="/Settings/General">General</MenuItem>
             <MenuItem RouterLink="/Settings/Users">Users</MenuItem>
@@ -15,10 +15,4 @@
     <Content>
         @Body
     </Content>
-</Layout>
+</Layout>
-
-<style>
-    .site-layout-background {
-        background: #fff;
-    }
-</style>

LANCommander/Pages/_Layout.cshtml

@@ -1,7 +1,9 @@
-@using Microsoft.AspNetCore.Components.Web
+@using LANCommander.Services;
+@using Microsoft.AspNetCore.Components.Web
 @using LANCommander.Components
 @namespace LANCommander.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@inject SettingService SettingService
 
 <!DOCTYPE html>
 <html lang="en">
@@ -9,11 +11,23 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <base href="~/" />
-        <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
+
+        @switch (SettingService.GetSettings().Theme)
+        {
+            case Models.LANCommanderTheme.Light:
+                <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
+                break;
+
+            case Models.LANCommanderTheme.Dark:
+                <link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
+                break;
+        }
+
         <link href="_content/XtermBlazor/XtermBlazor.css" rel="stylesheet" />
+
         <link href="~/css/site.css" rel="stylesheet" />
     </head>
-    <body>
+    <body data-theme="@SettingService.GetSettings().Theme">
         
 
         <div class="page-wrapper">

LANCommander/Views/Shared/_LayoutBasic.cshtml

@@ -1,11 +1,25 @@
-<!DOCTYPE html>
+@using LANCommander.Services;
+@using LANCommander.Models;
+
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - LANCommander</title>
     <base href="~/" />
-    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
+
+    @switch (SettingService.GetSettings().Theme)
+    {
+        case LANCommanderTheme.Light:
+            <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
+            break;
+
+        case LANCommanderTheme.Dark:
+            <link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
+            break;
+    }
+
     <link href="~/css/site.css" rel="stylesheet" />
 </head>
 <body>

LANCommander/wwwroot/css/site.css

@@ -1,3 +1,23 @@
+.panel-layout {
+    background: #fff;
+}
+
+.panel-layout-content {
+    padding: 0 24px;
+}
+
+.panel-layout .ant-layout-content > .ant-page-header-heading {
+    padding-top: 0;
+}
+
+.panel-layout [data-panel] {
+    display: none;
+}
+
+[data-theme="Dark"] .panel-layout {
+    background: #141414;
+}
+
 .ant-select-selector {
     line-height: 30px;
 }