[comment]: # aside:4

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

# Assets

Der Ordner *assets* kann beliebige Dateien und Unterordner enthalten, die nicht zu anderen Verzeichnissen gehören. Sie können ihn verwenden für:

- JavaScript-Stile (müssen sich in *[assets/js](#assetsjs)* befinden);
- CSS-Stile (müssen sich innerhalb von *[assets/css](#assetscss)* befinden);
- Bilder;
- Schriftarten;
- Alles, was Sie sonst noch einfügen müssen.

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

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

### assets/js

Das Verzeichnis *assets/js* ist reserviert und sollte nur JavaScript-Dateien enthalten.
Um vom Widget verwendet zu werden, geben Sie diese Dateien in der *[manifest.json](/devel/modules/file_structure/manifest)* an.

Zum Beispiel:

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

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

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

### assets/css

*assets/css* ist reserviert und sollte nur CSS-Stil-Dateien enthalten.
Um vom Widget verwendet zu werden, geben Sie diese Dateien in der *[manifest.json](/devel/modules/file_structure/manifest)* an.

Zum Beispiel:

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

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

[comment]: # ({fcb10dd9-aedbe0c5})
##### CSS-Styles

CSS-Dateien können ein benutzerdefiniertes Attribut `theme` enthalten, um unterschiedliche Stile für bestimmte Frontend-Themes zu definieren.

Verfügbare Themes und ihre Attributwerte:

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

Beispiel:

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

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