From b0a7aad6b96d96fc11cbf0b4de0f522694afce05 Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Mon, 9 Oct 2023 15:13:41 +0330
Subject: [PATCH] #410 switch between dark and light theme

---
 GanjooRazor/Areas/User/Pages/VerseAdd.cshtml  |  2 +-
 GanjooRazor/Pages/AudioClip.cshtml            |  4 +-
 GanjooRazor/Pages/Books.cshtml                |  2 +-
 GanjooRazor/Pages/Bp.cshtml                   |  2 +-
 GanjooRazor/Pages/Error.cshtml                |  2 +-
 GanjooRazor/Pages/FAQ.cshtml                  |  2 +-
 GanjooRazor/Pages/Golha.cshtml                |  2 +-
 GanjooRazor/Pages/Hashieha.cshtml             |  2 +-
 GanjooRazor/Pages/Index.cshtml                |  4 +-
 GanjooRazor/Pages/Login.cshtml                |  2 +-
 GanjooRazor/Pages/Map.cshtml                  |  4 +-
 GanjooRazor/Pages/Photos.cshtml               |  2 +-
 GanjooRazor/Pages/Pin.cshtml                  |  2 +-
 GanjooRazor/Pages/RecitationsOrder.cshtml     |  2 +-
 GanjooRazor/Pages/ReportComment.cshtml        |  2 +-
 GanjooRazor/Pages/ReportRecitation.cshtml     |  4 +-
 GanjooRazor/Pages/Search.cshtml               |  2 +-
 GanjooRazor/Pages/Shared/_AdminLayout.cshtml  |  2 +-
 .../Pages/Shared/_UserPanelLayout.cshtml      |  2 +-
 GanjooRazor/Pages/Simi.cshtml                 |  2 +-
 GanjooRazor/Pages/Tagged.cshtml               |  2 +-
 GanjooRazor/Pages/_FooterPartial.cshtml       | 15 ++-
 GanjooRazor/Pages/errors/404.cshtml           |  2 +-
 GanjooRazor/Pages/errors/503.cshtml           |  2 +-
 GanjooRazor/wwwroot/css/p8.css                | 12 +++
 GanjooRazor/wwwroot/js/bk.js                  | 99 ++++++++++++++++++-
 26 files changed, 149 insertions(+), 31 deletions(-)

