Ionic uses CSS variables for theming. Change colors, fonts, and spacing without overriding component internals.

Global Theme File

Edit src/theme/variables.css:

  :root {
    --ion-color-primary: #3880ff;
    --ion-color-primary-rgb: 56, 128, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;
}

Generate a full palette with the Ionic Color Generator.

Using Theme Colors

Components pick up theme colors automatically:

  <IonButton color="primary">Primary</IonButton>
<IonButton color="secondary">Secondary</IonButton>
<IonButton color="danger">Danger</IonButton>
<IonToolbar color="tertiary">...</IonToolbar>

Custom Colors

Define a custom color in CSS, then reference it:

  :root {
    --ion-color-brand: #6a1b9a;
    --ion-color-brand-rgb: 106, 27, 154;
    --ion-color-brand-contrast: #ffffff;
    --ion-color-brand-shade: #5d1888;
    --ion-color-brand-tint: #7932a4;

    --ion-color-brand: #6a1b9a;
}

.ion-color-brand {
    --ion-color-base: var(--ion-color-brand);
    --ion-color-base-rgb: var(--ion-color-brand-rgb);
    --ion-color-contrast: var(--ion-color-brand-contrast);
    --ion-color-shade: var(--ion-color-brand-shade);
    --ion-color-tint: var(--ion-color-brand-tint);
}
  
  <IonButton color="brand">Brand Button</IonButton>

Dark Mode

Ionic supports automatic dark mode via prefers-color-scheme:

  @media (prefers-color-scheme: dark) {
    :root {
        --ion-color-primary: #4d8dff;
        --ion-background-color: #121212;
        --ion-text-color: #ffffff;
    }
}

Toggle dark mode programmatically:

  import { useState } from 'react';

document.body.classList.toggle('dark', isDark);

Or use Ionic’s built-in dark palette classes: ion-palette-dark.

Component-Level Overrides

Override variables on a single component:

  <IonButton
    style={{
        '--background': '#ff6b6b',
        '--border-radius': '20px',
    }}
>
    Custom Style
</IonButton>

Preview themes with ionic serve --lab to compare iOS and Android appearances side by side.

Next: build forms with Ionic input components.