Ionic-framework: v4: Allow customizing SCSS variables used in Ionic (or add more css variables)

[fifafu]

Feature Request

If I haven't missed anything, Ionic v4 alpha only allows to override the css variables and not the scss variables used in the Ionic framework. This limits the customizability a lot.

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/Users/andi/.nvm/versions/node/v8.11.1/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.7
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.1
   npm    : 5.6.0
   OS     : macOS High Sierra

Describe the Feature Request
Currently it doesn't seem to be possible to change the SCSS variables used in Ionic 4. This is really bad for some of the enterprise apps I'm working on, because they require a custom corporate font and various other changes. The changes I need to make are not covered by the currently available css variables but would be easy to do with the Ionic SCSS variables.

In Ionic 1/2/3 this was easy to do by setting custom values to the variables in variables.scss. In Ionic 4 alpha this doesn't seem to be possible without creating a custom build of the Ionic Framework.

I'm currently using some ugly css overrides to workaround this but I'd very much like to not do this.

Describe Preferred Solution
Allow customizing all the scss variables

Describe Alternatives
Make everything available as css variables

[kael]

This might help.

[fifafu]

@kael I think this just describes how to use the css variables. I want to use the scss variables because not everything is covered by the css vars.

[kael]

As far as I understand, default SCSS colors values can be overridden.

Create a custom color using the color generator, define the custom color values in the src/global/app.css (don't recall which file for _Ionic-Angular_) :

/** Ionic CSS Variables **/
:root {

  /** primary **/
  --ion-color-primary: #0cd1e8;
  --ion-color-primary-rgb: 12,209,232;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #0bb8cc;
  --ion-color-primary-tint: #24d6ea;
}

Define the globalStyle file path in stencil.config.js:

exports.config = {
  ...
  globalStyle: 'src/global/app.css',
}

And that should be it, using color='primary' as usual.

[fifafu]

Colors are fine because there are CSS variable for them. Unfortunately I need to change things like font-faces or margins, which do not have css variables defined, only scss variables:
https://github.com/ionic-team/ionic/blob/ae1028d91e187e16bbf9f4f29a5e306acd3c1046/core/src/themes/ionic.theme.default.scss#L87

[kael]

I believe it's possible with _Stencil_ using _node-sass_ by defining them in src/global/variables.scss

See this blog post (not tested, don't know if it's up-to-date, and how applicable it is to _Ionic-Angular_) and perhaps search results for stencil+variables.scss.

[fifafu]

Thank you! Unfortunately I think this only works if you create your own stencil components, but I just want to change the appearance/fonts of the existing ionic components without creating my own build of the complete ionic core / ionic angular

[kael]

Well, not even sure you'd need to use _Stencil_. There's a stencil.config.js file in the _Ionic-Angular_ section, so there's still some hope.

But I can't tell, as I don't see any reason to use _Ionic-Angular_ now that there's Stencil, though. :smile:

Cheers.

[brandyscarney]

Thanks for the issue! We are currently working on adding more css variables for customization on this branch: https://github.com/ionic-team/ionic/tree/core-css-variables

Once that is good to go we will merge it to master and create a new release.

[pedrotcm]

And how can I create my own color variable? If I change the primary color (--ion-color-primary: #ecf0f1;) and use in the button it works, but if I create a (--ion-color-auth: # 5b5377;) and usage does not work.
<ion-button shape="round" color="auth" expand="full">Continuar</ion-button>

[brandyscarney]

@pedrotcm The latest way to add a new color will be to define its class and css properties like so:

.ion-color-auth {
  --ion-color-base: #ff600d;
  --ion-color-base-rgb: 255,96,13;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255,255,255;
  --ion-color-shade: #e0540b;
  --ion-color-tint: #ff7025;
}

You will be able to add as many of these as you'd like. We have some more documentation on what each property means here, but a lot of this documentation needs to be updated: https://beta.ionicframework.com/docs/theming/advanced#color-language

This is only working on the core-css-variables branch at the moment. We are planning to have this branch merged into master and a new release out in the next week or so.

[MrSparklle]

Any news about this issue? I'm trying to migrate from v3 to v4, but can't define a custom font for my app.

[brandyscarney]

@MrSparklle It should be possible to change the font-family in latest using something like the following:

:root {
  --ion-font-family: "Comic Sans MS" !important;
}

or if you want to change it per mode:

.ios {
  --ion-font-family: "Comic Sans MS" !important;
}

.md {
  --ion-font-family: "Courier New" !important;
}

I'd like to remove the need for !important, but this should work for now.

[ix-xerri]

@brandyscarney I would like to change padding-end on native-input to change the padding-right on ion-input but it doesn’t look to be possible. Is it adjustable?

[brandyscarney]

@ix-xerri It's possible to change the native input's padding using the --padding-end var.

I've confirmed that --ion-font-family is now working without the use of !important. We are still actively working on adding/documenting the CSS variables so I am going to close this in favor of https://github.com/ionic-team/ionic/issues/14850

Please follow our progress on that issue. Thanks!

[brandyscarney]

Also, we have plans to document the global CSS variables as part of this issue: https://github.com/ionic-team/ionic-docs/issues/101

This file should be a good example of what global variables currently exist: https://github.com/ionic-team/ionic/blob/master/core/src/themes/css/oceanic.css

[parthnayak7448]

@brandyscarney

as you have mention above
.ion-color-auth {
--ion-color-base: #ff600d;
--ion-color-base-rgb: 255,96,13;
--ion-color-contrast: #ffffff;
--ion-color-contrast-rgb: 255,255,255;
--ion-color-shade: #e0540b;
--ion-color-tint: #ff7025;
}

to create our own color this way.

I have created this in my src/theme.variable.scss

in case if I want to use this color in another page scss how can I use this.

For example :-
p { color: var(--ion-color-auth); }

thanks in advance

[ix-xerri]

Found what was necessary as referenced in my answer here.

[brandyscarney]

@parthnayak7448 You would have to define the variable for use, so if you wanted it to be --ion-color-auth:

:root {
  --ion-color-auth: #ff600d;
}

I put together a file on it here: https://gist.github.com/brandyscarney/fea0d370142063531ef5ece961707d78

[trongrg]

@brandyscarney

I am having the same problem. So I want to change those 2 sass variables:
$searchbar-ios-input-background-color-alpha from 0.07 to 0.1
$searchbar-ios-input-icon-opacity from 0.5 to 1

there is no css variable for those. Is there anyway to change them?

[Jcortesjara]

@brandyscarney Hi brandy, you wrote on another issue that should not change the globals variables, for example --ion-color-primary in my case, so which is the right way

[ionitron-bot[bot]]

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.