# Variáveis de cor

###### A definição de variáveis de cor é uma etapa fundamental ao trabalhar com frameworks de desenvolvimento de aplicativos, como **Quasar**, **Ionic 1** e **Sencha**. Esses frameworks oferecem recursos que permitem personalizar a aparência visual dos aplicativos por meio do uso de variáveis de cor. Este guia tem como objetivo fornecer uma breve documentação sobre como definir variáveis de cor em cada um desses frameworks.

#### **Quasar Framework**

Crie um arquivo de variáveis no **Quasar**, as variáveis de cor são definidas em um arquivo chamado quasar.variables.styl. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta src/css/. Defina as variáveis de cor: Abra o arquivo quasar.variables.styl. Declare as variáveis de cor no formato nome-da-variavel = valor.

<table border="1" id="bkmrk-%24primary%3A-%231379df%3B-%24" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 20%;"></col><col style="width: 20%;"></col><col style="width: 20%;"></col><col style="width: 20%;"></col><col style="width: 20%;"></col></colgroup><tbody><tr><td>**$primary: #1379df;**

</td><td>**$secondary: #5cadff;**

</td><td>**$accent: #0060bf;**

</td><td>**$light:#f5f9ff;**

</td><td>**$dark: #121314;**

</td></tr><tr><td>**$positive: #21ba45;**

</td><td>**$negative: #c10015;**

</td><td>**$warning: #f2c037;**

</td><td>**$info: #0060bf;**

</td><td> </td></tr></tbody></table>

**Links:** *[Saiba mais acessando a documentação do](https://quasar.dev/style/color-palette/#brand-colors)[ Quasar](https://quasar.dev/style/color-palette/#brand-colors)*

#### **Ionic**

Crie um arquivo de variáveis: No **Ionic 1**, as variáveis de cor são definidas em um arquivo chamado ionic.app.scss. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta raiz do seu projeto **Ionic**. Defina as variáveis de cor: Abra o arquivo ionic.app.scss. Declare as variáveis de cor no formato $nome-da-variavel: valor.

<table border="1" id="bkmrk-%24light%3A-%23ffffff%3B-%24st" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 24.9383%;"></col><col style="width: 24.9383%;"></col><col style="width: 24.9383%;"></col><col style="width: 24.9383%;"></col></colgroup><tbody><tr><td>**$light: #FFFFFF;**

</td><td>**$stable: #F7F7F7;**

</td><td>**$positive: #0076EF;**

</td><td>**$balanced: #21C65B;**

</td></tr><tr><td>**$energized: #FFC029;**

</td><td>**$assertive: #F43A36;**

</td><td>**$royal: #7662E3;**

</td><td>**$dark: #3C3C3C;**

</td></tr></tbody></table>

**Links:** *[Saiba mais acessando a documentação do Ionic](https://ionicframework.com/docs/v1/components/#colors)*

#### **Sencha 4**

Crie um arquivo de variáveis: No **Sencha**, as variáveis de cor são definidas em um arquivo chamado variables.scss. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta sass/ do seu projeto **Sencha.** Defina as variáveis de cor: Abra o arquivo variables.scss. Declare as variáveis de cor no formato $nome-da-variavel: valor,

<table border="1" id="bkmrk-%24primary-color%3A-%23ff0" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>**$primary-color: #ff0000;**

</td><td>**$secondary-color: #00ff00;**</td></tr></tbody></table>

<div class="q-pa-md" id="bkmrk-links%3A-saiba-mais-ac-2"><div class="q-py-sm">**Links: [Saiba mais acessando a documentação do Sencha 4](https://extjs.cachefly.net/ext-4.0.0/docs/guide/theming.html)**</div></div><div class="q-py-sm" id="bkmrk-"></div><div class="q-py-sm" id="bkmrk--1"></div>