55 lines
2.2 KiB
JavaScript
55 lines
2.2 KiB
JavaScript
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();
|
|
}
|