Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Неправильно работают css переменные цветов в тёмной теме #4165

Closed
ilyaChuk opened this issue Apr 16, 2023 · 0 comments

Comments

@ilyaChuk
Copy link

ilyaChuk commented Apr 16, 2023

  • Framework7 version: 8.0.2
  • Vue.js version: 3.2.47
  • Platform and Target: windows 10, chrome 112.0.5615.121 (Официальная сборка), (64 бит)

Describe the bug

Чтобы в тёмной теме срабатывали css переменные цветов, относящиеся к .dark, этот класс надо добавлять только к html, ни к какому другому элементу. Добавляя к body, используются цвета (типа f7-md-primary-shade, f7-md-primary-tint, f7-md-primary-rgb, f7-md-primary) из светлой темы.

Хотя в документации и, как было раньше:

Framework7 also has additional dark mode layout. To apply dark theme we need to add dark class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc.

To Reproduce

  1. Перейти на кухню
  2. Включить в Themes → color themes тёмную тему
  3. Убрать у html класс dark и добавить его к body
  4. Видно, как цвета стали темнее, ведь они берутся из светлой темы

Expected behavior

Чтобы было как в документации, и можно было добавлять класс dark к любым элементам, и цвета брались правильные.

Actual Behavior

Класс dark нужно добавлять только к html, чтобы цвета брались правильные

Screenshots

Когда html.dark
image

Когда body.dark
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant