dark

static/css/styles.css

@@ -7,6 +7,15 @@
   --button-min-width: 80px;
   --button-height: 30px;
   --button-font-size: 12px;
+  --bg-primary: #ecf0f1;
+  --bg-secondary: #ffffff;
+  --text-primary: #34495e;
+  --text-secondary: #2c3e50;
+  --border-color: #ddd;
+  --flashcard-bg: #ffffff;
+  --highlight-bg: rgba(52, 152, 219, 0.3);
+  --modal-bg: rgba(0, 0, 0, 0.4);
+  --modal-content-bg: #fefefe;
 }
 
 body {
@@ -17,9 +26,10 @@ body {
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
   font-size: 80%;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 #top-bar {
@@ -27,8 +37,8 @@ body {
   justify-content: space-between;
   align-items: center;
   padding: 15px;
-  background-color: rgba(52, 152, 219, 0.4);
-  color: white;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
 }
@@ -91,8 +101,10 @@ body {
   padding: 10px;
   box-sizing: border-box;
   overflow-y: auto;
-  background-color: white;
+  background-color: var(--bg-secondary);
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 #file-input,
@@ -113,9 +125,9 @@ body {
 .mode-btn {
   flex: 1;
   padding: 5px;
-  border: 1px solid var(--secondary-color);
-  background-color: white;
-  color: var(--secondary-color);
+  border: 1px solid var(--text-secondary);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -125,13 +137,13 @@ body {
 }
 
 .mode-btn.selected {
-  background-color: var(--secondary-color);
-  color: white;
+  background-color: var(--text-secondary);
+  color: var(--bg-secondary);
   transform: scale(1.05);
 }
 
 .mode-btn:hover:not(.selected) {
-  background-color: var(--background-color);
+  background-color: var(--bg-primary);
 }
 
 #page-navigation {
@@ -149,6 +161,8 @@ body {
 
 #settings-panel {
   margin-top: 15px;
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color);
 }
 
 #api-key-input,
@@ -156,13 +170,15 @@ body {
   margin-bottom: 15px;
   width: 100%;
   padding: 8px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color);
   border-radius: 3px;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 #pdf-viewer {
-  border: 1px solid #ddd;
-  background-color: white;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
@@ -191,7 +207,7 @@ body {
 }
 
 ::selection {
-  background: rgba(52, 152, 219, 0.3);
+  background: var(--highlight-bg);
 }
 
 .highlight {
@@ -203,9 +219,11 @@ body {
   height: 150px;
   margin-bottom: 15px;
   padding: 10px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color);
   border-radius: 3px;
   resize: vertical;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 #explain-prompt, #language-prompt {
@@ -220,17 +238,23 @@ body {
 .flashcard {
   margin-bottom: 8px;
   padding: 10px;
-  border: 1px solid #ddd;
-  background-color: white;
+  border: 1px solid var(--border-color);
+  background-color: var(--flashcard-bg);
   border-radius: 3px;
   transition: box-shadow 0.3s ease;
   font-size: 1em;
+  color: var(--text-primary);
 }
 
 .flashcard:hover {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
+.dark-mode .flashcard {
+  border-color: var(--text-secondary);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
 .explanation-content {
   white-space: pre-wrap;
   text-align: left;
@@ -257,32 +281,13 @@ body {
   background-color: #c0392b;
 }
 
-#recent-pdfs {
-  margin-top: 20px;
-}
-
-#recent-pdfs h3 {
-  margin-bottom: 10px;
-  color: var(--secondary-color);
-}
-
-#recent-pdfs ul {
-  padding-left: 20px;
-  list-style-type: none;
-}
-
-#recent-pdfs li {
-  margin-bottom: 5px;
-}
-
-#recent-pdfs a {
-  color: var(--primary-color);
-  text-decoration: none;
-  transition: color 0.3s ease;
+.dark-mode .remove-btn {
+  background-color: #e74c3c;
+  opacity: 0.9;
 }
 
-#recent-pdfs a:hover {
-  color: #2980b9;
+.dark-mode .remove-btn:hover {
+  opacity: 1;
 }
 
 /* Modal styles */
@@ -295,11 +300,11 @@ body {
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0,0,0,0.4);
+  background-color: var(--modal-bg);
 }
 
 .modal-content {
-  background-color: #fefefe;
+  background-color: var(--modal-content-bg);
   margin: 5% auto;
   padding: 20px;
   border: 1px solid #888;
@@ -307,6 +312,7 @@ body {
   max-width: 800px;
   max-height: 80vh;
   overflow-y: auto;
+  color: var(--text-primary);
 }
 
 .close {
@@ -538,13 +544,14 @@ body {
 #recent-files {
     margin-top: 20px;
     padding: 15px;
-    background: #f8f8f8;
+    background-color: var(--bg-secondary);
     border-radius: 5px;
+    border: 1px solid var(--border-color);
 }
 
 #recent-files h3 {
     margin: 0 0 15px 0;
-    color: #333;
+    color: var(--text-primary);
     font-size: 1.1em;
 }
 
@@ -557,25 +564,37 @@ body {
 #file-list li {
     margin-bottom: 10px;
     padding: 8px;
-    background: white;
+    background-color: var(--flashcard-bg);
     border-radius: 4px;
-    border: 1px solid #eee;
-    transition: background-color 0.2s;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
 }
 
 #file-list li:hover {
-    background-color: #f0f0f0;
+    background-color: var(--bg-primary);
+    transform: translateX(5px);
 }
 
 #file-list a {
     text-decoration: none;
-    color: #2196F3;
+    color: var(--primary-color);
     display: block;
     width: 100%;
 }
 
-#file-list a:hover {
-    color: #1976D2;
+.dark-mode #file-list a {
+    color: #5dade2; /* Lighter blue for better visibility in dark mode */
+}
+
+.dark-mode #file-list li:hover {
+    border-color: var(--text-secondary);
+}
+
+/* Date styling in recent files */
+#file-list .file-date {
+    color: var(--text-secondary);
+    font-size: 0.9em;
+    margin-left: 5px;
 }
 
 /* Dropdown styles for collection actions */
