theme

In FancyGrid there are several themes: blue, bootstrap, dark, default, gray, dark, sand.

Example

theme: 'gray'

Example

.fancy-theme-gray .fancy-grid-cell {
  color: gray;
}
...
theme: {
  name: 'gray',
  config: {
    cellHeight: 92,
    titleHeight: 65
  }
}

To do absolutely new theme it needs:

To define it over FancyGrid.defineTheme

Example

.fancy-theme-my .fancy-grid-cell {
  color: #888888;
}
...
FancyGrid.defineTheme('my', {
  config: {
    cellHeaderHeight: 30,
    cellHeight: 32,
    titleHeight: 42,
    barHeight: 37,
    bottomScrollHeight: 12
  }
});

Borders

The most complex issue about theme is borders widths.
There are 3 borders params that need to know for that.
gridBorders, gridWithoutPanelBorders, panelBodyBorders.

Example

gridBorders: [0,1,1,1],
gridWithoutPanelBorders: [1,1,1,1],
panelBodyBorders: [0,0,0,0]