Theme Color Definitions for --ion-background-color-step-*

If you look in Ionic source file “dark.sccs” in the GitHub Ionic repository (ionic-framework/core/src/css/palettes/dark.scss at e32fbe02102fe80db29f73c26496a40852032354 · ionic-team/ionic-framework · GitHub), there are a bunch of colors defined like this:

--ion-background-color-step-50: #0d0d0d;
--ion-background-color-step-100: #1a1a1a;
    ...
--ion-background-color-step-900: #e6e6e6;
--ion-background-color-step-950: #f2f2f2;

These are super helpful to use, but they only seem to work in DARK mode. If you try to use these variables in LIGHT mode, then you always just get pure white color. I assume these variables are simply not defined for LIGHT mode? Is that true? If so, it seems like they should be. If these variables are defined for LIGHT mode, where can I import those definitions?

I would think that the LIGHT mode definitions should basically be the inverse of the DARK mode definitions, like this:

--ion-background-color-step-50: #f2f2f2;
--ion-background-color-step-100: #e6e6e6;
    ...
--ion-background-color-step-900: #1a1a1a;
--ion-background-color-step-950: #0d0d0d;

Thank you for any advice you can offer.

4 posts - 2 participants

Read full topic