> For the complete documentation index, see [llms.txt](https://mstoreappdocs.gitbook.io/mstoreapp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mstoreappdocs.gitbook.io/mstoreapp/theming-your-app.md).

# Theming your app

Ionic is built on top of [Sass](https://ionicframework.com/docs/what-is/#sass), which allows you to set some default styles for your app but makes it extremely easy for you to change defaults.

Read this document and use the ionic color generator to create a new color

<https://ionicframework.com/docs/theming/colors>

![](https://2532985797-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9dfyK8qHyd3G-y0mZm%2F-M76Oc2DNpuw2yqnA4dP%2F-M76QcCyl_GZkFebDc6A%2FScreenshot%202020-05-12%20at%2011.14.43%20AM.png?alt=media\&token=b018193a-0db8-4898-875a-c8d7dc496374)

Add new color in app/src/theme/variable.scss file. you can also edit the existing color.

![](https://2532985797-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9dfyK8qHyd3G-y0mZm%2F-M76Oc2DNpuw2yqnA4dP%2F-M76SpLxOa0OulPTFoup%2FScreenshot%202020-05-12%20at%2011.28.18%20AM.png?alt=media\&token=dc70d292-e2a8-4985-8105-501721138913)

Add this color property to elements

![](https://2532985797-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9dfyK8qHyd3G-y0mZm%2F-M76Oc2DNpuw2yqnA4dP%2F-M76StZqqm1TMv7IY1Ds%2FScreenshot%202020-05-12%20at%2011.28.44%20AM.png?alt=media\&token=f58a6356-6ce9-4ac2-8768-e27b285cc0d5)

## Changing Color of Button

Set button color in the file `app/src/app/data/settings.ts`&#x20;

`this.theme.button = 'new';`