docs: Ionic Variables and Theming

[chiqors]

📚 Is your documentation request related to a problem?

I would like to change themes and css variables from ionic itself. On Ionic/Vue, it generate files ./src/theme/variables.css. But, i couldn't see the configuration in this (maybe, i missed something).

Actually, i would like to set base theme to force using light theme instead of dark by replacing with this @media (prefers-color-scheme: light)

🔍 Where should you find it?

Something in the feature page of the wiki, i guess.

ℹ️ Additional context

Here's the segment code from variables.css

 ....
 --ion-color-light-contrast: #000000;
 --ion-color-light-contrast-rgb: 0, 0, 0;
 --ion-color-light-shade: #d7d8da;
 --ion-color-light-tint: #f5f6f9;
}

@media (prefers-color-scheme: dark) {
 /*
 * -------------------------------------------
 */
...

[aaronksaunders]

@chiqors i would post this question in the ionic forum, you would probably get an answer much faster

[danielroe]

@chiqors Yes, we should add a section in the docs about this. But basically if you create a CSS file (for example ~/assets/vars.css) and add this to your css array in Nuxt config, Ionic should pick it up.

[Lexpeartha]

@chiqors you can see example from test app I made some time ago here which basically works the way Daniel said. For forcing a light mode, maybe the easiest way would be to set dark theme variables to the same value as the light themed ones.

[Lexpeartha]

But basically if you create a CSS file (for example ~/assets/vars.css) and add this to your css array in Nuxt config, Ionic should pick it up.

Also curious what you think about a random thought that popped in my head @danielroe:
What if we could sync ionic css variables with let's say configuration from app.config.ts or theme.config.ts in nuxt project? It would allow for referencing those exact values programmatically in TS safe way

[danielroe]

Ooh, interesting. Maybe a bit like https://github.com/Tahul/pinceau...

[Lexpeartha]

Kind of, but scoped only to Ionic variables. I guess the question would be then how far to take it?
We could also provide some utils, and maybe changing variables at runtime could update theme at the spot