Feat: update website to prevent ugliness

website/public/script.js

@@ -0,0 +1,54 @@
+const toggle = document.getElementById('theme-toggle');
+const root = document.documentElement;
+const stored = localStorage.getItem('theme');
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const isLight = stored ? stored === 'light' : !prefersDark;
+
+if (isLight) {
+    root.classList.add('light');
+}
+toggle.textContent = isLight ? 'DARK' : 'LIGHT';
+
+toggle.addEventListener('click', () => {
+    root.classList.toggle('light');
+    const light = root.classList.contains('light');
+    toggle.textContent = light ? 'DARK' : 'LIGHT';
+    localStorage.setItem('theme', light ? 'light' : 'dark');
+    highlightForth();
+});
+
+function highlightForth() {
+    const words = ['note', 'sound', 'lpf', 'hpf', 'chorus', 'verb', 'distort', 'speed'];
+    const notes = ['c4'];
+    const chords = ['min7'];
+    const samples = ['kkick', 'sine', 'saw'];
+    const isLight = document.documentElement.classList.contains('light');
+    const numColor = isLight ? '#a855f7' : '#e8a0e8';
+    const dotColor = isLight ? '#0284c7' : '#7dd3fc';
+    const wordColor = isLight ? '#65a30d' : '#a3e635';
+    const noteColor = isLight ? '#d97706' : '#fbbf24';
+    const chordColor = isLight ? '#15803d' : '#4ade80';
+    const sampleColor = isLight ? '#dc2626' : '#f87171';
+    document.querySelectorAll('pre').forEach(pre => {
+        const text = pre.dataset.source || pre.textContent;
+        pre.dataset.source = text;
+        pre.innerHTML = text
+            .split(/(\s+)/)
+            .map(t => {
+                if (t === '.') return `<span style="color:${dotColor}">.</span>`;
+                if (/^-?\d+\.?\d*$/.test(t)) return `<span style="color:${numColor}">${t}</span>`;
+                if (words.includes(t)) return `<span style="color:${wordColor}">${t}</span>`;
+                if (notes.includes(t)) return `<span style="color:${noteColor}">${t}</span>`;
+                if (chords.includes(t)) return `<span style="color:${chordColor}">${t}</span>`;
+                if (samples.includes(t)) return `<span style="color:${sampleColor}">${t}</span>`;
+                return t;
+            })
+            .join('');
+    });
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', highlightForth);
+} else {
+    highlightForth();
+}