diff --git a/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml b/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
index e47c3cd6..72800bae 100644
--- a/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
+++ b/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
@@ -14,7 +14,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <title>پیشنهاد اضافه شدن مصرع‌های جا افتاده</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <style>
         label {
             width: 100px;
diff --git a/GanjooRazor/Pages/AudioClip.cshtml b/GanjooRazor/Pages/AudioClip.cshtml
index 4ac8e431..55516e9a 100644
--- a/GanjooRazor/Pages/AudioClip.cshtml
+++ b/GanjooRazor/Pages/AudioClip.cshtml
@@ -15,7 +15,7 @@
         گنجور » نمایش خوانش
     </title>
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
-    <link href="~/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script>
@@ -150,7 +150,7 @@
         </p>
 
         <script src="~/lib/jquery/dist/jquery.min.js"></script>
-        <script src="~/js/bk.js?version=40"></script>
+        <script src="~/js/bk.js?version=41"></script>
         <script src="~/js/jplayersupport.js"></script>
         <script src="~/js/vaabd.js?version=5"></script>
         <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
diff --git a/GanjooRazor/Pages/Books.cshtml b/GanjooRazor/Pages/Books.cshtml
index 0b442121..7ea758a5 100644
--- a/GanjooRazor/Pages/Books.cshtml
+++ b/GanjooRazor/Pages/Books.cshtml
@@ -16,7 +16,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Bp.cshtml b/GanjooRazor/Pages/Bp.cshtml
index d7570fcc..68993d3f 100644
--- a/GanjooRazor/Pages/Bp.cshtml
+++ b/GanjooRazor/Pages/Bp.cshtml
@@ -11,7 +11,7 @@
     <title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/Error.cshtml b/GanjooRazor/Pages/Error.cshtml
index 69fc7ce4..4a00b016 100644
--- a/GanjooRazor/Pages/Error.cshtml
+++ b/GanjooRazor/Pages/Error.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/FAQ.cshtml b/GanjooRazor/Pages/FAQ.cshtml
index 38e01cb5..3e829941 100644
--- a/GanjooRazor/Pages/FAQ.cshtml
+++ b/GanjooRazor/Pages/FAQ.cshtml
@@ -16,7 +16,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Golha.cshtml b/GanjooRazor/Pages/Golha.cshtml
index 2a032a60..c6493c59 100644
--- a/GanjooRazor/Pages/Golha.cshtml
+++ b/GanjooRazor/Pages/Golha.cshtml
@@ -10,7 +10,7 @@
     <title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/js/golha.js"></script>
diff --git a/GanjooRazor/Pages/Hashieha.cshtml b/GanjooRazor/Pages/Hashieha.cshtml
index 1bae65b4..0daa37b2 100644
--- a/GanjooRazor/Pages/Hashieha.cshtml
+++ b/GanjooRazor/Pages/Hashieha.cshtml
@@ -18,7 +18,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Index.cshtml b/GanjooRazor/Pages/Index.cshtml
index 7a4849dd..5c82f1d0 100644
--- a/GanjooRazor/Pages/Index.cshtml
+++ b/GanjooRazor/Pages/Index.cshtml
@@ -12,11 +12,11 @@
     <title>
         @Html.Raw(ViewData["Title"])
     </title>
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css">
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon">
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml">
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Login.cshtml b/GanjooRazor/Pages/Login.cshtml
index 6c5034f0..dcc84832 100644
--- a/GanjooRazor/Pages/Login.cshtml
+++ b/GanjooRazor/Pages/Login.cshtml
@@ -13,7 +13,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
 </head>
 <body class="bk-background">
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Map.cshtml b/GanjooRazor/Pages/Map.cshtml
index 76c42536..0580c5b5 100644
--- a/GanjooRazor/Pages/Map.cshtml
+++ b/GanjooRazor/Pages/Map.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="سخنوران و نویسندگان گنجور روی نقشهٔ جغرافیایی" />
     <meta charset="utf-8" />
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="/css/leaflet.css" />
     <style>
         .leaflet-container {
@@ -23,7 +23,7 @@
             font-family: 'Vazir'
         }
     </style>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="~/js/leaflet.js"></script>
     <script src="~/js/leaflet-providers.js"></script>
diff --git a/GanjooRazor/Pages/Photos.cshtml b/GanjooRazor/Pages/Photos.cshtml
index 0db22db5..0aa1cb0a 100644
--- a/GanjooRazor/Pages/Photos.cshtml
+++ b/GanjooRazor/Pages/Photos.cshtml
@@ -15,7 +15,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Pin.cshtml b/GanjooRazor/Pages/Pin.cshtml
index 6af8c417..48aeddaa 100644
--- a/GanjooRazor/Pages/Pin.cshtml
+++ b/GanjooRazor/Pages/Pin.cshtml
@@ -11,7 +11,7 @@
     <title>پیشنهاد شعر مرتبط با تصویر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist//jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/RecitationsOrder.cshtml b/GanjooRazor/Pages/RecitationsOrder.cshtml
index 76e97923..957eec1c 100644
--- a/GanjooRazor/Pages/RecitationsOrder.cshtml
+++ b/GanjooRazor/Pages/RecitationsOrder.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <title>اطلاعات رتبه‌بندی خوانش‌های شعر</title>
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
 
 </head>
 <body>
diff --git a/GanjooRazor/Pages/ReportComment.cshtml b/GanjooRazor/Pages/ReportComment.cshtml
index ef3c49cf..6ee01f86 100644
--- a/GanjooRazor/Pages/ReportComment.cshtml
+++ b/GanjooRazor/Pages/ReportComment.cshtml
@@ -11,7 +11,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <title>درخواست حذف حاشیه</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <style>
         label {
             width: 100px;
diff --git a/GanjooRazor/Pages/ReportRecitation.cshtml b/GanjooRazor/Pages/ReportRecitation.cshtml
index a43932c4..d12f85b9 100644
--- a/GanjooRazor/Pages/ReportRecitation.cshtml
+++ b/GanjooRazor/Pages/ReportRecitation.cshtml
@@ -13,7 +13,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <title>گنجور » گزارش خطا در خوانش</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
     <style>
         label {
@@ -238,7 +238,7 @@
 
 
 
-                <script src="~/js/bk.js?version=40"></script>
+                <script src="~/js/bk.js?version=41"></script>
                 <script src="~/js/jplayersupport.js"></script>
                 <script src="~/js/vaabd.js?version=5"></script>
                 <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
diff --git a/GanjooRazor/Pages/Search.cshtml b/GanjooRazor/Pages/Search.cshtml
index bb9e2e6c..40e77a34 100644
--- a/GanjooRazor/Pages/Search.cshtml
+++ b/GanjooRazor/Pages/Search.cshtml
@@ -21,7 +21,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
index 506820f3..71c39c36 100644
--- a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
@@ -35,7 +35,7 @@
         });
     </script>
 
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         function editBanner(bannerId) {
             var url = '?handler=Edit';
diff --git a/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml b/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
index 73c626da..5926f60a 100644
--- a/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
@@ -32,7 +32,7 @@
         });
     </script>
     <script src="/lib/diff.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
 </head>
 
 <body>
