# Theme

Can set theme to Cheetah Grid.
Can settings for grid instance or global.

# Grid instance

Set a theme to the theme property of the grid instance.
Built-in themes are MATERIAL_DESIGN and BASIC.

<label>theme</label>
<select class="theme-select1">
    <option value="" selected="true">unset</option>
    <option value="MATERIAL_DESIGN">MATERIAL_DESIGN</option>
    <option value="BASIC">BASIC</option>
</select>
<div class="sample1 demo-grid small"></div>
1
2
3
4
5
6
7
const grid = vm.createGrid(document.querySelector('.sample1'));

const themeSelect = document.querySelector('.theme-select1');
themeSelect.onchange = function() {
  grid.theme = cheetahGrid.themes.choices[themeSelect.value];

  /* The `theme` property of the grid instance can also be set as a string. */
  // grid.theme = themeSelect.value;
};
themeSelect.onchange();
1
2
3
4
5
6
7
8
9
10

# Global

Set a theme to the cheetahGrid.themes.default property. (default MATERIAL_DESIGN.)

<label>theme</label>
<select class="theme-select2">
    <option value="MATERIAL_DESIGN" selected="true">MATERIAL_DESIGN</option>
    <option value="BASIC">BASIC</option>
</select>
<div class="sample2 demo-grid small"></div>
1
2
3
4
5
6
vm.createGrid(document.querySelector('.sample2'));

const themeSelect = document.querySelector('.theme-select2');
themeSelect.onchange = function() {
  cheetahGrid.themes.default = cheetahGrid.themes.choices[themeSelect.value];

  // redraw all the grids
  vm.girdInstances.forEach((grid) => grid.invalidate());
};

themeSelect.onchange();
1
2
3
4
5
6
7
8
9
10
11

# Extend theme

To extend the theme, do as follows.

<div class="sample3 demo-grid small"></div>
1
const grid = vm.createGrid(document.querySelector('.sample3'));

const userTheme = {
  color: 'red',
  frozenRowsColor: 'red',
  defaultBgColor: '#FDD',
  frozenRowsBgColor: '#EAA',
  selectionBgColor: '#FDA',
  highlightBgColor: '#FDC',
  underlayBackgroundColor: '#FEE',
  // You can also change the theme apply in the state by using callback.
  frozenRowsBorderColor(args) {
    const {
      row,
      grid: {frozenRowCount}
    } = args;
    if (frozenRowCount - 1 === row) {
      return ['#F88'/*top*/, '#F88'/*right and left*/, 'red'/*bottom*/];
    } else {
      return '#F88';
    }
  },
  borderColor(args) {
    const {
      col,
      grid: {colCount}
    } = args;
    if (colCount - 1 === col) {
      return ['red'/*top*/, '#F88'/*right*/, 'red'/*bottom*/, null/*left*/];
    } else {
      return ['red'/*top and bottom*/, null/*right and left*/];
    }
  },
  highlightBorderColor: '#FD5',
  checkbox: {
    uncheckBgColor: '#FDD',
    checkBgColor: 'rgb(255, 73, 72)',
    borderColor: 'red',
  },
  button: {
    color: '#FDD',
    bgColor: '#F55',
  },
  font: '16px sans-serif',
  header: {
    sortArrowColor: '#D00'
  }
};
grid.theme = userTheme;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49