From c8f28d4287e60d0f4d53f0c865aa5be8cf9c3e22 Mon Sep 17 00:00:00 2001
From: donfiguerres <donfiguerres@github.com>
Date: Tue, 25 May 2021 03:08:15 +0800
Subject: [PATCH] Initial commit for dark theme.

---
 layouts/partials/navigators/navbar.html       |  3 ++
 .../partials/navigators/theme-selector.html   | 10 ++++
 layouts/partials/scripts.html                 |  3 ++
 static/js/darkmode.js                         | 53 +++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 layouts/partials/navigators/theme-selector.html
 create mode 100644 static/js/darkmode.js

diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index df29cdc..789e77e 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -115,6 +115,9 @@
         {{ if .IsTranslated }}
           {{ partial "navigators/lang-selector.html" . }}
         {{ end }}
+        {{ if site.Params.darkTheme.enable }}
+          {{ partial "navigators/theme-selector.html" . }}
+        {{ end }}
       </ul>
     </div>
   </div>
diff --git a/layouts/partials/navigators/theme-selector.html b/layouts/partials/navigators/theme-selector.html
new file mode 100644
index 0000000..f7dadcd
--- /dev/null
+++ b/layouts/partials/navigators/theme-selector.html
@@ -0,0 +1,10 @@
+<li class="nav-item dropdown">
+<a class="nav-link dropdown-toggle"  href="#" id="themeSelector"
+    default-theme=" {{ site.Params.darkTheme.default }} " role="button"
+    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Theme</a>
+<div class="dropdown-menu" aria-labelledby="themeSelector">
+    <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">Light</a>
+    <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">Dark</a>
+    <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">System</a>
+</div>
+</li>
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index f4d92d9..2d0870a 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -5,3 +5,6 @@
 <script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>
+
+<script type="text/javascript" src="{{ "/js/node_modules/darkreader/darkreader.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/darkmode.js" | relURL }}"></script>
diff --git a/static/js/darkmode.js b/static/js/darkmode.js
new file mode 100644
index 0000000..e78a6c9
--- /dev/null
+++ b/static/js/darkmode.js
@@ -0,0 +1,53 @@
+function enableDarkTheme() {
+  localStorage.setItem('color-scheme', "dark");
+  DarkReader.enable({
+      brightness: 100,
+      contrast: 90,
+      sepia: 10
+  });
+}
+
+function enableLightTheme() {
+  localStorage.setItem('color-scheme', "light");
+  DarkReader.disable();
+}
+
+function useSystemTheme() {
+  localStorage.setItem('color-scheme', "system");
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    enableDarkTheme();
+  } else {
+    enableLightTheme();
+  }
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    if (e.matches) {
+      enableDarkTheme();
+    } else {
+      enableLightTheme();
+    }
+  });
+}
+
+// Initialize. Use dark as default.
+function initializeColorScheme() {
+  // We're using the themeSelector attributes as a workaround for setting up
+  // the default coor scheme since we don't want to complicate this further by
+  // creating custom javascript output in Hugo.
+  themeSelector = document.getElementById("themeSelector");
+  defaultColorScheme = themeSelector.getAttribute('default-theme');
+  // If the user has already selected a preferred theme then use that instead
+  // of the default theme. Also, the default theme gets loaded to localStorage
+  // on the first visit.
+  if (!localStorage.getItem('color-scheme'))
+    localStorage.setItem('color-scheme', defaultColorScheme);
+  storedColorScheme = localStorage.getItem('color-scheme');
+  if (storedColorScheme == "light") {
+    enableLightTheme();
+  } else if (storedColorScheme == "system") {
+    useSystemTheme();
+  } else {
+    // Use dark theme as fallback since it is my default.
+    enableDarkTheme();
+  }
+}
+initializeColorScheme()