From 9f72b037819419b5286303935133eb5afeb979e6 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Wed, 14 Apr 2021 19:38:23 +0700
Subject: [PATCH] feat(theme): add dark mode

With version 3, Yuika now uses Shian as a basis of styling. Since
Shian was written with both light and dark themes in mind, this
means that the theme now is able to support switching between them.

This commit implements a dark theme toggle that will switch the
site between light and dark themes.
---
 assets/js/dark-mode.js  | 14 ++++++++++++++
 partials/navigation.hbs |  5 +++++
 2 files changed, 19 insertions(+)
 create mode 100644 assets/js/dark-mode.js

diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
new file mode 100644
index 0000000..41e1899
--- /dev/null
+++ b/assets/js/dark-mode.js
@@ -0,0 +1,14 @@
+
+$(document).ready(function () {
+    $("#darkMode").click(function () {
+        if (window.document.body.getAttribute("data-theme") != "dark") {
+            window.document.body.setAttribute("data-theme", "dark");
+            $("#darkMode i").text("brightness_high");
+            $("#darkMode p").text("Light Mode");
+        } else {
+            window.document.body.setAttribute("data-theme", "light");
+            $("#darkMode i").text("brightness_low");
+            $("#darkMode p").text("Dark Mode");
+        }
+    })
+});
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
index 916ee6a..1bf0073 100644
--- a/partials/navigation.hbs
+++ b/partials/navigation.hbs
@@ -6,4 +6,9 @@
         </a>
     </div>
     {{/foreach}}
+
+    <div class="menu__item" id="darkMode">
+        <i class="material-icons md-24">brightness_low</i>
+        <p class="menu__text">Dark Mode</p>
+    </div>
 </div>
\ No newline at end of file