Portfolio-2026/js/app.js

// accessibility toggle

{  
  const STORAGE_KEY = 'extra-css-enabled';
  
  function applyOverrideState(enabled) {
	const link = document.getElementById('a11y-css');
	const button = document.getElementById('a11y-toggle');
	if (!link) return;
  
	link.disabled = !enabled;
	button?.setAttribute('aria-pressed', String(enabled));
  }
  
  const enabled = localStorage.getItem(STORAGE_KEY) === 'true';
  applyOverrideState(enabled);
  
  document.getElementById('a11y-toggle')?.addEventListener('click', () => {
	const nextState = localStorage.getItem(STORAGE_KEY) !== 'true';
	localStorage.setItem(STORAGE_KEY, String(nextState));
	applyOverrideState(nextState);
  });
}
  
  
// light-dark toggle
  
{
  const STORAGE_KEY = 'theme-preference';
  const root = document.documentElement;
  const mq = window.matchMedia('(prefers-color-scheme: dark)');
  
  function getSystemTheme() {
	return mq.matches ? 'dark' : 'light';
  }
  
  function getSavedTheme() {
	try {
	  return localStorage.getItem(STORAGE_KEY) || 'system';
	} catch {
	  return 'system';
	}
  }
  
  function setSavedTheme(value) {
	try {
	  localStorage.setItem(STORAGE_KEY, value);
	} catch {}
  }
  
  function applyTheme(theme = getSavedTheme()) {
	root.style.colorScheme = theme === 'system' ? 'light dark' : theme;
  }
  
  function getNextTheme() {
	return getSavedTheme() === 'system'
	  ? (getSystemTheme() === 'dark' ? 'light' : 'dark')
	  : 'system';
  }
  
  function updateButton() {
	const btn = document.getElementById('theme-toggle');
	if (!btn) return;
  
	const theme = getSavedTheme();
	// btn.textContent =
	//   theme === 'system'
	// 	? `Use ${getSystemTheme() === 'dark' ? 'light' : 'dark'} theme`
	// 	: 'Use browser/OS theme';
  }
  
  function toggleTheme() {
	setSavedTheme(getNextTheme());
	applyTheme();
	updateButton();
  }
  
  function initThemeToggle() {
	applyTheme();
	updateButton();
  
	const btn = document.getElementById('theme-toggle');
	if (btn) btn.addEventListener('click', toggleTheme);
  
	mq.addEventListener('change', () => {
	  if (getSavedTheme() === 'system') {
		applyTheme('system');
		updateButton();
	  }
	});
  }
  
  if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', initThemeToggle);
  } else {
	initThemeToggle();
  }
}