app.js 1.0 KB

1234567891011121314151617181920212223242526272829303132333435
  1. import Alpine from 'alpinejs';
  2. import 'htmx.org';
  3. // Dark mode toggle. Layout's inline <head> script handles the FOUC-free
  4. // initial paint; this just wires the toggle button.
  5. function applyTheme(theme) {
  6. if (theme === 'dark') {
  7. document.documentElement.classList.add('dark');
  8. } else {
  9. document.documentElement.classList.remove('dark');
  10. }
  11. try {
  12. localStorage.setItem('irdb-theme', theme);
  13. } catch (e) {
  14. /* ignore */
  15. }
  16. }
  17. document.addEventListener('click', (e) => {
  18. const target = e.target.closest('[data-theme-toggle]');
  19. if (!target) return;
  20. const next = document.documentElement.classList.contains('dark') ? 'light' : 'dark';
  21. applyTheme(next);
  22. });
  23. // htmx: send the per-session CSRF token on every state-changing request.
  24. document.body.addEventListener('htmx:configRequest', (e) => {
  25. const meta = document.querySelector('meta[name="csrf-token"]');
  26. if (meta && meta.content) {
  27. e.detail.headers['X-CSRF-Token'] = meta.content;
  28. }
  29. });
  30. window.Alpine = Alpine;
  31. Alpine.start();