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

Ionic Framework
1

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.

2

I just did some testing using one of Ionic’s StackBlitz examples and you are right, they don’t exist in light mode. That does seem odd! The docs don’t mention anything about only available in dark mode.

To declare them yourself, you can put them in theme/variables.css.

: root {
    --ion-background-color-step-50: #f2f2f2;
    --ion-background-color-step-100: #e6e6e6;
    --ion-background-color-step-900: #1a1a1a;
    --ion-background-color-step-950: #0d0d0d;
}
3

Thanks for the confirmation. I added the “step” colors for both background and text to the theme/variables.css file, and it works now. I used the Android MD colors, but they seem to be different for iOS. I’m not sure of the CSS syntax to select between Android and iOS, but I only need Android so the workaround is good enough for me.

Probably a bug should be filed? I’m not familiar with the Ionic project so I wouldn’t know where to file it. If someone can tell me where the best place is, then I can do it.

/* For information on how to create your own theme, please see:
http://ionicframework.com/docs/theming/ */

/* these are missing from the Ionic framework, which seems to be a bug in Ionic. */
:root {
    --ion-background-color-step-950: #1e1e1e;
    --ion-background-color-step-900: #2a2a2a;
    --ion-background-color-step-850: #363636;
    --ion-background-color-step-800: #414141;
    --ion-background-color-step-750: #4d4d4d;
    --ion-background-color-step-700: #595959;
    --ion-background-color-step-650: #656565;
    --ion-background-color-step-600: #717171;
    --ion-background-color-step-550: #7d7d7d;
    --ion-background-color-step-500: #898989;
    --ion-background-color-step-450: #949494;
    --ion-background-color-step-400: #a0a0a0;
    --ion-background-color-step-350: #acacac;
    --ion-background-color-step-300: #b8b8b8;
    --ion-background-color-step-250: #c4c4c4;
    --ion-background-color-step-200: #d0d0d0;
    --ion-background-color-step-150: #dbdbdb;
    --ion-background-color-step-100: #e7e7e7;
    --ion-background-color-step-50: #f3f3f3;
    --ion-text-color-step-950: #f3f3f3;
    --ion-text-color-step-900: #e7e7e7;
    --ion-text-color-step-850: #dbdbdb;
    --ion-text-color-step-800: #d0d0d0;
    --ion-text-color-step-750: #c4c4c4;
    --ion-text-color-step-700: #b8b8b8;
    --ion-text-color-step-650: #acacac;
    --ion-text-color-step-600: #a0a0a0;
    --ion-text-color-step-550: #949494;
    --ion-text-color-step-500: #898989;
    --ion-text-color-step-450: #7d7d7d;
    --ion-text-color-step-400: #717171;
    --ion-text-color-step-350: #656565;
    --ion-text-color-step-300: #595959;
    --ion-text-color-step-250: #4d4d4d;
    --ion-text-color-step-200: #414141;
    --ion-text-color-step-150: #363636;
    --ion-text-color-step-100: #2a2a2a;
    --ion-text-color-step-50: #1e1e1e;
}
4

You would create a bug report here - Issues · ionic-team/ionic-framework · GitHub

5

I submitted a bug report at the link you provided. Thanks for your help.

1 Like
6

Can you post the link to the issue here so there is a reference? Thanks!!!

7
1 Like
8

Nice work on the issue! Hopefully someone from the Ionic team with provide some insight.

For the workaround, you mention the colors are different between Android and iOS. To fix this, you should be able to define the colors using .ios and .md instead of :root.

For example:

.ios {
    --ion-background-color-step-950: #1e1e1e;
    --ion-background-color-step-900: #2a2a2a;
}

.md {
    --ion-background-color-step-950: #1e1e1e;
    --ion-background-color-step-900: #2a2a2a;
}

Or leave :root and just set iOS.

:root {
    --ion-background-color-step-950: #1e1e1e;
    --ion-background-color-step-900: #2a2a2a;
}

.ios {
    --ion-background-color-step-950: #1e1e1e;
    --ion-background-color-step-900: #2a2a2a;
}