Color Properties
Color Properties
All Framework7-Vue components supports same set of color properties that allow to set separate element colors and color themes:
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | Single element color. One of the default colors. | |
| color-theme | string | Applies color theme to the element. It should be some parent element as this will have visual effect on all supported children elements, e.g. view, page, navbar, toolbar, list, etc. One of the default colors. | |
| text-color | string | Sets element's text color. One of the default colors. | |
| bg-color | string | Sets element's background color. One of the default colors. | |
| border-theme | string | Sets element's borders color. One of the default colors. | |
| ripple-color | string | Sets element ripple wave color. One of the default colors. | |
| theme-dark | boolean | false | Enables dark layout theme on element. It should be some parent element as this will have visual effect on all supported children elements, e.g. view, page, navbar, toolbar, list, etc. |
For example:
<!-- Button color -->
<f7-button color="red">Red Button</f7-button>
<!-- Link color -->
<f7-link color="green">Green Link</f7-link>
<!-- Page color theme -->
<f7-page color-theme="orange">
...
</f7-page>
<!-- Panel with dark theme -->
<f7-panel theme-dark>
...
</f7-panel>
Supported Colors
| red | #ff3b30 |
| green | #4cd964 |
| blue | #2196f3 |
| pink | #ff2d55 |
| yellow | #ffcc00 |
| orange | #ff9500 |
| purple | #9c27b0 |
| deeppurple | #673ab7 |
| lightblue | #5ac8fa |
| teal | #009688 |
| lime | #cddc39 |
| deeporange | #ff6b22 |
| gray | #8e8e93 |
| white | #ffffff |
| black | #000000 |