framework7io / framework7

Full featured HTML framework for building iOS & Android apps
http://framework7.io
MIT License
18.13k stars 3.23k forks source link

Theme styles not correctly applied on "Menu list" when theme classes are not specifically set on the 'html' tag #4033

Open Toverbal opened 2 years ago

Toverbal commented 2 years ago

Describe the bug

When you put a theme on a different element than the 'html' tag, the theme will not be applied to the (selected item in the) menu list. When you set a different theme + dark mode on a different tag than the 'html' tag, the selected item in the menu list will change its background color, but the text color remains blue.

To Reproduce

Steps to reproduce the behavior:

  1. Go to Kitchen sink
  2. Click on 'Menu list'
  3. Add the following classes to the html tag: 'color-theme-pink dark' and the theme will be correctly applied
  4. Remove the classes from the html tag
  5. Add the classes to e.g. the 'app' div and the theme will not be correctly applied as described in the description.

Expected behavior

The theme should be applied no matter where the theme classes are set as the documentation states: https://framework7.io/docs/color-themes#apply-color-themes (Quote: "It is easy to apply color themes. All you need is just to add color-theme-[color] class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc").

Actual Behavior

The theme is not (light mode) applied or the theme is partly applied (dark mode) on the menu list.

Screenshots

Screenshot 1 (applied 'color-theme-pink' and 'dark' on html tag, everything works): image

Screenshot 2 (applied 'color-theme-pink' and 'dark' on 'app' div, text is purple-ish, should be white): image

Screenshot 3 (applied 'color-theme-pink' on 'app' div, back button is pink (as expected), menu list has a purple-ish color, which is the default theme): image