diff --git a/static/color_mode.js b/static/color_mode.js
new file mode 100644
index 0000000..35f9945
--- /dev/null
+++ b/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');
+ }
+ });
+});
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index e69de29..6ed19d6 100644
--- a/static/style.css
+++ b/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;
+}
diff --git a/templates/footer.html b/templates/footer.html
index 691287b..ab0b96a 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,2 +1,4 @@
+
+