diff --git a/GanjooRazor/Pages/Simi.cshtml b/GanjooRazor/Pages/Simi.cshtml
index cba530ad..596155df 100644
--- a/GanjooRazor/Pages/Simi.cshtml
+++ b/GanjooRazor/Pages/Simi.cshtml
@@ -17,7 +17,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Tagged.cshtml b/GanjooRazor/Pages/Tagged.cshtml
index 20b426e1..04129e51 100644
--- a/GanjooRazor/Pages/Tagged.cshtml
+++ b/GanjooRazor/Pages/Tagged.cshtml
@@ -18,7 +18,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=40"></script>
+    <script src="/js/bk.js?version=41"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/_FooterPartial.cshtml b/GanjooRazor/Pages/_FooterPartial.cshtml
index 8ee9ddee..bf89b378 100644
--- a/GanjooRazor/Pages/_FooterPartial.cshtml
+++ b/GanjooRazor/Pages/_FooterPartial.cshtml
@@ -34,11 +34,20 @@
     </div>
 </div>
 
+<a href="javascript:toggleColorScheme();">
+    <span id="icon-sun"><i class="material-icons">sunny</i></span>
+    <span id="icon-moon"><i class="material-icons">dark_mode</i></span>
+</a>
+
+<script>
+    applyPreferredColorScheme(getPreferredColorScheme());
+</script>
+
 @if (Model.StickyEnabled)
 {
     <script>
         // When the user scrolls the page, execute stickyFunction
-        window.onscroll = function() { stickyFunction() };
+        window.onscroll = function () { stickyFunction() };
 
         // Get the navbar
         var navbar = document.getElementById("main-navbar");
@@ -100,14 +109,14 @@
 
         if (playerScrollLock) {
             const lockButtons = document.querySelectorAll('.recitation-scrollunlock');
-            lockButtons.forEach(function(lockButton) {
+            lockButtons.forEach(function (lockButton) {
                 lockButton.classList.toggle('recitation-scrollunlock');
                 lockButton.classList.toggle('recitation-scrolllock');
             });
         }
         else {
             const lockButtons = document.querySelectorAll('.recitation-scrolllock');
-            lockButtons.forEach(function(lockButtons) {
+            lockButtons.forEach(function (lockButtons) {
                 lockButtons.classList.toggle('recitation-scrollunlock');
                 lockButtons.classList.toggle('recitation-scrolllock');
             });
diff --git a/GanjooRazor/Pages/errors/404.cshtml b/GanjooRazor/Pages/errors/404.cshtml
index cb221d37..291239e9 100644
--- a/GanjooRazor/Pages/errors/404.cshtml
+++ b/GanjooRazor/Pages/errors/404.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/errors/503.cshtml b/GanjooRazor/Pages/errors/503.cshtml
index 31b78319..26d4fc30 100644
--- a/GanjooRazor/Pages/errors/503.cshtml
+++ b/GanjooRazor/Pages/errors/503.cshtml
@@ -15,7 +15,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index 6b43d3bb..b293262a 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -1953,6 +1953,18 @@ fieldset {
         border: 1px solid black;
     }
 
+#icon-sun {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: none;
+}
+
+#icon-moon {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: none;
+}
+
 @media(prefers-color-scheme: dark) {
     body {
         background: rgba(0, 0, 0, 0.9);
diff --git a/GanjooRazor/wwwroot/js/bk.js b/GanjooRazor/wwwroot/js/bk.js
index 67245ace..00c9c341 100644
--- a/GanjooRazor/wwwroot/js/bk.js
+++ b/GanjooRazor/wwwroot/js/bk.js
@@ -1107,4 +1107,101 @@ function loadCatRecitations(catId) {
         },
     });
 
-}
\ No newline at end of file
+}
+
+// https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
+// Return the system level color scheme, but if something's in local storage, return that
+// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
+function getPreferredColorScheme() {
+    let systemScheme = 'light';
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        systemScheme = 'dark';
+    }
+    let chosenScheme = systemScheme;
+
+    if (localStorage.getItem("scheme")) {
+        chosenScheme = localStorage.getItem("scheme");
+    }
+
+    if (systemScheme === chosenScheme) {
+        localStorage.removeItem("scheme");
+    }
+
+    return chosenScheme;
+}
+
+// Write chosen color scheme to local storage
+// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
+function savePreferredColorScheme(scheme) {
+    let systemScheme = 'light';
+
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        systemScheme = 'dark';
+    }
+
+    if (systemScheme === scheme) {
+        localStorage.removeItem("scheme");
+    }
+    else {
+        localStorage.setItem("scheme", scheme);
+    }
+
+}
+
+// Get the current scheme, and apply the opposite
+function toggleColorScheme() {
+    let newScheme = "light";
+    let scheme = getPreferredColorScheme();
+    if (scheme === "light") {
+        newScheme = "dark";
+    }
+
+    applyPreferredColorScheme(newScheme);
+    savePreferredColorScheme(newScheme);
+
+
+}
+
+// Apply the chosen color scheme by traversing stylesheet rules, and applying a medium.
+function applyPreferredColorScheme(scheme) {
+    for (var s = 0; s < document.styleSheets.length; s++) {
+
+        for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
+            rule = document.styleSheets[s].cssRules[i];
+
+
+            if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
+
+                switch (scheme) {
+                    case "light":
+                        rule.media.appendMedium("original-prefers-color-scheme");
+                        if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
+                        if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
+                        break;
+                    case "dark":
+                        rule.media.appendMedium("(prefers-color-scheme: light)");
+                        rule.media.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
+                        break;
+                    default:
+                        rule.media.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
+                        if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
+                        break;
+                }
+            }
+        }
+
+
+    }
+
+    // Change the toggle button to be the opposite of the current scheme
+    if (scheme === "dark") {
+        document.getElementById("icon-sun").style.display = 'inline';
+        document.getElementById("icon-moon").style.display = 'none';
+    } else {
+        document.getElementById("icon-moon").style.display = 'inline';
+        document.getElementById("icon-sun").style.display = 'none';
+    }
+}
+