Color Properties

Color Properties

All Framework7-Vue components supports same set of color properties that allow to set separate element colors and color themes:

PropTypeDefaultDescription
colorstringSingle element color. One of the default colors.
color-themestringApplies 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-colorstringSets element's text color. One of the default colors.
bg-colorstringSets element's background color. One of the default colors.
border-themestringSets element's borders color. One of the default colors.
ripple-colorstringSets element ripple wave color. One of the default colors.
theme-darkbooleanfalseEnables 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