add a draft of dark mode (#106, #285)

oioioi/base/static/scss/_footer.scss

@@ -19,3 +19,47 @@ body {
   height: $oioioi-footer-height;
   justify-content: center;
 }
+
+.footer-content {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#dark-mode-toggle {
+  margin-left: auto;
+  position: relative;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 60px;
+  height: 30px;
+  border-radius: 30px;
+  background-color: #a8adad;
+  transition: all 0.5s ease-in;
+  cursor: pointer;
+  z-index: 1;
+}
+
+#dark-mode-toggle::before {
+  content: "";
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #EEE;
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+  transition: all 0.5s ease-in;
+}
+
+#dark-mode-toggle:checked {
+  background: #a8adad;
+}
+
+#dark-mode-toggle:checked::before {
+  background: #333;
+  left: 32px;
+}
+

oioioi/base/templates/base.html

@@ -140,5 +140,27 @@
                     src="{{ mathjax_location }}MathJax.js?config=TeX-AMS-MML_HTMLorMML">
             </script>
        {% endblock %}
+
+   <script src="{{ STATIC_URL }}js/darkreader.min.js"></script>
+   <script>
+       document.addEventListener("DOMContentLoaded", function () {
+           const toggleButton = document.getElementById("dark-mode-toggle");
+
+           if (localStorage.getItem("dark-mode") === "enabled") {
+               DarkReader.enable();
+           }
+
+           toggleButton.addEventListener("click", function () {
+               if (DarkReader.isEnabled()) {
+                   DarkReader.disable();
+                   localStorage.setItem("dark-mode", "disabled");
+               } else {
+                   DarkReader.enable();
+                   localStorage.setItem("dark-mode", "enabled");
+               }
+           });
+       });
+   </script>
+
     </body>
 </html>

oioioi/base/templates/ingredients/footer.html

@@ -1,15 +1,20 @@
 {% load i18n all_with_prefix %}
 <footer class="footer container-fluid">
-  <span class="text-muted">
-    <!--
+  <div class="footer-content">
+    <span class="text-muted">
+<!--
         Please make sure that the following text is visible. We are glad that
         you are using SIO2 and we simply want the other people to learn about
         this system, too. Thank you.
     -->
-    {% blocktrans trimmed %}
-      Powered by <a href="https://www.github.com/sio2project/oioioi">OIOIOI</a>,
-      from the <a href="https://github.com/sio2project">SIO2 Project</a>.
-    {% endblocktrans %}
-  </span>
+      {% blocktrans trimmed %}
+        Powered by <a href="https://www.github.com/sio2project/oioioi">OIOIOI</a>,
+        from the <a href="https://github.com/sio2project">SIO2 Project</a>.
+      {% endblocktrans %}
+    </span>
+  </div>
+  <input type="checkbox" id="dark-mode-toggle">
   {% all_with_prefix extra_footer_ %}
 </footer>
+
+