Fixed #2. Implemented dark theme :D

GlitchedPolygons · Dec 16, 2023 · ac97dca · ac97dca
1 parent c96d114
commit ac97dca
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/GlitchedPolygons.GlitchEd25519.BlazorWebApp/Layout/MainLayout.razor b/GlitchedPolygons.GlitchEd25519.BlazorWebApp/Layout/MainLayout.razor
@@ -1,5 +1,13 @@
 @inherits LayoutComponentBase
 
+@inject IJSRuntime JSRuntime
+
+@if (darkTheme)
+{
+    <link href="css/dark.css"
+          rel="stylesheet" />
+}
+
 <div class="page">
 
     <div class="sidebar">
@@ -8,7 +16,8 @@
 
     <main>
 
-        <div id="topnavbar" class="top-row px-4">
+        <div id="topnavbar"
+             class="top-row px-4">
 
             <a href="https://glitchedpolygons.com"
                target="_blank">
@@ -23,4 +32,14 @@
 
     </main>
 
-</div>
+</div>
+
+@code
+{
+    private bool darkTheme = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        darkTheme = await JSRuntime.InvokeAsync<bool>("UserHasDarkMode");
+    }
+}
diff --git a/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/css/bootstrap/darkly/bootstrap.min.css b/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/css/bootstrap/darkly/bootstrap.min.css
diff --git a/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/css/dark.css b/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/css/dark.css
@@ -50,10 +50,10 @@ table, tr, th, td, thead, tbody {
 }
 
 code {
-    color: #9d3eeb
+    color: #a05eff;
 }
 
-.form-control {
+.form-control, .form-control[readonly] {
     color: #d5d5d5;
     border-color: #4e4e4e;
     background-color: #1d1d1d;

diff --git a/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/index.html b/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/index.html
@@ -13,7 +13,6 @@
     <link rel="manifest" href="ed25519.webmanifest" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
     <link rel="stylesheet" href="css/app.css"/>
-<!--    <link rel="stylesheet" href="css/dark.css"/>-->
     <link href="GlitchedPolygons.GlitchEd25519.BlazorWebApp.styles.css" rel="stylesheet"/>
 </head>
 
@@ -47,6 +46,8 @@
 
 <script src="js/keygen.js"></script>
 
+<script src="js/darkness.js"></script>
+
 <script src="js/copybutton.js"></script>
 
 </body>

diff --git a/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/js/darkness.js b/GlitchedPolygons.GlitchEd25519.BlazorWebApp/wwwroot/js/darkness.js
@@ -0,0 +1,10 @@
+
+function UserHasDarkMode() 
+{
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) 
+    {
+        return true;
+    }
+
+    return false;
+}