docs: add theming section

docs/content/3.features.md

@@ -24,6 +24,35 @@ definePageMeta({
 
 ::
 
+## Theming the app
+
+To customize the theme of your app, you can override the Ionic's default css variables. You can start by creating a `~/assets/css/ionic.css` file and adding it to `css` property in your `nuxt.config.ts` file. Following the example:
+
+::code-group
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  css: ['~/assets/css/ionic.css'],
+})
+```
+
+```css [assets/css/ionic.css]
+: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... */
+}
+```
+
+::
+
+To learn more about theming and which variables to override, check out Ionic's [official theming documentation](https://ionicframework.com/docs/theming/basics).
+
 ## Ionic Framework components
 
 All Ionic Vue components should be auto-imported throughout your app. (If you find one that isn't, please open an issue.) Although your IDE should be aware of these everywhere, they are not globally registered and are only imported within the components that use them. For more on how component imports work, see the [Nuxt documentation](https://v3.nuxtjs.org/guide/directory-structure/components#components-directory).
@@ -135,4 +164,4 @@ This is the default:
     <ion-router-outlet />
   </ion-app>
 </template>
-```
+```