-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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.
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
bug: After upgrade to Ionic v8 my variables.css are being overwritten by the default values in the core.css file. #29466
Comments
Hello @VerburgtJimmy if you could provide a minimal reproduction with the same base stylesheets you have described, that would help the team diagnose more. In v8, we updated the selectors and default variable definitions and recommended that developers move their custom variables stylesheet to be imported/referenced after the primary global styles that import Ionic's global stylesheets. You have done that with the example snippets you provided, however I would callout a few things:
If you can provide more information or a minimal reproduction of variables not being customizable, the team would be happy to assist further. Thanks! |
Thanks for the response.
If you can give me some time I will create a new ionic project where I will copy my own config files in there and of course my own css files to see if it also happens in a new project. If this is the case I will drop the link for the public repo here so you can reproduce the issue I am having. |
Either approach for global styles is an acceptable pattern in Angular and with Angular libraries, like Ionic Framework. They both result in similar outcomes, however the Here are two reproduction templates that you can review and experiment with:
In both examples the customized primary colors from your provided snippet are applied correctly. |
Sean already gave you some good examples to go by, but I will just add a few notes here, kind of a free code review based on some things I have noted working with our Enterprise customers as well as maintaining our demos.
My suggestions:
More on dark mode here: https://ionicframework.com/docs/theming/dark-mode The other thing I always find helpful for stuff like this is to generate a new app from one of the starters and study the appropriate files. |
Just wanted to follow up on the issue. Some suggestions were shared to help address the problem. Since there hasn't been a response, I'm assuming everything's sorted out. Feel free to reopen this if needed or start a new one if anything else comes up. |
Yes sorry. The following fixed my issue. My angular.json imported my files like this:
Changing this to the following fixed my issue:
|
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
This happend right after updating ionic from V7 to V8 using the update guide.
After creating custom variables like this in my theme/variables.scss:
But when I run the app these values will not be used. Instead the values in the core.css file that I import in my global.css like this will be used:
My css files are imported like this in my angular.json:
Expected Behavior
I expect the values of core.css to be overwritten by my values in the variables.scss file and that my app uses the colors that are defined in the variables.scss.
Steps to Reproduce
I don't have a clean install so if not more people with a clean install have this problem than it is a problem focused on my project so it is not possible to reproduce.
Code Reproduction URL
no url
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.0.1
@angular-devkit/build-angular : 17.3.6
@angular-devkit/schematics : 17.3.6
@angular/cli : 17.3.6
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/android : 6.0.0
@capacitor/core : 6.0.0
@capacitor/ios : 6.0.0
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v22.1.0 (/opt/homebrew/Cellar/node/22.1.0/bin/node)
npm : 10.7.0
OS : MacOs unknown
Additional Information
No response
The text was updated successfully, but these errors were encountered: