Skip to content

Material You themes cannot be overridden #4219

@peitschie

Description

@peitschie
  • Framework7 version: 8.3.0
  • Platform and Target: Cordova Android
  • Live Link or CodeSandbox: (template is broken?! CodeSandbox )

Describe the bug

I have a need for a totally consistent color theme between iOS and Android. I can't achieve this via the Material You computed themes, so I need to manually set up the right variables myself.

However, variables configured by the Material You theme cannot be overridden due to the color-related style sheet being the last stylesheet in the document.

To Reproduce

Steps to reproduce the behavior:

  1. Create a new F7 app
  2. Try and change the value of --f7-theme-color in CSS
  3. Note that the --f7-theme-color is overridden by the computed values from https://framework7.io/docs/app#method-app.setColorTheme(color)

Expected behavior

I should be able to set theme-related variables in my own CSS.

Actual Behavior

Theme-related variables are always replaced by the computed values from Framework7.

Screenshots

The button here should be #222222. However, you can see it's getting replaced by the computed md values from the theme.

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