Skip to content

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

Closed
@ilyaChuk

Description

@ilyaChuk
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions