Skip to content

content: Ionic 8 beta upgrade guide and docs page on dark theme, confusion about ion-color-step ion-text-color-step ion-background-color-step #3518

Closed
@ptmkenny

Description

@ptmkenny

URL

https://ionicframework.com/docs/v8/theming/dark-mode#ionic-dark-theme

Issue Description

I have an Ionic 7 React app with a pretty heavily customized variables.css.

The upgrade guide says that for Step Color Tokens, you need to change ion-color-step to ion-background-color-step or ion-text-color-step depending on whether you want to change the text or the background color.

Well, variables.css is full of these step colors, some I changed and some I didn't. I tried to find a recent variables.css to use as an example, so I checked the dark theme page linked in the upgrade guide.

However, in the variables.css file shown on that page as an example, the step colors don't use -text- or -background as described in the upgrade guide.

  --ion-color-step-50: #0d0d0d;

So what am I supposed to do here? Do I need to use -text- and -background-, or can I continue to use ion-color-step as shown on the dark mode theme page?

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentIssues related to the contents of the documentation website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions