Add dark mode

.gitmodules

@@ -0,0 +1,7 @@
+[submodule "MaxPowerLevel/Views/bulma"]
+	path = MaxPowerLevel/Views/bulma
+	url = https://github.com/jgthms/bulma.git
+	branch = 0.9.2
+[submodule "MaxPowerLevel/Views/bulmaswatch"]
+	path = MaxPowerLevel/Views/bulmaswatch
+	url = https://github.com/jenil/bulmaswatch.git

Dockerfile

@@ -1,4 +1,5 @@
 FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
+RUN apt-get update && apt-get install -y ruby-sass
 WORKDIR /app
 
 # copy everything and build app

MaxPowerLevel/MaxPowerLevel.csproj

@@ -1,11 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
 <Project Sdk="Microsoft.NET.Sdk.Web">
-  <PropertyGroup>
-    <TargetFramework>netcoreapp3.1</TargetFramework>
-    <UserSecretsId>ed64c0be-3d6b-4283-b887-4dcb9de6293a</UserSecretsId>
-  </PropertyGroup>
-  <ItemGroup>
-    <PackageReference Include="Humanizer" Version="2.8.26"/>
-    <PackageReference Include="Fractions" Version="4.0.1"/>
-    <PackageReference Include="Destiny2" Version="1.10.0"/>
-  </ItemGroup>
+    <PropertyGroup>
+        <TargetFramework>netcoreapp3.1</TargetFramework>
+        <UserSecretsId>ed64c0be-3d6b-4283-b887-4dcb9de6293a</UserSecretsId>
+    </PropertyGroup>
+    <ItemGroup>
+        <PackageReference Include="Humanizer" Version="2.8.26" />
+        <PackageReference Include="Fractions" Version="4.0.1" />
+        <PackageReference Include="Destiny2" Version="1.10.0" />
+    </ItemGroup>
+    <ItemGroup>
+        <Content Remove="wwwroot\css\bulma-default.scss" />
+        <Content Remove="wwwroot\css\bulma-dark.scss" />
+    </ItemGroup>
+    <ItemGroup>
+        <None Include="wwwroot\css\bulma-default.scss">
+            <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        </None>
+    </ItemGroup>
+    <ItemGroup>
+        <SassFiles Include="**\*.scss" Exclude="Views\bulma\**\*.scss;Views\bulmaswatch\**\*.scss" />
+    </ItemGroup>
+    <Target Name="SassCompile" Inputs="@(SassFiles)" Outputs="@(SassFiles-&gt;'$(OutputPath)%(relativedir)%(Filename).css')" BeforeTargets="Build">
+        <!-- Inspired by https://github.com/delegateas/Delegate.SassBuilder/blob/master/build/Delegate.SassBuilder.targets -->
+        <Message Text="SassCompile: Compiling %(SassFiles.Identity)" Importance="high" />
+        <Exec Command="&quot;sass&quot; &quot;%(SassFiles.Identity)&quot; &quot;$(OutputPath)%(SassFiles.relativedir)%(SassFiles.Filename).css&quot;" />
+    </Target>
+    <Target Name="DeleteCompiledSass" AfterTargets="BeforeClean">
+        <Delete Files="@(SassFiles-&gt;'$(OutputPath)%(relativedir)%(Filename).css')" />
+    </Target>
+    <Target Name="PublishCompiledSass" AfterTargets="AfterPublish">
+        <Copy SourceFiles="@(SassFiles-&gt;'$(OutputPath)%(relativedir)%(Filename).css')" DestinationFiles="@(SassFiles-&gt;'$(PublishDir)%(relativedir)%(Filename).css')" />
+    </Target>
 </Project>

MaxPowerLevel/Views/Shared/_Layout.cshtml

@@ -11,7 +11,20 @@
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.css" />
+    @{ var themeFromCookie = Context.Request.Cookies["theme"];
+        var themeCSS = "bulma-auto.css";
+        // Check cookie value against an explicit whitelist in order to avoid
+        // potential code injection.
+        switch (themeFromCookie)
+        {
+            case "light":
+                themeCSS = "bulma-default.css";
+                break;
+            case "dark":
+                themeCSS = "bulma-dark.css";
+                break;
+        } }
+    <link rel="stylesheet" id="bulma-css" href="~/css/@themeCSS" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link rel="stylesheet" href="~/css/elements.css" />
@@ -28,13 +41,19 @@
                             <i class="fas fa-level-up-alt mr-1"></i> Destiny 2 Utilities
                         </a> 
                     </div>
