Theming

Ionic provides many css variables with which their components derive css styles. These variables can be overridden to customise the theme of your app.

In its most simple form, you can create a ~/assets/css/ionic.css file and add it to the css property in your nuxt.config.ts file. You can then add css variables that you'd like to override within this file, under the :root selector:

:root {
  --ion-color-primary: #57e389;
  --ion-color-primary-rgb: 87, 227, 137;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #4dc879;
  --ion-color-primary-tint: #68e695;

  /* And so on... */
}

export default defineNuxtConfig({
  css: ['~/assets/css/ionic.css'],
})

To learn more about theming and which variables to override, check out Ionic's official theming documentation.