[comment]: # aside:4

[comment]: # ({3c100212-cd954d56})
# Assets

A pasta *assets* pode conter quaisquer arquivos e subpastas que não pertençam a outros diretórios. Você pode usá-la para:

- Estilos JavaScript (devem estar dentro de *[assets/js](#assetsjs)*);
- Estilos CSS (devem estar dentro de *[assets/css](#assetscss)*);
- Imagens;
- Fontes;
- Qualquer outra coisa que você precise incluir.

[comment]: # ({/3c100212-cd954d56})

[comment]: # ({2b4831f8-08585fb9})
### assets/js

O diretório *assets/js* é reservado e deve conter apenas arquivos JavaScript.
Para serem usados pelo widget, especifique esses arquivos no *[manifest.json](/devel/modules/file_structure/manifest)*.

Por exemplo:

```json
"assets": {
    "js": ["class.widget.js"]
}
```

[comment]: # ({/2b4831f8-08585fb9})

[comment]: # ({1da3de82-18641225})
### assets/css

*assets/css* é reservado e deve conter apenas arquivos de estilo CSS.
Para ser usado pelo widget, especifique esses arquivos no *[manifest.json](/devel/modules/file_structure/manifest)*.

Por exemplo:

```json
"assets": {
    "css": ["mywidget.css"]
}
```

[comment]: # ({/1da3de82-18641225})

[comment]: # ({0e4fe7cf-aedbe0c5})
##### Estilos CSS

Arquivos CSS podem conter um atributo personalizado `theme` para definir estilos diferentes para temas específicos do frontend.

Temas disponíveis e seus valores de atributo:

-   **Blue** - [theme='blue-theme']
-   **Blue (classic)** - [theme='blue-classic-theme']
-   **Dark** - [theme='dark-theme']
-   **Dark (classic)** - [theme='dark-classic-theme']
-   **High-contrast light** - [theme='hc-light']
-   **High-contrast dark** - [theme='hc-dark']

Exemplo:

```css
.widget {
    background-color: red;
}
 
[theme='dark-theme'] .widget {
    background-color: green;
}
```

[comment]: # ({/0e4fe7cf-aedbe0c5})