How to use the datax-common.Colors.themePrimary function in datax-common

const editorHeaderStyle = {
    paddingBottom: 4
};

const rightSideSettingsStyle = {
    display: 'flex',
    flexDirection: 'row',
    height: 27
};

const linkStyle = {
    paddingLeft: 20,
    fontSize: 14,
    lineHeight: '27px',
    color: Colors.themePrimary
};

const toggleStyle = {
    paddingLeft: 5
};

};

const statementBoxSectionStyle = {
    paddingTop: 12,
    paddingBottom: 30
};

const statementBoxStyle = {
    border: `1px solid ${Colors.neutralTertiaryAlt}`,
    backgroundColor: Colors.white
};

const linkStyle = {
    fontSize: 14,
    lineHeight: '29px',
    color: Colors.themePrimary
};

flexDirection: 'column',
    overflowX: 'hidden',
    overflowY: 'hidden',
    flex: 1
};

const tabContainerStyle = {
    display: 'flex',
    flexDirection: 'column',
    overflowX: 'hidden',
    overflowY: 'hidden',
    flex: 1
};

const modelHeaderStyle = {
    background: Colors.themePrimary,
    color: Colors.white,
    padding: '20px 30px'
};

const modalBodyStyle = {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '150px'
};

export default withRouter(
    connect(
        mapStateToProps,
        mapDispatchToProps

};

const typeDropdownStyle = {
    paddingBottom: 15
};

const inlineBlockStyle = {
    display: 'inline-block'
};

const linkStyle = {
    paddingLeft: 10,
    fontSize: 14,
    float: 'right',
    lineHeight: '29px',
    color: Colors.themePrimary
};

const watermarkContainerStyle = {
    display: 'flex',
    flexDirection: 'row'
};

const watermarkValueStyle = {
    flex: 1,
    marginRight: 10
};

const watermarkUnitDropdownStyle = {
    flex: 1,
    paddingBottom: 15
};