Repository navigation
[Ionic v4.0.0-beta.3] Application Colors with Var #15229
Description
Bug Report
Ionic Info
Ionic:
ionic (Ionic CLI) : 4.1.0 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.3
@angular-devkit/core : 0.7.4
@angular-devkit/schematics : 0.7.4
@angular/cli : 6.1.4
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5
System:
NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10
Describe the Bug
Application color variables do NOT work with var e.g. var(--ion-tabbar-background-color);
Layered color variables do work with var e.g. background-color: var(--ion-color-light);
It's unclear if this is a bug or expected behavior. But it would be nice to be able to use application variables in this way.
Application color variables are documented here:
https://beta.ionicframework.com/docs/theming/advanced/#color-language
--ion-backdrop-color
--ion-overlay-background-color
--ion-background-color
--ion-border-color
--ion-box-shadow-color
--ion-text-color
--ion-tabbar-background-color
--ion-tabbar-border-color
--ion-tabbar-text-color
--ion-tabbar-text-color-active
--ion-toolbar-background-color
--ion-toolbar-border-color
--ion-toolbar-color-active
--ion-toolbar-color-inactive
--ion-toolbar-text-color
--ion-item-background-color
--ion-item-background-color-active
--ion-item-border-color
--ion-item-text-color
--ion-placeholder-text-color
Steps to Reproduce
Steps to reproduce the behavior:
- Create a new Ionic 4 blank project.
- Add the following to the bottom of /src/theme/variables.scss:
ion-content {
background-color: var(--ion-tabbar-background-color);
}
- Background color does not change.
Expected Behavior
In example, above ion-content background displays as gray i.e. value of variable --ion-tabbar-background-color
Activity
brandyscarney commentedon Sep 19, 2018
The variables documented there are used to override the Ionic components. They are not available as CSS variables to use internally unless you set them. This is done on purpose because we have defaults set per mode for some of these global variables and we want those defaults to be used unless the global variables are set by the user. If you wanted to set them in your app and use them you would need to do so like:
The reason layered colors work is because they are defined in the starters to make it easier to change them and use throughout the app: https://github.com/ionic-team/starters/blob/master/angular/base/src/theme/variables.scss#L7
I will keep this issue open though to discuss with the team if we want to provide the application variables the same way though. Thank you!
brandyscarney commentedon Oct 26, 2018
@ionic-team/framework We should discuss this.
brandyscarney commentedon Nov 14, 2018
I discussed this with @manucorporat and we decided it would be helpful if we could provide some themes in the starters that could be changed, for example this could be commented out:
and that could contain something like the following:
We could also have a dark theme made available, or do something like this:
I'm going to move this issue to the backlog as something to keep in mind, but the workaround exists to set the variables in your app, like so: https://raw.githubusercontent.com/ionic-team/ionic/master/core/src/themes/test/css-variables/css/oceanic.css
Details
paulstelzer commentedon Nov 21, 2018
@brandyscarney About a dark mode. Is my current appreach correct?
liamdebeasi commentedon Feb 28, 2024
Hi everyone,
With the upcoming Ionic 8 release we will be providing built-in themes for developers to import as suggested in #15229 (comment). Developers will be able to use the global application vars to override these themes. I am going to close this, but let me know if there are any questions.
ionitron-bot commentedon Mar 29, 2024
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.