Update index.html

index.html

@@ -40,6 +40,16 @@ body.dark-mode {
   --gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
 }
 
+/* Ensure all text elements use the color variables */
+h1, h2, h3, h4, h5, h6, p, span, div, label, button {
+  color: var(--text-primary);
+}
+
+/* Override specific elements that need secondary text color */
+.subtitle, .card-counter, .task-badge {
+  color: var(--text-secondary) !important;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -154,6 +164,7 @@ h1 {
   cursor: pointer;
   font-weight: 600;
   font-size: 1rem;
+  color: var(--text-primary);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
@@ -193,6 +204,7 @@ h1 {
   background: var(--bg-tertiary);
   border-radius: 50px;
   cursor: pointer;
+  color: var(--text-primary);
   transition: var(--transition);
 }
 
@@ -278,6 +290,7 @@ input:checked + .slider:before {
   border-radius: 10px;
   cursor: pointer;
   font-weight: 600;
+  color: var(--text-primary);
   transition: var(--transition);
   position: relative;
 }
@@ -385,12 +398,14 @@ input:checked + .slider:before {
 .flashcard-front {
   background: var(--bg-primary);
   border: 3px solid var(--border);
+  color: var(--text-primary);
 }
 
 .flashcard-front p {
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1.4;
+  color: var(--text-primary);
 }
 
 .flashcard-back {
@@ -583,6 +598,7 @@ body.dark-mode .code-editor textarea {
   font-size: 1.1rem;
   margin-bottom: 25px;
   line-height: 1.6;
+  color: var(--text-primary);
 }
 
 .quiz-option {
@@ -594,6 +610,7 @@ body.dark-mode .code-editor textarea {
   cursor: pointer;
   transition: var(--transition);
   background: var(--bg-secondary);
+  color: var(--text-primary);
   font-weight: 500;
 }
 
@@ -701,6 +718,7 @@ body.dark-mode .code-editor textarea {
 .help-content p {
   margin-bottom: 15px;
   line-height: 1.6;
+  color: var(--text-primary);
 }
 
 .close-help {
@@ -797,6 +815,7 @@ footer a:hover {
   position: relative;
   display: inline-block;
   cursor: help;
+  color: var(--text-secondary);
 }
 
 .tooltip .tooltiptext {
@@ -816,6 +835,7 @@ footer a:hover {
   transition: opacity 0.3s;
   box-shadow: var(--shadow-lg);
   font-size: 0.9rem;
+  border: 1px solid var(--border);
 }
 
 .tooltip:hover .tooltiptext {
@@ -1437,4 +1457,4 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 </script>
 </body>
-</html>
+</html>