This sample helps you create custom Wijmo themes.
Use the color pickers to build a theme. Then copy the CSS into your project as a new custom theme!
Make sure to include wijmo.css and add this CSS after it to ensure it overrides the default theme. We recommend placing this CSS in a separate file.
.wj-content {
border-radius: {{borderRadius}}px;
background-color: {{contentBgColor}};
color: {{contentColor}};
}
.wj-header {
background-color: {{headerBgColor}};
color: {{headerColor}};
}
.wj-state-selected {
background-color: {{selectedBgColor}};
color: {{selectedColor}};
}
.wj-state-multi-selected {
background-color: {{multiSelectedBgColor}};
color: {{selectedColor}};
}
.wj-tooltip {
background-color: {{tooltipBgColor}};
color: {{tooltipColor}};
}
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
background-color: {{contentBgColor}};
color: {{contentColor}};
}
.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
background-color: {{altCellBgColor}};
color: {{contentColor}};
}