Test darkmode

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;

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();
+}

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">