(Translated by https://www.hiragana.jp/)
Material You themes cannot be overridden · Issue #4219 · framework7io/framework7 · GitHub
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.

Sign up for GitHub

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

Jump to bottom

Material You themes cannot be overridden #4219

Closed
peitschie opened this issue Sep 7, 2023 · 1 comment · Fixed by #4220
Closed

Material You themes cannot be overridden #4219

peitschie opened this issue Sep 7, 2023 · 1 comment · Fixed by #4220

Comments

@peitschie
Copy link
Contributor

  • 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
peitschie added a commit to peitschie/framework7 that referenced this issue Sep 7, 2023
@peitschie
fix(theme): insert theme stylesheet element first to allow overriding (…
c93e1b7 
…framework7io#4219)
peitschie added a commit to peitschie/framework7 that referenced this issue Sep 7, 2023
@peitschie
fix(theme): insert theme stylesheet first to allow overriding (framew…
095bb65 
…ork7io#4219)
@peitschie peitschie mentioned this issue Sep 7, 2023
Merged
nolimits4web added a commit that referenced this issue Sep 7, 2023
@peitschie @nolimits4web
fix(core): insert theme stylesheet first to allow overriding (#4219) (#…
c02e90d 
…4220)

* fix(theme): insert theme stylesheet first to allow overriding (#4219)

* Update app-class.js

---------

Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>
@peitschie
Copy link
Contributor Author

Thanks heaps @nolimits4web !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(theme): insert theme stylesheet first to allow overriding (#4219) peitschie/framework7
1 participant
@peitschie