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 (MD-theme only). 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

Color	iOS	MD
red	#ff3b30	#f44336
green	#4cd964	#4caf50
blue	#007aff	#2196f3
pink	#e91e63	#e91e63
yellow	#ffcc00	#ffeb3b
orange	#ff9500	#ff9800
gray	#8e8e93	#9e9e9e
white	#fff	#fff
black	#000	#000