Можно ли динамически менять тему уже загруженной HTML-страницы?

Иногда стандартного prefers-color-scheme недостаточно, и требуется вручную переключать тему без перезагрузки страницы.

Основной механизм

Определение:
Динамическая смена темы — это изменение стилей HTML-страницы без ее повторной загрузки.

Это достигается через:

• выполнение JavaScript

• добавление или удаление CSS-классов

• подмену CSS-переменных

Пример через JavaScript

Из iOS-кода:

webView.evaluateJavaScript("document.body.classList.add('dark')")

В CSS:

body.dark {
    background-color: black;
    color: white;
}

Альтернативные подходы

Также используют:

• CSS variables

• отдельные стили для тем

• передачу темы через window-объект

Ограничения

Важно учитывать:

• JS можно выполнять только после загрузки страницы

• сложные стили могут вызывать перерисовку

• состояние темы нужно синхронизировать с iOS

Вывод

Динамическая смена темы возможна и удобна, если требуется мгновенное обновление внешнего вида без перезагрузки WebView.