Theming & Variables
Ionic theming is driven by CSS custom properties — the same primitive every modern web framework uses. Override the variables in theme/variables.css and the whole component library re-skins.
Brand + dark mode + per-platform
EXAMPLE
/* src/theme/variables.css */
:root {
--ion-color-primary: #04AA6D;
--ion-color-primary-rgb: 4, 170, 109;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-shade: #03936b;
--ion-color-primary-tint: #1cb37b;
--ion-font-family: 'Inter', sans-serif;
}
/* Dark mode — the .ion-palette-dark class is added when activated */
@media (prefers-color-scheme: dark) {
:root.ion-palette-dark {
--ion-background-color: #1a1a1a;
--ion-text-color: #f4f4f4;
--ion-toolbar-background: #222;
--ion-tab-bar-background: #222;
}
}
/* Per-platform tweaks */
.ios { /* iOS-specific overrides */ }
.md { /* Material (Android) */ }
/* Activate dark mode programmatically */
document.documentElement.classList.add('ion-palette-dark');
/* Custom semantic colours — registered through generator */
ion ionic generate color --name brand --hex '#04AA6D'
/* gives you <ion-button color="brand"> support */
Why it matters
Define semantic colours (primary, danger, success) and reference those everywhere — never raw hex codes in components. The whole app re-skins by editing six variables.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
/* variables.css */
:root {
--ion-color-primary: #04AA6D;
--ion-color-primary-rgb: 4,170,109;
}
Try it Yourself »
Exercise
Brand primary CSS variable.
--ion-color-
: #04AA6D;
Seven letters.
Discussion
Loading…