https://github.com/dkozachenko/theme-switcher
Приложение, реализующее несколько способов смены темы на простом примере
https://github.com/dkozachenko/theme-switcher
angular
Last synced: 3 months ago
JSON representation
Приложение, реализующее несколько способов смены темы на простом примере
- Host: GitHub
- URL: https://github.com/dkozachenko/theme-switcher
- Owner: DKozachenko
- Created: 2022-11-20T13:36:00.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-20T13:41:55.000Z (over 3 years ago)
- Last Synced: 2025-10-20T11:29:53.506Z (9 months ago)
- Topics: angular
- Language: TypeScript
- Homepage:
- Size: 208 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ThemeSwitcher
Приложение, реализующее несколько способов[^work] смены темы на простом примере.
## Способы реализации смены темы:
1. Установка значений CSS-свойств программно.
Стили можно задать с помощью CSS-переменных. При смене темы происходит установка значений CSS-переменных программного в зависимости от темы
2. Переключение класса (или другого селектора).
Для селектора, в котором определенны стили для обычной (светлой темы) добавить класс, для которого эти стили будут переопределены в пользу темной темы. При смене темы добавлять / убирать этот класс. Часто в качестве селектора используют **data-** атрибут.
3. Инвертирование цветов.
Повторяет предыдущий способ, но вместо переопределения стилей можно инвертировать цвета с помощью свойства **filter** и функции **invert()**.
4. Подгрузка разных файлов[^not_realized].
Предаврительно заготовить два файла для разных тем, с разными стилями. При смене темы у тега **link** менять атрибут **href** на нужный путь к файлу.
Чтобы улучшить приложение и, например, сохранять текущую тему можно воспользоваться **localStorage**.
## Установка и запуск
```
npm i
npm start
```
[^not_realized]: Не реализовано в приложении
[^work]: При одновременной смене темы несколькими способами работать не будет. Перед пробой нового способа рекомендуется перезагружать страницу