Can we overwrite or use specific 'color=' for light and dark themes?

Ionic Framework
1

For example,

We are using this:

<ion-segment color="secondary">

Yet, I would like to use a tint or a shade of secondary for when my theme = dark. Can I differentiate on element level and overwrite the ‘color’?

If so, how?

2

yes, you can

for this you need change the color code in variables.scss file. check the file here you have list of colors for the dark mode. here you just need to change color code for the ‘secondary’ and you will get this color when you are in dark mode.
:grinning:

1 Like
3

Just adding to what @abhayjani said: Read this: https://ionicframework.com/docs/theming/dark-mode

4

Nope, this is not what I mean.

What I mean is that we would like to differentiate the property color when it’s light or dark.

So imagine I want a property to be red in dark and blue in light, but I don’t want to create extra variables for it.

Something like:

<ion-segment color="light-primarycolor dark-secondarycolor">

Meaning that I show light-primarycolor when it’s light and ‘dark-secondary-color’ when it’s dark, rather than using just one variable with one name (e.g. “primary”) that is then mapped to different colors. So, this is using two different variables to differentiate colors.

Because, sometimes primary for light = not great for primary = dark.

Hope someone can help.

5

Not what I mean. What I mean is to use to use e.g. primary variable for dark and secondary variable for light. Can I do that?