Adding a new color: determine the name of that color, let’s use vibrant as an example, and then create the class for it defining all of its variations:
Changing an existing color: right now we have named variables for the pre-defined colors that must be changed in order to work with the existing defaults the Ionic components use. To change the primary color, for example:
Customizing a global color used across components: certain global variables exist for changing the theme of an app (such as adding a dark theme). For example changing the background color:
:root {
--ion-background-color: blue;
}
Customizing a color on one component: we have defined background/color variables for components that have the color attribute. The following would change the background/color of all badges:
ion-badge {
--background: blue;
--color: pink;
}
Note: if you add the color attribute to a component it will take precedence over any --color/--background vars used.
I know you only asked about adding custom colors, but hopefully this helped to understand theming as a whole. This is something we need to update in the documentation once we’re happy with the API.
It is a goal of ours to make theming as simple as possible. We know there are some confusing pieces that haven’t come together yet, but we are working on it. I would like to update our color generator to easily allow you to add/modify colors and copy/paste it into your project. If anyone has any feedback, please let me know! Thanks.
Sorry, maybe I didn’t catch your point excactly, so I reply this question according to my understanding.
Firstly, the ‘–ion-color-abcd’ with two dashes as a prefix is a variable that can be referenced anywhere, only if you defined it in the :root { }(essential). If not, you could use it in the scope where you have defined it only.
e.g. in my variables.scss file:
/* Set variables can be used globally with ':root{}' */
:root {
/* Set the background of the entire app */
--ion-background-color: #ff3700;
/* Set the theme abcd's color variables */
--ion-color-abcd: #f0b000;
--ion-color-abcd-rgb: 240,176,0;
--ion-color-abcd-contrast: #000000;
--ion-color-abcd-contrast-rgb: 0,0,0;
--ion-color-abcd-shade: #d39b00;
--ion-color-abcd-tint: #f2b81a;
}
Secondly, a variable must with two dashes as the prefix, and referenced by the css function var() , so the use like background-color: ion-color-abcd;dosen’t work.
Thirdly, a color theme can be used as an ionic theme, the only thing you have to do is defining in the class of correct format, like .ion-color-yourColorThemeName, ionic will let yourColorThemeName become a theme. The example is ‘abcd’ theme as shown above.
Communication through any of Ionic’s channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
I have seen none of the above in response to your comment, yet the way you are describing the color generator that someone put a lot of time and effort into creating to be a useful tool is both rude and unprofessional.
Mike has already suggested a way to add ideas on ways to improve the documentation. We are actively working to improve the documentation every day. In fact - it’s been a goal of ours to improve the color generator to include adding more colors, but if you head over to the Ionic docs issues you’ll see we are actively working on adding some missing things first.
Please try to remember that we are real people working on this. We are always looking for ways to improve the framework and the documentation. We do not intentionally make things difficult or leave things out, but sometimes things are missed, especially when something is under heavy development and constantly changing (which it was up until the v4 release).
If you want to know why certain decisions were made regarding Theming, Colors, Sass or CSS Variables, I’d be happy to explain it in more detail, but we won’t tolerate personal attacks.
