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}}; }