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:
Go to Kitchen sink
Click on 'Menu list'
Add the following classes to the html tag: 'color-theme-pink dark' and the theme will be correctly applied
Remove the classes from the html tag
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):
Screenshot 2 (applied 'color-theme-pink' and 'dark' on 'app' div, text is purple-ish, should be white):
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):
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:
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):
Screenshot 2 (applied 'color-theme-pink' and 'dark' on 'app' div, text is purple-ish, should be white):
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):