How does the theming work with v4?


#1

Hi,

just playing a bit with the newly released ionic 4 beta. At the moment, I try to understand how theming actually works. Yes, there is a documentation available. But I still somehow search for a missing link.

The documentation says, there are certain application variables like “–ion-text-color”, which are used throughout the components. It is true, that I can set this variable, and it changes the color in may places, just as I expected.

However, these variables do not seem to have any kind of default. I can not use them in my own CSS, not until I also set them.

Now, the docs also say, that there are stepped colors, like “–ion-text-color-step-300”. Steps are calculated by mixing text color and background color.

But: I can neither use these steps, nor can I influence them. Of course I can set the to some arbitrary value. But that’s not what I expect from the docs. In my impression, I should be able to set both text and background color, and these stepped colors are calculated. At least I would expect them to actually exist.

Where am I wrong?


#2

A good start is the

official doc: https://beta.ionicframework.com/docs/theming/basics

and @joshmorony two tutorials about styling and shadow dom

css4 variables: https://beta.ionicframework.com/docs/theming/basics

shadow dom: https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/

finally I think the Ionic team is working on some more information about styling custom css property, see following issue https://github.com/ionic-team/ionic/issues/14850


#3

Thanks for the hit. But this is exactly the documentation I was referring to. The doc describes several things, but up to now, I can’t see, that this actually exists in ionic.


#4

Did you find a solution? I too, would like to use the stepped colors