Использование viewtransition для темного режима в astro ⇐ Html

[Гость]

Я пытаюсь реализовать новый переход просмотра, в моем проекте в astro, проблема в том, что я нашел документацию о том, как исправить проблему темного режима при изменении маршрутов, но я использую немного другой код, и из-за этого он не работает, мой код:

// Получаем входные данные для переключения темы const themeToggle: HTMLInputElement = document.querySelector( '.theme-switch input[type="checkbox"]' ); // Получаем текущую тему из локального хранилища const currentTheme = localStorage.getItem("тема"); // Если текущий элемент локального хранилища можно найти если (currentTheme) { // Устанавливаем атрибут body data-theme в соответствии с элементом локального хранилища document.documentElement.setAttribute("тема данных", currentTheme); // Если текущая тема темная, проверьте переключатель темы if (currentTheme === "темный") { themeToggle.checked = правда; } } // Функция, которая будет переключать тему в зависимости от того, отмечен ли переключатель темы или нет функция switchTheme(e) { если (e.target.checked) { document.documentElement.setAttribute("тема данных", "темный"); localStorage.setItem("тема", "темный"); } еще { document.documentElement.setAttribute("тема данных", "по умолчанию"); localStorage.setItem("тема", "по умолчанию"); } } // Добавляем прослушиватель событий в переключатель темы, который будет переключать тему themeToggle.addEventListener("изменить", switchTheme, false); document.addEventListener("astro:after-swap", switchTheme, false); /* ПЕРЕКЛЮЧИТЬ */ .theme-switch-wrapper { поле-встроенное: 20 пикселей; отображение: встроенный блок; /* justify-content: flex-end; */ /* выравнивание элементов: центр; */ } .theme-переключатель { отображение: встроенный блок; высота: 34 пикселей; положение: относительное; ширина: 60 ​​пикселей; } .theme-switch ввод { дисплей: нет; } .слайдер { цвет фона: #dddddd; внизу: 0; курсор: указатель; слева: 0; позиция: абсолютная; правильно: 0; верх: 0; переход: 0,4 с; радиус границы: 34 пикселей; } .slider:до { цвет фона: #fff; внизу: 4 пикселя; содержание: ""; высота: 26 пикселей; слева: 4 пикселя; позиция: абсолютная; переход: 0,4 с; ширина: 26 пикселей; радиус границы: 50%; } ввод: проверено + .slider { цвет фона: #8758ff; } ввод: проверено + .slider:before { преобразование: TranslateX (26 пикселей); } .slider SVG { цвет: #222; позиция: абсолютная; переход: непрозрачность 0,2 с, простота 0 с, преобразование 0,35 с, простота 0 с; события указателя: нет; } .feather-moon { непрозрачность: 0; слева: 9 пикселей; внизу: 9 пикселей; преобразование: TranslateX (4px); } .feather-солнце { непрозрачность: 1; справа: 10 пикселей; внизу: 9 пикселей; преобразование: TranslateX (0 пикселей); } ввод: проверено + .slider .feather-moon { непрозрачность: 1; преобразование: TranslateX (0); } ввод: проверено + .slider .feather-sun { непрозрачность: 0; преобразование: TranslateX (-4px);

Итак, проблема в том, что я использую флажок для проекта, и большинство проектов, которые я видел, используют темный режим с переходами просмотра, они используют кнопки, но моя проблема, я думаю, заключается в том, что, поскольку я использую метод изменения флажок и функция, которую я использую, предназначена для использования, когда флажок меняет состояние, но чтобы сделать кнопку темного режима постоянной, мне нужно использовать этот EventListener:

document.addEventListener("astro:after-swap", switchTheme, false); и поскольку он не активируется флажком, поэтому он не работает, это мои мысли, но я не знаю, как это исправить, поэтому, пожалуйста, помогите мне.

реальная проблема в том, что кнопка работает, но когда я меняю маршруты, она переходит к теме по умолчанию, но флажок все еще включен, поэтому локальное хранилище, которое должно быть постоянным, не является таковым