Themes

Description

Currently, the DataGrid provides a base theme and a flat theme, each available in light and dark variants.

Base Themes

The light and dark themes are the base themes for the DataGrid. If no other theme is specified, the light theme is used by default.

Flat Themes

The flat-light and flat-dark themes were created to offer a less significant visual signature than our default themes.

The flat themes try to mimic a little the material design philosophy. You can find more details about Material Design here and modify our existing themes

The flat themes use 3 accent colors that are applied on key elements to give that good contrasting color.

As a primary color we use:

• #03a9f4 which represents lightblue 500 in the material design pallet
• #0277bd which represents lightblue 800 (darker)

As a secondary color we use #e91e63 which represents pink 500, this color adds a high contrast by design.

You can replace these 3 colors in the xceed-datagrid-flat-light.css file to create your own theme.

You can find a nice color tool to help you generate your own theme here.

Example

To specify which theme to use, set the desired theme on the theme option on the DataGrid.

datagrid.setOptions({ theme: "flat-light" });