Merge pull request #78 from jdabtieu/dark-mode

Dark mode

Author: jdabtieu

src/assets/css/style.css

@@ -6,7 +6,7 @@
 }
 
 .see-more-wrapper {
-    background-color: #ffffff;
+    background-color: inherit;
     position: absolute;
     bottom: 0;
     padding: 4px 0;
@@ -137,3 +137,46 @@ a {
 .svg-green {
     filter: invert(57%) sepia(58%) saturate(3606%) hue-rotate(83deg) brightness(118%) contrast(125%);
 }
+
+/****************** DARK MODE ********************************/
+.dark {
+    background: #2f2f2f;
+    background-color: #2f2f2f;
+    color: #fff;
+}
+
+.dark .card {
+    border: 1px solid rgba(255, 255, 255, .125);
+    background-color: #2f2f2f;
+}
+
+.dark .form-control:focus {
+    background-color: #2f2f2f;
+    color: #fff;
+}
+
+.dark .form-control {
+    background-color: #2f2f2f;
+    color: #fff;
+}
+
+.dark tr {
+    background-color: #2f2f2f;
+    color: #fff;
+}
+
+.dark tr:hover {
+    color: #fff!important;
+}
+
+.dark .page-link {
+    background-color: #2f2f2f!important;
+}
+
+.dark .page-item.active .page-link {
+    background-color: #0d6efd!important;
+}
+
+.dark-toggle:checked {
+    background-color: #2f2f2f;
+}

src/assets/js/darkMode.js

@@ -0,0 +1,45 @@
+function setCookie(name, val, exp) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exp*24*60*60*1000)); // expiry in days
+    var expires = "expires=" + d.toUTCString();
+    document.cookie = name + "=" + val + ";" + expires + ";path=/";
+}
+
+function getCookie(name) {
+    name += "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.split(';');
+    for(var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+if (getCookie("darkMode") == 1) {
+    enableDark();
+    document.querySelector(".dark-toggle").setAttribute("checked", "");
+}
+
+function toggleDark() {
+    if (getCookie("darkMode") == 1) {
+        disableDark();
+        setCookie("darkMode", 0, 7);
+    } else {
+        enableDark();
+        setCookie("darkMode", 1, 7);
+    }
+}
+
+
+function enableDark() {
+    document.body.classList.add("dark");
+}
+function disableDark() {
+    document.body.classList.remove("dark");
+}

src/templates/error/maintenance.html

@@ -27,5 +27,6 @@ <h1>Under Maintenance</h1>
             <hr>
             <p class="text-center">© 2020, {{ CLUB_NAME }}. Source code available <a href="https://github.com/jdabtieu/CTFOJ">here</a>.</p>
         </footer>
+        <script src="/assets/js/darkMode.js"></script>
     </body>
 </html>

src/templates/layout.html

@@ -31,12 +31,18 @@
                             {% endif %}
                         </ul>
                         <ul class="navbar-nav">
+                            <div class="form-check form-switch nav-link">
+                                <input class="form-check-input dark-toggle" onclick="toggleDark()" type="checkbox">
+                            </div>
                             <li class="nav-link white">Welcome, {{ session.username }}</li>
                             <li><a class="nav-link" href="/settings">Settings</a></li>
                             <li><a class="nav-link" href="/logout">Log Out</a></li>
                         </ul>
                     {% else %}
                         <ul class="navbar-nav ms-auto">
+                            <div class="form-check form-switch nav-link">
+                                <input class="form-check-input dark-toggle" onclick="toggleDark()" type="checkbox">
+                            </div>
                             <li><a class="nav-link" href="/register">Register</a></li>
                             <li><a class="nav-link" href="/login">Log In</a></li>
                         </ul>
@@ -63,6 +69,7 @@
             <p class="text-center">© 2020, {{ CLUB_NAME }}. <a href="https://github.com/jdabtieu/CTFOJ">Source Code</a> - <a href="/terms">Terms of Service</a> - <a href="/privacy">Privacy Policy</a></p>
         </footer>
 
+        <script src="/assets/js/darkMode.js"></script>
         <!-- TODO: Remove jQuery -->
         <script src="/assets/js/jquery.min.js"></script>
         <script src="/assets/js/showdown.min.js"></script>