> For the complete documentation index, see [llms.txt](https://woostore.gitbook.io/woostore-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://woostore.gitbook.io/woostore-docs/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.

To change colors in your app, just tweak the `$colors` [map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) in your **src/theme/variables.scss**

```css
$colors: (  
primary:    #387ef5,  
header:     #ff4b00,  
button-color: #ff4b00,  
side-heading-color:  #ff4b00);​  
$shadowlite: #f9ebf2;  
$shadow: #bf4080;  
$header:     #ff4b00;  
$button-color: #ff4b00;  
$toggle-button-color: #ff4b00;  
$side-heading-color:  #ff4b00;  
$page-background:  #f9f9f9;
```

## Changing status  bar color 

By default, black status bar appears in the app. To change its color you need to follow the following steps.

1. Install the following plugin

```
ionic cordova plugin add cordova-plugin-statusbarnpm install --save @ionic-native/status-bar
```

2\. Then open **app/config.xml** and change the color 

```markup
<preference name="StatusBarBackgroundColor" value="#2873ed" />
```

{% hint style="info" %}
You need to add color code.
{% endhint %}