https://yanapa.pe/assets/custom/theme.js

1document.addEventListener('turbo:load', () => {
2    const toggleButtons = document.querySelectorAll('.dark-mode-toggle');
3    if (!toggleButtons.length) return;
4
5    const getTheme = () => {
6        return document.documentElement.getAttribute('data-theme') ||
7            document.body.getAttribute('data-theme') ||
8            'light';
9    };
10
11    const setTheme = (theme) => {
12        if (theme === 'dark') {
13            document.documentElement.setAttribute('data-theme', 'dark');
14            document.body.setAttribute('data-theme', 'dark');
15            document.cookie = "theme=dark; path=/; max-age=31536000; samesite=lax";
16        } else {
17            document.documentElement.removeAttribute('data-theme');
18            document.body.removeAttribute('data-theme');
19            document.cookie = "theme=light; path=/; max-age=31536000; samesite=lax";
20        }
21    };
22
23    const updateButtons = (theme) => {
24        toggleButtons.forEach((btn) => {
25            if (theme === 'dark') {
26                btn.innerHTML = '<i class="fa fa-sun-o"></i> Modo Claro';
27            } else {
28                btn.innerHTML = '<i class="fa fa-moon-o"></i> Modo Oscuro';
29            }
30        });
31    };
32
33    toggleButtons.forEach((toggleButton) => {
34        toggleButton.addEventListener('click', (e) => {
35            e.preventDefault();
36            const newTheme = getTheme() === 'dark' ? 'light' : 'dark';
37            setTheme(newTheme);
38            updateButtons(newTheme);
39        });
40    });
41
42    updateButtons(getTheme());
43});