-                        @if(User.Identity.IsAuthenticated){  
-                        <div class="navbar-end">                      
+                        <div class="navbar-end">
+                            <a class="navbar-item switch-to-dark-mode" title="Dark mode">
+                                <i class="fas fa-moon"></i>
+                            </a>
+                            <a class="navbar-item switch-to-light-mode" title="Light mode">
+                                <i class="fas fa-sun"></i>
+                            </a>                    
+                            @if(User.Identity.IsAuthenticated){  
                             <a class="navbar-item ml-3 is-pulled-right" asp-area="" asp-action="Logout" title="Logout" asp-controller="Account">
                                 <i class="fas fa-sign-out-alt"></i> <span class="ml-1 is-hidden-mobile">Logout</span>
                             </a>
+                            }
                         </div>
-                        }
                 </div>
             </nav>
         </header>
@@ -45,7 +64,7 @@
     </div>
 
 
-    <footer class="footer has-background-light">
+    <footer class="footer">
         <div class="container is-fluid has-text-centered">            
             <p>
                 &copy; 2019-2020 - Andy Schott <a href="https://github.com/andyschott/MaxPowerLevel"><i class="fab fab fa-github-square"></i></a>. 

MaxPowerLevel/wwwroot/css/bulma-auto.css

@@ -0,0 +1,2 @@
+@import 'bulma-default.css' not all and (prefers-color-scheme: dark);
+@import 'bulma-dark.css' (prefers-color-scheme: dark);

MaxPowerLevel/wwwroot/css/bulma-dark.scss

@@ -0,0 +1,25 @@
+@import '../../Views/bulmaswatch/cyborg/variables';
+
+$scheme-main: $grey-darker;
+$body-background-color: #121212;
+$text: $grey-light;
+$border-light: $grey;
+$light: $grey-lighter;
+$link: lighten($link, 10);
+
+@import '../../Views/bulma/bulma';
+@import '../../Views/bulmaswatch/cyborg/overrides';
+
+.panel {
+    background-color: $scheme-main;
+}
+
+table.dash-board-table {
+    td, th {
+        border-left-color: $border-light !important;
+    }
+}
+
+.switch-to-dark-mode {
+    display: none !important;
+}

MaxPowerLevel/wwwroot/css/bulma-default.scss

@@ -0,0 +1,16 @@
+@import '../../Views/bulma/sass/utilities/derived-variables';
+
+$navbar-item-color: #fff;
+$footer-background-color: $light;
+
+@import '../../Views/bulma/bulma';
+
+table.dash-board-table {
+    td, th {
+        border-left-color: #dbdbdb !important;
+    }
+}
+
+.switch-to-light-mode {
+    display: none !important;
+}

MaxPowerLevel/wwwroot/css/site.css

@@ -54,11 +54,6 @@ img.char-icon {
   margin-right: 1rem;
 }
 
-/* Override bulma responsive navbar */
-.navbar-item {
-  color: #fff !important;
-}
-
 .navbar-end {
   justify-content: flex-end !important;
   margin-left: auto !important;
@@ -144,9 +139,9 @@ table.dash-board-table th {
 }
 
 table.dash-board-table { border: none; border-collapse: collapse; }
-table.dash-board-table td { border-left: 1px solid #dbdbdb; }
+table.dash-board-table td { border-left: 1px solid; }
 table.dash-board-table td:first-child { border-left: none; }
-table.dash-board-table th { border-left: 1px solid #dbdbdb; }
+table.dash-board-table th { border-left: 1px solid; }
 table.dash-board-table th:first-child { border-left: none; }
 
 .item-image {
@@ -303,4 +298,4 @@ table.dash-board-table th:first-child { border-left: none; }
 
 .all-chars-link {
   text-align: center;
-}
+}

MaxPowerLevel/wwwroot/js/site.js

@@ -1,4 +1,22 @@
 // Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
 // for details on configuring this project to bundle and minify static web assets.
 
-// Write your JavaScript code.
+// Write your JavaScript code.
+
+function updateCSSFilename(id, filename) {
+    let el = $(document.getElementById(id));
+    let path_re = new RegExp("^((?:.*/)*)([^/?]*)(\\?.*)?$");
+    let url_parts = path_re.exec(el.attr('href'));
+    el.attr('href',
+        (url_parts[1] || '') + filename + (url_parts[3] || ''));
+}
+
+$('.switch-to-dark-mode').click(function() {
+    updateCSSFilename('bulma-css', 'bulma-dark.css');
+    document.cookie = 'theme=dark; path=/';
+});
+
+$('.switch-to-light-mode').click(function() {
+    updateCSSFilename('bulma-css', 'bulma-default.css');
+    document.cookie = 'theme=light; path=/';
+});