themeColor.md

theme

xy-ui的所有组件均可设置themeColor，不同于一些框架采用less、sass等预处理器， 这里采用CSS自定义属性（--themeColor）实现。

每个组件可以单独设置（并不推荐，影响统一风格），也可以全局设置（推荐）。

xy-button{
    --themeColor: #42b983;/**单独设置**/
}
:root {
    --themeColor: #42b983;/**全局设置**/
}

也可以通过JavaScript实时修改。

document.body.style.setProperty('--themeColor','#F44336');

除了主题颜色themeColor以外，还支持如下主题定制

:root {
    --fontColor:#333; /*文字颜色*/
    --borderColor:#d9d9d9;/*边框颜色，按钮、输入框*/
    --borderRadius:3px;/*圆角*/
    --successColor:#52c41a;/*成功色*/
    --waringColor:#faad14;/*警告色*/
    --errorColor:#f4615c;/*错误色*/
    --infoColor:#1890ff;/*提示色*/
    --dangerColor:#ff7875/*危险色*/
}

实时预览

primary dashed flat default loading

Option1 Option2 Option3

React Vue Angular Other

Html Css Javascript Python Php Dart Swift

可以通过--themeBackground来自定义背景（部分组件支持，如button、switch等），比如渐变色

:root{
    --themeBackground:linear-gradient(-180deg,#2fcb53,#269f42 90%);
}

primary dashed flat default loading

Option1 Option2 Option3

注意和--themeColor搭配使用，其他比如字体颜色仍取自--themeColor，只有背景部分才优先取自--themeBackground，同时，使用--themeBackground会失去动画效果。