Color Properties

    Color Properties

    All Framework7-React 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.
    colorTheme 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.
    textColor string Sets element's text color. One of the default colors.
    bgColor string Sets element's background color. One of the default colors.
    borderTheme string Sets element's borders color. One of the default colors.
    rippleColor string Sets element ripple wave color (MD-theme only). One of the default colors.
    themeDark 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 -->
    <Button color="red">Red Button</Button>
    
    <!-- Link color -->
    <Link color="green">Green Link</Link>
    
    <!-- Page color theme -->
    <Page colorTheme="orange">
      ...
    </Page>
    
    <!-- Panel with dark theme -->
    <Panel themeDark>
      ...
    </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