@@ -669,3 +688,43 @@ body {
 .show {
   display: block;
 }
+
+/* Dark mode colors */
+.dark-mode {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --text-primary: #ffffff;
+    --text-secondary: #e0e0e0;
+    --border-color: #404040;
+    --flashcard-bg: #333333;
+    --highlight-bg: rgba(52, 152, 219, 0.5);
+    --modal-bg: rgba(0, 0, 0, 0.7);
+    --modal-content-bg: #2d2d2d;
+}
+
+/* Add dark mode toggle button styles */
+#dark-mode-toggle {
+    cursor: pointer;
+    font-size: 24px;
+    margin: 0 15px;
+    transition: transform 0.3s ease;
+}
+
+#dark-mode-toggle:hover {
+    transform: scale(1.1);
+}
+
+/* Dark mode specific adjustments for the dropdown */
+.dark-mode .dropdown-content {
+    background-color: var(--bg-secondary);
+    border-color: var(--border-color);
+}
+
+.dark-mode .dropdown-content a {
+    color: var(--text-primary);
+    border-bottom-color: var(--border-color);
+}
+
+.dark-mode .dropdown-content a:hover {
+    background-color: var(--bg-primary);
+}

templates/index.html

@@ -25,6 +25,7 @@
     <div id="right-panel">
         <div id="top-controls">
             <div id="settings-icon">⚙️</div>
+            <div id="dark-mode-toggle">🌙</div>
             <div id="page-navigation">
                 <button id="zoom-out-btn">-</button>
                 <button id="zoom-in-btn">+</button>
@@ -1406,6 +1407,23 @@
                 exportToJSON();
             });
         });
+
+        // Dark mode toggle functionality
+        const darkModeToggle = document.getElementById('dark-mode-toggle');
+        let isDarkMode = localStorage.getItem('darkMode') === 'true';
+
+        // Initialize dark mode state
+        if (isDarkMode) {
+            document.body.classList.add('dark-mode');
+            darkModeToggle.textContent = '☀️';
+        }
+
+        darkModeToggle.addEventListener('click', () => {
+            isDarkMode = !isDarkMode;
+            document.body.classList.toggle('dark-mode');
+            darkModeToggle.textContent = isDarkMode ? '☀️' : '🌙';
+            localStorage.setItem('darkMode', isDarkMode);
+        });
     </script>
 </body>