Implement light mode toggle

tylermaginnis · Sep 15, 2024 · c3abe49 · c3abe49
1 parent 121ba52
commit c3abe49
Showing 1 changed file with 132 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -144,6 +144,65 @@
       margin-bottom: 10px;
       color: #66ff66;
     }
+    body.light-mode label { color: #3e9c3e; font-weight: bold; }
+    body.light-mode .visual-section { color: #3e9c3e; font-weight:bold; }
+    body.light-mode .visual-section h3 { color: #3e9c3e; font-weight:bold; }
+    body.light-mode {
+    background-color: #ffffff;
+    color: #4b0082; /* Dark purple */
+  }
+  body.light-mode h1 {
+    color: #4b0082; /* Dark purple */
+    background-color: #f0f0f0;
+    border-bottom: 2px solid #4b0082; /* Dark purple */
+  }
+  body.light-mode .controls,
+  body.light-mode .visual-feedback,
+  body.light-mode #console {
+    background-color: #f0f0f0;
+    border: 1px solid #4b0082; /* Dark purple */
+  }
+  body.light-mode button {
+    background-color: #dddddd;
+    color: #4b0082; /* Dark purple */
+    border: 1px solid #4b0082; /* Dark purple */
+  }
+  body.light-mode button:hover:not(:disabled) {
+    background-color: #cccccc;
+  }
+  body.light-mode #visualizationCanvas {
+    background-color: #f0f0f0;
+    border: 1px solid #4b0082; /* Dark purple */
+  }
+  body.light-mode .log-info {
+    color: #4b0082; /* Dark purple */
+  }
+  body.light-mode .log-warn {
+    color: #ffcc00; /* Yellow */
+  }
+  body.light-mode .log-error {
+    color: #ff0000; /* Red */
+  }
+  body.light-mode .ascii-box {
+    border: 1px solid #4b0082; /* Dark purple */
+    color: #3e9c3e; font-weight:bold; /* green */
+
+  }
+  body.light-mode .chord {
+    color: #ff66ff; font-weight: bold; /* Pink */
+  }
+  body.light-mode .frequency {
+    color: #5192b3; font-weight:bold; /* blue */
+  }
+  body.light-mode .rhythm {
+    color: #898939; font-weight:bold; /* Light yellow */
+  }
+  body.light-mode .melody-strategy {
+    color: #3e9c3e; font-weight:bold; /* green */
+  }
+  body.light-mode .frequency {
+    color: #4b626d; font-weight:bold; /* blue */
+  }
   </style>
 </head>
 <body>
@@ -208,6 +267,11 @@ <h1>Advanced Organ Composition with Markov Chains</h1>
       <button id="muteChords">Mute Chords</button>
       <button id="muteMelody">Mute Melody</button>
     </div>
+
+    <div class="control-group">
+      <label for="darkModeToggle">Dark Mode</label>
+      <input type="checkbox" id="darkModeToggle">
+    </div>
   </div>
 
   <!-- Play and Stop Buttons -->
@@ -822,6 +886,74 @@ <h3>Strategies</h3>
   // Start visualization when audio context is initialized
   document.body.addEventListener('click', startVisualization, { once: true });
 
+  const darkModeToggle = document.getElementById('darkModeToggle');
+
+
+// Load user preferences
+document.addEventListener('DOMContentLoaded', () => {
+  const darkMode = localStorage.getItem('darkMode') === 'true';
+  document.body.classList.toggle('light-mode', !darkMode);
+  darkModeToggle.checked = darkMode;
+  updateVisualizerColors(darkMode);
+  // Load other preferences...
+});
+
+// Save user preferences
+darkModeToggle.addEventListener('change', () => {
+  const darkMode = darkModeToggle.checked;
+  document.body.classList.toggle('light-mode', !darkMode);
+  localStorage.setItem('darkMode', darkMode);
+  updateVisualizerColors(darkMode);
+  logToConsole(`Dark Mode ${darkMode ? 'Enabled' : 'Disabled'}`, 'info');
+});
+
+// Function to update visualizer colors based on mode
+function updateVisualizerColors(darkMode) {
+  if (darkMode) {
+    canvasContext.fillStyle = 'rgb(17, 17, 17)'; // Dark background
+    canvasContext.strokeStyle = 'rgb(0, 255, 0)'; // Green lines
+  } else {
+    canvasContext.fillStyle = 'rgb(240, 240, 240)'; // Light background
+    canvasContext.strokeStyle = 'rgb(75, 0, 130)'; // Dark purple lines
+  }
+}
+
+// Ensure drawVisualization is called continuously
+function drawVisualization() {
+  if (!analyser) return;
+  requestAnimationFrame(drawVisualization);
+  const bufferLength = analyser.frequencyBinCount;
+  const dataArray = new Uint8Array(bufferLength);
+  analyser.getByteTimeDomainData(dataArray);
+
+  canvasContext.fillRect(0, 0, canvas.width, canvas.height);
+
+  canvasContext.lineWidth = 2;
+  canvasContext.beginPath();
+
+  const sliceWidth = canvas.width * 1.0 / bufferLength;
+  let x = 0;
+
+  for (let i = 0; i < bufferLength; i++) {
+    const v = dataArray[i] / 128.0;
+    const y = v * canvas.height / 2;
+
+    if (i === 0) {
+      canvasContext.moveTo(x, y);
+    } else {
+      canvasContext.lineTo(x, y);
+    }
+
+    x += sliceWidth;
+  }
+
+  canvasContext.lineTo(canvas.width, canvas.height / 2);
+  canvasContext.stroke();
+}
+
+// Start visualization when audio context is initialized
+document.body.addEventListener('click', startVisualization, { once: true });
+
   </script>
 </body>
 </html>