From c3d86ae28a5b54f230d421b5de5c04f93e6a2f07 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Sun, 13 Nov 2022 20:39:18 -0600
Subject: [PATCH] Test darkmode

---
 resources/base.scss |  8 ++++++++
 resources/common.js | 15 +++++++++++++++
 templates/base.html |  6 +++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/resources/base.scss b/resources/base.scss
index 752c749..fc07ed2 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -721,6 +721,14 @@ math {
 #nav-lang-icon:hover {
     color: darkblue;
 }
+
+#nav-darkmode-icon {
+    cursor: pointer;
+    &:hover {
+        color: gray;
+    }
+}
+
 .dropdown {
     border-radius: 4px;
     border: 0.5px solid lightgray;
diff --git a/resources/common.js b/resources/common.js
index 6e6e1bf..0b0fb74 100644
--- a/resources/common.js
+++ b/resources/common.js
@@ -410,4 +410,19 @@ $(function() {
         $('#form-lang').submit();
     })
     $('#logout').on('click', () => $('#logout-form').submit());
+
+    $('#nav-darkmode-icon').on('click', function() {
+        if (localStorage.getItem("darkmode") === "true") {
+            localStorage.setItem("darkmode", "false");
+            DarkReader.disable();
+        }
+        else {
+            localStorage.setItem("darkmode", "true");
+            DarkReader.enable();   
+        }
+    })
 });
+
+if (localStorage.getItem("darkmode") === "true") {
+    DarkReader.enable();
+}
diff --git a/templates/base.html b/templates/base.html
index 033340c..991b3f9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -72,6 +72,8 @@
         <script src="{{ JQUERY_JS }}"></script>
     {% endif %}
     <link rel="stylesheet" type="text/css" href="{{ static('markdown.css') }}">
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.58/darkreader.min.js"></script>
     {% compress js %}
         <script>{{ inlinei18n(LANGUAGE_CODE)|safe }}</script>
         {% if INLINE_JQUERY %}
@@ -91,7 +93,6 @@
             });
         </script>
     {% endcompress %}
-    <script src="https://unpkg.com/@popperjs/core@2"></script>
 
     {% block js_media %}{% endblock %}
     {% if request.in_contest %}
@@ -247,6 +248,9 @@
                         {% endfor %}
                     </div>
                 </span>
+                <span title="{{_('Dark Mode')}}">
+                    <span class="icofont-adjust navbar-icon" id="nav-darkmode-icon" aria-hidden="true"></span>
+                </span>
             </span>
             {% if request.user.is_authenticated %}
                 <span id="user-links">