ThemeSwitcher

Приложение, реализующее несколько способов¹ смены темы на простом примере.

Способы реализации смены темы:

1. Установка значений CSS-свойств программно. Стили можно задать с помощью CSS-переменных. При смене темы происходит установка значений CSS-переменных программного в зависимости от темы
2. Переключение класса (или другого селектора). Для селектора, в котором определенны стили для обычной (светлой темы) добавить класс, для которого эти стили будут переопределены в пользу темной темы. При смене темы добавлять / убирать этот класс. Часто в качестве селектора используют data- атрибут.
3. Инвертирование цветов. Повторяет предыдущий способ, но вместо переопределения стилей можно инвертировать цвета с помощью свойства filter и функции invert().
4. Подгрузка разных файлов². Предаврительно заготовить два файла для разных тем, с разными стилями. При смене темы у тега link менять атрибут href на нужный путь к файлу.

Чтобы улучшить приложение и, например, сохранять текущую тему можно воспользоваться localStorage.

Установка и запуск

npm i 
npm start

Footnotes

1. При одновременной смене темы несколькими способами работать не будет. Перед пробой нового способа рекомендуется перезагружать страницу ↩

2. Не реализовано в приложении ↩