Adds color mode toggle and CSS theming.

static/color_mode.js

@@ -0,0 +1,26 @@
+
+document.addEventListener('DOMContentLoaded', () => {
+  const themeToggle = document.getElementById('bd-theme');
+
+  // Check if a theme preference is saved in localStorage
+  const savedTheme = localStorage.getItem('theme');
+  
+  if (savedTheme === 'dark') {
+      themeToggle.checked = true;
+      document.documentElement.setAttribute('data-bs-theme', 'dark');
+  } else {
+      themeToggle.checked = false;
+      document.documentElement.setAttribute('data-bs-theme', 'light');
+  }
+
+  // Add event listener to toggle theme on checkbox change
+  themeToggle.addEventListener('change', () => {
+      if (themeToggle.checked) {
+          document.documentElement.setAttribute('data-bs-theme', 'dark');
+          localStorage.setItem('theme', 'dark');
+      } else {
+          document.documentElement.setAttribute('data-bs-theme', 'light');
+          localStorage.setItem('theme', 'light');
+      }
+  });
+});

static/style.css

@@ -0,0 +1,209 @@
+/* LIGHT MODE (default) */
+:root {
+    --bs-body-bg: #f8f9fa; /* Light background */
+    --bs-body-color: #212529; /* Dark text */
+
+    --bs-primary: #007bff;
+    --bs-primary-bg-subtle: #cce5ff;
+    --bs-primary-border-subtle: #80bdff;
+    --bs-primary-text-emphasis: #004085;
+
+    --bs-secondary: #6c757d;
+    --bs-secondary-bg-subtle: #e2e3e5;
+    --bs-secondary-border-subtle: #c8cbcf;
+    --bs-secondary-text-emphasis: #383d41;
+
+    --bs-success: #198754;
+    --bs-success-bg-subtle: #d4edda;
+    --bs-success-border-subtle: #a3cfbb;
+    --bs-success-text-emphasis: #155724;
+
+    --bs-danger: #dc3545;
+    --bs-danger-bg-subtle: #f8d7da;
+    --bs-danger-border-subtle: #f1aeb5;
+    --bs-danger-text-emphasis: #721c24;
+
+    --bs-warning: #ffc107;
+    --bs-warning-bg-subtle: #fff3cd;
+    --bs-warning-border-subtle: #ffeeba;
+    --bs-warning-text-emphasis: #856404;
+
+    --bs-info: #17a2b8;
+    --bs-info-bg-subtle: #d1ecf1;
+    --bs-info-border-subtle: #bee5eb;
+    --bs-info-text-emphasis: #0c5460;
+
+    --bs-light: #f8f9fa;
+    --bs-light-bg-subtle: #ffffff;
+    --bs-light-border-subtle: #d6d8db;
+    --bs-light-text-emphasis: #6c757d;
+
+    --bs-dark: #343a40;
+    --bs-dark-bg-subtle: #212529;
+    --bs-dark-border-subtle: #1d2124;
+    --bs-dark-text-emphasis: #ffffff;
+
+    --bs-border-color: #dee2e6; /* Default border color */
+}
+
+/* DARK MODE */
+[data-bs-theme="dark"] {
+    --bs-body-bg: #121212;
+    --bs-body-color: #e9ecef;
+
+    --bs-primary: #1e90ff;
+    --bs-primary-bg-subtle: #1c2b36;
+    --bs-primary-border-subtle: #374b58;
+    --bs-primary-text-emphasis: #a0c4ff;
+
+    --bs-secondary: #adb5bd;
+    --bs-secondary-bg-subtle: #2d3238;
+    --bs-secondary-border-subtle: #3e444a;
+    --bs-secondary-text-emphasis: #ced4da;
+
+    --bs-success: #00c851;
+    --bs-success-bg-subtle: #1b3425;
+    --bs-success-border-subtle: #3b6147;
+    --bs-success-text-emphasis: #b9f6ca;
+
+    --bs-danger: #ff4444;
+    --bs-danger-bg-subtle: #381717;
+    --bs-danger-border-subtle: #633030;
+    --bs-danger-text-emphasis: #ffcccb;
+
+    --bs-warning: #ffbb33;
+    --bs-warning-bg-subtle: #3a2b19;
+    --bs-warning-border-subtle: #67512e;
+    --bs-warning-text-emphasis: #ffd700;
+
+    --bs-info: #33b5e5;
+    --bs-info-bg-subtle: #182e38;
+    --bs-info-border-subtle: #305564;
+    --bs-info-text-emphasis: #66d1ff;
+
+    --bs-light: #343a40;
+    --bs-light-bg-subtle: #2c3137;
+    --bs-light-border-subtle: #464b50;
+    --bs-light-text-emphasis: #e9ecef;
+
+    --bs-dark: #ffffff;
+    --bs-dark-bg-subtle: #f8f9fa;
+    --bs-dark-border-subtle: #e9ecef;
+    --bs-dark-text-emphasis: #121212;
+
+    --bs-border-color: #495057;
+}
+
+
+[data-bs-theme="dark"] .shadow {
+    box-shadow: var(--bs-box-shadow) !important;
+}
+
+[data-bs-theme="dark"] .shadow-sm {
+    box-shadow: var(--bs-box-shadow-sm) !important;
+}
+
+[data-bs-theme="dark"] .shadow-lg {
+    box-shadow: var(--bs-box-shadow-lg) !important;
+}
+
+:root {
+    --bs-primary: var(--primary);
+    --bs-secondary: var(--secondary);
+    --bs-body-bg: var(--background);
+    --bs-body-color: var(--text-color);
+}
+
+[data-bs-theme="dark"] {
+    --bs-primary: var(--primary);
+    --bs-secondary: var(--secondary);
+    --bs-body-bg: var(--background);
+    --bs-body-color: var(--text-color);
+}
+
+
+/* Dark Mode Toggle Button */
+/* Hide the default checkbox */
+#color-mode-toggle input[type=checkbox] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+
+
+/* Style the switch */
+#color-mode-toggle label {
+    cursor: pointer;
+    width: 70px;
+    height: 30px;
+    background: grey;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 30px;
+    position: relative;
+    padding: 5px 15px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+/* The moving toggle circle */
+#color-mode-toggle label:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    transition: 0.3s;
+}
+
+/* Sun and Moon Icons */
+.icon {
+    font-size: 15px;
+    position: absolute;
+    transition: 0.3s;
+}
+
+/* Position Sun on the left */
+.sun {
+    left: 10px;
+    /* color: var(--bs-dark) */
+    color: var(--sun-color);
+}
+
+/* Position Moon on the right */
+.moon {
+    right: 10px;
+    /* color: var(--bs-light); */
+    color: var(--sun-color);
+}
+
+/* Move the toggle circle when checked */
+#color-mode-toggle input:checked + label {
+    background: var(--bs-light);
+}
+
+#color-mode-toggle input:checked + label:after {
+    left: calc(100% - 25px);
+    background: var(--bs-dark);
+}
+
+/* Hide moon when in dark mode */
+#color-mode-toggle input:checked + label .sun {
+    opacity: 100;
+}
+
+#color-mode-toggle input:checked + label .moon {
+    opacity: 0;
+}
+
+/* Hide sun when in light mode */
+#color-mode-toggle input:not(:checked) + label .moon {
+    opacity: 100;
+}
+
+#color-mode-toggle  input:not(:checked) + label .sun {
+    opacity: 0;
+}

templates/footer.html

@@ -1,2 +1,4 @@
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{url_for('static', filename='color_mode.js')}}"></script>
 </body>
 </html>

templates/header.html

@@ -7,17 +7,25 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     {{ bootstrap.load_css() }}
-    <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <!-- color mode js-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
 </head>
 <body>
     <header>
         <h1>Torn User Activity Scraper</h1>
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <nav class="navbar navbar-expand-lg">
             <div class="navbar-nav mr-auto">
                 {% from 'bootstrap4/nav.html' import render_nav_item %}
                 {{ render_nav_item('index', 'Home') }}
                 {{ render_nav_item('results', 'Results') }}
                 {{ render_nav_item('download_results', 'Download Results') }}
             </div>
+            <div class="navbar-nav ml-auto" id="color-mode-toggle">
+                <input type="checkbox" id="bd-theme" />
+                <label for="bd-theme">
+                    <span class="icon sun"><i class="bi bi-brightness-high"></i></span>
+                    <span class="icon moon"><i class="bi bi-moon-stars"></i></span>            </div>
+            </label>
         </nav>
     </header>