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();
}