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

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

[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.

[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.