42 lines
1.4 KiB
JavaScript
42 lines
1.4 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');
|
|
});
|
|
|
|
document.querySelectorAll('.example-cell').forEach(cell => {
|
|
cell.addEventListener('click', () => {
|
|
const video = cell.querySelector('video');
|
|
const wasExpanded = cell.classList.contains('expanded');
|
|
document.querySelectorAll('.example-cell.expanded').forEach(c => {
|
|
c.classList.remove('expanded');
|
|
c.querySelector('video').pause();
|
|
});
|
|
if (!wasExpanded) {
|
|
cell.classList.add('expanded');
|
|
video.play();
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
document.querySelectorAll('.example-cell.expanded').forEach(c => {
|
|
c.classList.remove('expanded');
|
|
c.querySelector('video').pause();
|
|
});
|
|
}
|
|
});
|