Adding a new color (accent/secondary color)

I’m trying to figure out a way to add a new secondary/accent color to be part of my theme. By that I mean adding a new color similar to how the primary color is defined, and thus results in a new status variant which could be for called “secondary” or “accent”. The reason why I want to try and add a new color is because say for example your brand consists of multiple colors, thus you can’t rely on just 1 primary color and the rest of the semantic colors which are situational such as success and error colors. I want to be able to add more than 1 color to define my brand. Is that possible with the Eva Design System? I tried to read the docs but couldn’t find anything related to adding multiple brand colors. Any help would be greatly appreciated!

1 possible answer(s) on “Adding a new color (accent/secondary color)

  1. There is no direct support for mutiple “primary” colors from UI Kitten itself..
    However, you can use the custom mapping feature:
    https://akveo.github.io/react-native-ui-kitten/docs/design-system/customize-mapping#customize-component-mapping

    You can add a new variant group to the appearance property of the components, and override the colors you’re interested into. For exammple, on a button, you may create this mapping:

    {
    	"components": {
    		"Button": {
    			"appearances": {
    				"filled": {
    					"variantGroups": {
    						"status": {
    							"secondary": {
    								"backgroundColor": "#F00",
    								"textColor": "#FFF",
    							}
    						}
    					}
    				}
    			}
    		}
    	}
    }
    

    and use it as:

    // status="primary" is defined by UI Kitten
    <Button appearance="filled" status="primary" />
    // status="secondary" comes from your custom mapping
    <Button appearance="filled" status="secondary" />