---
title: "Theming System | Docs"
description: "Theme variables are generalized CSS variables we put in place to help style grids effectively. By default, the grid will have some existing CSS styling."
url: https://www.zinggrid.com/docs/v1/api/styling/theming-system
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/styling/theming-system.md
mode: provenance
representation: markdown
origin_response_id: 6b6af2f97445d53937a5e512b03a7f58
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.745Z
version_nonce: fa4a6cdd2409fec3319a41a17fc91cd9
generated_at_utc: 2026-10-24T06:54:48.967Z
response_nonce: 447a54bf9432ff8f5b9087ced7821c2d
```

# Theming System

Theme variables are generalized CSS variables we've put in place to help style your grids effectively. By default, the grid will have some existing CSS styling to scaffold the overall structure of the grid.

## Base Theme

Below is a list of generalized CSS variables to customize your own theme. Apart from the default grid styling, we support users adjusting three base themes: Default, Android, and iOS.

Example Usage
```css
:root {

  /* MY VARS */
  --zg-caption-color: red;
  ...
}
```

| Name | Default | Description |
| --- | --- | --- |
| `--theme-background-color` | rgba(166, 213, 250, 0.2) | Styles the background of row on hover |
| `--theme-background-zebra` | #f5f5f5 | Styles the background of 'even' rows in [zebra]-striping mode |
| `--theme-border-color` | #e3e3e3 | Styles the border color |
| `--theme-color` | rgb(33, 33, 33, 1) | Sets the font color of most components, including cell content. |
| `--theme-color_alt` | rgba(117, 117, 117, 1); | Sets the font color of alternate text |
| `--theme-color-alert` | red | Sets the font color for 'alert' messages |
| `--theme-color-light` | #191818 | Defines the baseline light color |
| `--theme-color-light` | #f2f2f2 | Defines the baseline light color |
| `--theme-color-lighter` | #fbfbfb | Defines the baseline lighter color |
| `--theme-color-primary` | rgba(33, 150, 243, 1) | Sets the font color of primary text |
| `--theme-color-secondary` | var(--theme-color-primary) | Sets the font color of secondary text for components of functionality, such as header cells. |
| `--theme-color-success` | green | Sets the font color for 'success' messages |
| `--theme-color-warn` | #ecd800 | Sets the font color of 'warn' messages |
| `--theme-font-family` | 'Roboto', verdana, sans-serif | Sets the font family of grid |
| `--theme-font-size` | 0.875rem | Sets the base font size of grid |
| `--theme-font-style` | normal | Sets the font style of grid |
| `--theme-font-weight` | normal | Sets the font weight of grid |
| `--theme-line-height` | 1rem | Sets the line height of grid |
| `--theme-margin` | 20px | Sets the margin of pager controls |
| `--theme-padding_x` | 1rem | Sets the horizontal padding of cells |
| `--theme-padding_y` | 0 | Sets the vertical padding of cells |
| `--theme-transition_speed` | 150ms | Sets the animation speed for transitions |

## Default Theme

The default theme is here to set the base styling for itself and the other ZingGrid built-in themes.

Example Usage
```html
<zing-grid
  caption="Default Theme"
  theme="default">
</zing-grid>
```

| Name | Default | Description |
| --- | --- | --- |
| `---zg-button-color_custom` | #000 | Sets the font color of custom button |
| `--zg-button-background_custom` | #fff | Styles the background of custom button |
| `--zg-button-background_custom_active` | #0594de | Styles the background of custom button on active state |
| `--zg-button-background_custom_focus` | var(--theme-color-primary) | Styles the background of custom button on focus |
| `--zg-button-background_custom_hover` | var(--theme-color-primary) | Styles the background of custom button on hover |
| `--zg-button-background_hover` | rgba(255, 255, 255, 0.3) | Styles the background of button on hover |
| `--zg-button-border_custom` | 1px solid var(--theme-border-color) | Styles the border of custom button |
| `--zg-button-border_custom_active` | 1px solid #4eaada | Styles the border of custom button on active state |
| `--zg-button-border_custom_focus` | 1px solid #5ac4fb | Styles the border of custom button on focus |
| `--zg-button-border_custom_hover` | 1px solid #5ac4fb | Styles the border of custom button on hover |
| `--zg-button-box-shadow_custom` | 0 0 5px 0 #a6a6a6 | Applies box shadow behind custom button |
| `--zg-button-box-shadow_custom_active` | 0 0 5px 0 #86d3fb | Applies a box shadow behind custom button on active state |
| `--zg-button-box-shadow_custom_focus` | 0 0 6px 0 #86d3fb | Applies a box shadow behind custom button on focus |
| `--zg-button-box-shadow_custom_hover` | 0 0 6px 0 #86d3fb | Applies a box shadow behind custom button on hover |
| `--zg-button-color_custom_active` | #fff | Sets the font color of custom button on active state |
| `--zg-button-color_custom_focus` | #fff | Sets the font color of custom button on focus |
| `--zg-button-color_custom_hover` | #fff | Sets the font color of custom button on hover |
| `--zg-button-focus` | 2px solid green | Styles the border of button on focus |
| `--zg-caption-background` | #003749 | Styles the background of caption |
| `--zg-caption-color` | #fff | Styles the font color of caption |
| `--zg-caption-height` | 4rem | Sets the height of caption |
| `--zg-caption-icon-color` | #fff | Sets the icon color in caption |
| `--zg-caption-padding` | 0 var(--theme-padding_x) | Sets the padding of caption |
| `--zg-cell-background_aggregate` | var(--zg-filter-background) | Styles the background of 'aggregate' row |
| `--zg-cell-background_aggregate_sorted` | var(--theme-background-color) | Styles the background of sorted aggregate cells |
| `--zg-cell-background_sorted` | var(--theme-background-color) | Styles the background of sorted cells |
| `--zg-cell-border-top_aggregate` | 1px solid var(--theme-border-color) | Sets the top border of 'aggregate' rows |
| `--zg-cell-border-top_aggregate` | 1px solid var(--theme-border-color) | Sets the top border of 'aggregate' rows |
| `--zg-cell-border-top_aggregate_sorted` | 1px solid #b3d6ff | Styles the border-top of sorted aggregate cells |
| `--zg-cell-border-top_frozen` | 1px solid var(--theme-border-color) | Sets the top border of 'frozen' rows |
| `--zg-cell-border-top_frozen` | 1px solid var(--theme-border-color) | Sets the top border of 'frozen' rows |
| `--zg-control-bar-background` | #e3ecf6 | Styles the background of control bar |
| `--zg-filter-background` | #f5f5f5 | Styles the background of filter |
| `--zg-filter-background_sorted` | #c5dbf3 | Styles the background of filter in sorted column |
| `--zg-filter-height` | 40px | Sets the height of filter row |
| `--zg-filter-input-background` | #fff | Styles the background of filter input |
| `--zg-filter-input-border` | 1px solid var(--theme-border-color); | Styles the border of filter input |
| `--zg-filter-input-font-size` | .75rem | Sets the font size of the filter input |
| `--zg-filter-menu-background` | #ff | Style the background of filter menu |
| `--zg-foot-background` | var(--theme-color-lighter) | The footer background |
| `--zg-head-background` | var(--theme-color-lighter) | Styles the background of the grid head |
| `--zg-head-cell-background_sorted` | #d1e7ff | Styles the background of sorted head cells |
| `--zg-head-cell-font-size` | .9rem | Sets the font size of head cells |
| `--zg-head-cell-icon-margin` | 0 5px 0 -3px | Sets the margin of child icons in head cells |
| `--zg-head-cell-padding` | 0 var(--theme-padding_x) | Sets the padding of head cells |
| `--zg-head-cell-parent-background` | #fff | Styles the background of 'parent' head cells |
| `--zg-head-cell-parent-background_hover` | var(--theme-color-lighter); | Styles the background of 'parent' head cells on hover |
| `--zg-head-cell-parent-border-bottom_hover` | 1px solid var(--theme-border-color) | Styles the bottom border of 'parent' head cells |
| `--zg-head-cell-parent-font-size` | .85rem | Sets the font size of 'parent' head cells |
| `--zg-head-cell-parent-font-weight` | 400 | Sets the font weight of 'parent' head cells |
| `--zg-icon-height` | 20px | Sets the height of icon |
| `--zg-icon-init-fill` | #d4d4d4 | Sets the initial color of icon |
| `--zg-icon-width` | 20px | Sets the width of icon |
| `--zg-menu-background` | #ff | Style the background of menu |
| `--zg-pager-padding` | 0 var(--theme-padding_x) var(--theme-padding_x) | Sets the padding of pager |
| `--zg-pager-section-margin-top` | 13px | Sets the top margin of pager |
| `--zg-row-body-background_hover` | var(--theme-background-color) | Styles the backgrounf of body rows on hover |
| `--zg-row-card-background_editor_even` | linear-gradient(var(--theme-color-lighter), var(--theme-color-lighter) 43px, var(--theme-border-color) 44px, var(--zg-row-card-background_even, var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff)))) 45px); | Styles the background of 'even' card editor head in card layout-mode |
| `--zg-row-card-background_editor_even` | linear-gradient(var(--theme-color-lighter), var(--theme-color-lighter) 43px, var(--theme-border-color) 44px, var(--zg-row-card-background_even, var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff)))) 45px) | Styles the background of 'odd' card editor head when `[editor-controls]` is added to `<zing-grid>`. Styling should account for the editor controls above the cells. |
| `--zg-row-card-background_editor_odd` | linear-gradient(var(--theme-color-lighter), var(--theme-color-lighter) 43px, var(--theme-border-color) 44px, var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff)))) 45px); | Styles the background of 'odd' card editor head in card layout-mode |
| `--zg-row-card-background_editor_odd` | linear-gradient(var(--theme-color-lighter), var(--theme-color-lighter) 43px, var(--theme-border-color) 44px, var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff)))) 45px) | Styles the background of 'odd' card editor head when `[editor-controls]` is added to `<zing-grid>`. Styling should account for the editor controls above the cells. |
| `--zg-row-head-height` | 40px | Sets the height of row head |
| `--zg-row-height_aggregate` | 40px | Sets the height of 'aggregate' rows |
| `--zg-search-background` | #fff | Styles the background of search input |
| `--zg-select-height` | 28px | Sets the height of select input |
| `--zg-select-min-width` | 40px | Sets the minimum width of select input |
| `--zg-status-offset` | 10px | Sets the distance between the status message and the grid edge. |
| `--zg-status-offset` | 10px | Sets the distance between the status message and the grid edge. |
| `--zing-grid-background` | #fff | Styles the background of grid |

## Android Theme

The Android theme is intended to look and feel like a native Android application. The CSS variables below are the default values for the Android theme.

Example Usage
```html
<zing-grid
  caption="Android Theme"
  theme="android">
</zing-grid>
```

| Name | Default | Description |
| --- | --- | --- |
| `--android-background_sorted` | #fafbfa | Styles the background of sorted cell |
| `--android-caption-color` | #607d8b | Styles the background of caption |
| `--android-color-primary` | #00796B | Sets the font color of primary text and icons |
| `--android-color-secondary` | #263238 | Sets the font color of secondary text |
| `--android-focus-color` | #4db6ac | Styles the border of inputs and text of inputs on focus |
| `--android-font-size` | .9375rem | Sets the base font size of grid |
| `--android-input-height` | 22px | Sets the height of inputs |
| `--theme-background-color` | rgba(0, 122, 255, .05) | Styles the background of rows on hover |
| `--theme-border-color` | #ebebeb | Styles the border |
| `--theme-color` | #4d4d4d | Sets the color of text |
| `--theme-color_alt` | #333333 | Sets the color of alternative text |
| `--theme-color-primary` | var(--android-color-primary) | Sets the color of primary text and icons |
| `--theme-color-secondary` | var(--android-color-secondary); | Sets the color of secondary text |
| `--theme-font-family` | "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; | Sets the font family of text |
| `--theme-font-size` | var(--android-font-size) | Sets the base font size of text of grid |
| `--theme-font-style` | normal | Sets the font style of text |
| `--theme-font-weight` | normal | Sets the font-weight of text |
| `--theme-line-height` | 1.2rem | Sets the line height |
| `--theme-padding_x` | 1rem | Sets the horizontal padding of cells |
| `--theme-padding_y` | 1rem | Sets the vertical padding of cells |
| `--zg-caption-background` | var(--android-caption-color) | Styles the background of caption |
| `--zg-caption-box-shadow` | 0 2px 5px rgba(0,0,0,.26) | Applies a box shadow behind caption |
| `--zg-caption-color` | #fff | Sets the font color of caption |
| `--zg-caption-font-size` | 1.125rem | Sets the base font size of caption |
| `--zg-caption-font-weight` | 500 | Sets the font weight of caption |
| `--zg-caption-icon-height` | 24px | Sets the height of icons in caption |
| `--zg-caption-icon-width` | 24px | Sets the width of icons in caption |
| `--zg-caption-title-flex` | 1 | Sets are elements are flex in caption |
| `--zg-cell-background_sorted` | var(--android-background_sorted) | Styles the background of sorted cells |
| `--zg-dialog-footer-justify-content` | flex-end | Sets the horizontal alignment of contents in the dialog footer |
| `--zg-editor-row-input-background_focus` | #fff | Styles the background of editor input on focus |
| `--zg-editor-row-input-border-bottom_focus` | 2px solid var(--android-focus-color) | Styles bottom border of editor input on focus |
| `--zg-editor-row-input-color_focus` | var(--android-focus-color) | Styles the font color of editor input on focus |
| `--zg-editor-row-input-padding` | 13px 15px 12px 13px | Sets the padding of editor input |
| `--zg-editor-row-input-transform` | translate3d(0,-1px,0) | Sets the transform of editor input |
| `--zg-filter-background_sorted` | #ececec | Styles the background of filter in sorted column |
| `--zg-focus-border` | 2px solid var(--android-focus-color) | Styles the border of inputs on focus |
| `--zg-head-cell-background_sorted` | #546e7a | Styles the backgrounf of sorted head cells. Note that this will overwrite associated hover styles. |
| `--zg-head-cell-border-top` | 1px solid transparent | Styles the top border of head cells |
| `--zg-head-cell-border-top_sorted_hover` | 1px solid transparent | Styles the top border of sorted head cells on hover |
| `--zg-head-cell-color` | var(--android-color-primary) | Sets the font color of head cells |
| `--zg-head-cell-color_sorted` | #fff | Sets the font color of sorted head cells. Note that this will overwrite associated hover styles. |
| `--zg-head-cell-font-size` | .875rem | Sets the font size of head cells |
| `--zg-head-cell-icon-color_sorted` | #fff | Sets the icon color of sorted head cells. Note that this will overwrite associated hover styles. |
| `--zg-head-cell-parent-background` | #f5f5f5 | Styles the background of 'parent' head cells |
| `--zg-head-cell-parent-border-bottom` | 1px solid #cfd8dc | Styles the bottom border of 'parent' head cells |
| `--zg-head-cell-transition_sorted_hover` | background .15s | Sets the transition of sorted head cells on hover |
| `--zg-icon-color` | var(--theme-color-primary) | Sets the color of icon |
| `--zg-input-background` | none | Styles the background of input field |
| `--zg-input-border` | 0 | Styles the border of input field |
| `--zg-input-border_focus` | 0 | Styles the border of input field on focus |
| `--zg-input-border-bottom` | 2px solid var(--android-focus-color) | Styles the bottom border of input field |
| `--zg-input-border-bottom_focus` | 2px solid var(--android-focus-color) | Styles the bottom border of input field on focus |
| `--zg-input-color_focus` | var(--android-focus-color) | Sets the font color of input field on focus |
| `--zg-input-font-size` | .8125rem | Sets the base font size of input field |
| `--zg-input-font-size_focus` | 1rem | Sets the base font size of input field on focus |
| `--zg-input-height` | var(--android-input-height) | Sets the height of input field |
| `--zg-input-padding` | 0 0 4px | Sets the padding of input field |
| `--zg-input-transform` | translateY(1px) | Sets the transform of input field |
| `--zg-input-transform_focus` | translateY(1px) | Sets the tranform of input field on focus |
| `--zg-input-width` | 22px | Sets the width of input field |
| `--zg-menu-bar-background` | #f0f4f9 | Styles the background of menu bar |
| `--zg-menu-bar-icon-color` | #4db6ac | Sets the icon color of menu bar |
| `--zg-option-list-item-background_hover` | #e0f2f1 | Styles the background of option list item on hover |
| `--zg-option-list-item-height` | 28px | Sets the height of option list item on hover |
| `--zg-option-list-item-padding` | 0 5px | Sets the padding of option list item on hover |
| `--zg-pager-background` | #f0f0f0 | Styles the background of pager |
| `--zg-pager-border-top` | 0 | Styles the top border of pager |
| `--zg-pager-font-size` | .8125rem | Sets the font size of pager |
| `--zg-pager-height` | 40px | Sets the height of pager |
| `--zg-row-body-height` | 53px | Sets the height of body rows |
| `--zg-row-card-box-shadow` | 0 3px 20px 0 rgba(0,0,0,0.075) | Applies a box shadow behind cards in 'card' layout-mode |
| `--zg-row-card-grid-gap` | 25px | Sets the gap between cards in 'card' layout-mode |
| `--zg-select-arrow-background` | none | Styles the backgrounf of select arrow |
| `--zg-select-arrow-border` | 0 | Styles the border of select arrow |
| `--zg-select-background` | none | Styles the background of select |
| `--zg-select-border` | 0 | Styles the border of select |
| `--zg-select-border-bottom` | 2px solid var(--android-focus-color) | Styles the bottom border of select |
| `--zg-select-height` | var(--android-input-height) | Sets the height of select |
| `--zg-select-min-width` | 15px | Sets the minimum width of select |
| `--zg-select-outline` | none | Styles of outline of select |
| `--zg-select-text-background` | none | Styles the background of select in active state |
| `--zg-status-background` | #333 | Styles the background of status |
| `--zg-watermark-background` | #cfd8dc | Styles the background of watermark |
| `--zg-watermark-border-top` | 0 | Styles the top border of watermark |
| `--zg-watermark-color` | var(--theme-color-secondary) | Sets the font color of watermark |
| `--zg-watermark-font-size` | 10px | Sets the base font size of watermark |
| `--zing-grid-background` | #fff | Styles the background of header and body rows |
| `--zing-grid-border` | 0 | Styles the border of grid |
| `--zing-grid-box-shadow` | 0 5px 15px rgba(0,0,0, 0.2), 0 5px 5px rgba(0,0,0, 0.07) | Applies a box shadow behind grid |
| `--zing-grid-table-border-left` | 0 | Styles the left border of grid body |
| `--zing-grid-table-border-right` | 0 | Styles the right border of grid body |

## iOS Theme

The Android theme is intended to look and feel like a native Android application. The CSS variables below are the default values for the Android theme.

Example Usage
```html
<zing-grid
  caption="iOS Theme"
  theme="ios">
</zing-grid>
```

| Name | Default | Description |
| --- | --- | --- |
| `---zg-row-head-height` | 45px | Sets the height of row head |
| `--ios-background_alt` | #f0f4f7 | Sets the alternative background |
| `--ios-background-color` | #fcfcfc | Sets the background |
| `--theme-background-color` | rgba(0, 122, 255, .05) | Styles the background of rows on hover |
| `--theme-background-zebra` | var(--ios-background-color) | Styles the background of 'even' body rows in [zebra]-striping mode |
| `--theme-border-color` | #e4e4e4 | Styles the border of most components |
| `--theme-color` | #4d4d4d | Sets the text color |
| `--theme-color_alt` | #333333 | Sets the alternate text color |
| `--theme-color-primary` | #007aff | Sets the primary color |
| `--theme-font-family` | -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, sans-serif | Sets the font family of text |
| `--theme-font-size` | .9375rem | Sets the font size of text |
| `--theme-font-style` | normal | Sets the font style of text |
| `--theme-font-weight` | normal | Sets the font weight of text |
| `--theme-line-height` | normal | Sets the line height of text |
| `--theme-padding_x` | 1.25rem | Sets the horizontal padding of cells |
| `--tooltip-background` | #adadad | Styles the background of tooltip |
| `--zg-body-background` | #fff | Styles the background of grid body |
| `--zg-body-border-bottom` | 1px solid var(--theme-border-color) | Styles the bottom border of grid body |
| `--zg-button-color` | var(--theme-color-primary) | Sets the font color of button |
| `--zg-button-padding` | 3px | Sets the padding of button |
| `--zg-caption-background` | var(--ios-background-color) | Styles the background of caption |
| `--zg-caption-border-bottom` | 0 | Styles the bottom border of caption |
| `--zg-caption-button-background_hover` | #f5f5f5 | Styles the background of button in caption on hover |
| `--zg-caption-color` | var(--theme-color) | Sets the font color of caption |
| `--zg-caption-flex-direction` | column | Sets the flex direction of content in caption |
| `--zg-caption-font-size` | 1.6rem | Sets the base font size of caption |
| `--zg-caption-font-weight` | bold | Sets the font weight of caption |
| `--zg-caption-height` | 40px | Sets the height of caption |
| `--zg-caption-icon-color` | var(--theme-color-primary) | The font-color of the icons in the caption |
| `--zg-caption-padding` | 30px var(--theme-padding_x) 10px | Sets the padding of caption |
| `--zg-caption-title-align-self` | flex-start | Sets vertical alignment of caption title |
| `--zg-caption-title-order` | 2 | Sets the order of contents in caption title |
| `--zg-caption-title-transform` | 0 | Sets transform of caption title |
| `--zg-caption-title-width` | 80% | Sets width of caption title |
| `--zg-caption-toolbar-align-self` | flex-end | Sets vertical alignment of caption toolbar |
| `--zg-caption-toolbar-justify-content` | flex-end | Sets the horizontal alignment of contents in the caption toolbar |
| `--zg-caption-toolbar-width` | calc(100% + 2px) | Sets the width of the caption toolbar |
| `--zg-cell-border-top_aggregate` | 1px solid transparent | Styles the top border of 'aggregate' cells |
| `--zg-cell-border-top_aggregate_sorted` | 1px solid #f5f5f5 | Styles the top border of 'aggregate' cells |
| `--zg-cell-font-size_aggregate` | .8125rem | Sets the font size of 'aggregate' cells |
| `--zg-cell-item-padding_layout_card` | 6px 0 | Sets the padding of cards in 'card' layout-mode |
| `--zg-control-bar-background` | var(--ios-background) | Styles the background on control bar |
| `--zg-control-bar-padding` | 0 var(--theme-padding_x) 0 calc(var(--theme-padding_x) - 6px) | Sets the padding of control bar |
| `--zg-filter-background` | var(--ios-background-color); | Styles the background of filter input field |
| `--zg-filter-background_sorted` | var(--zg-cell-background_aggregate_sorted) | Styles the background of filter input field |
| `--zg-filter-border-top` | 1px solid var(--ios-background-color) | Styles the top border of filter row |
| `--zg-filter-border-top_sorted` | 1px solid #f5f5f5 | Styles the top border of filter row in sorted column |
| `--zg-filter-height` | 45px | Sets the height of filter row |
| `--zg-filter-input-background` | #eaeaea | Styles the background of filter input field |
| `--zg-filter-input-border` | 0 | Styles the border of filter input field |
| `--zg-filter-input-border-radius` | 5px | Sets the border radius of filter input field |
| `--zg-filter-input-font-size` | .8rem | Sets the font size of filter input field |
| `--zg-filter-input-margin` | -2px calc(var(--theme-padding_x) - 2px) 0 | Sets the margin of filter input field |
| `--zg-filter-input-padding` | 3px 0 3px 7px | Sets the padding of filter input field. May need to set --zg-filter-height if input field is height is larger than height of filter. |
| `--zg-head-background` | var(--ios-background-color) | Styles the background of grid head |
| `--zg-head-border-bottom` | 0 | Styles the bottom border og grid head |
| `--zg-head-cell-data-line-height` | none | Sets the line height of head cells |
| `--zg-head-cell-font-weight` | 600 | Sets the font weight of head cells |
| `--zg-head-cell-icon-margin` | 0 5px 0 -4px | Sets the margin of child icons in head cells |
| `--zg-head-cell-parent-background` | none | Styles the background of 'parent' head cells |
| `--zg-head-cell-parent-font-weight` | 400 | Sets the font weight of 'parent' head cells |
| `--zg-head-cell-parent-padding` | 0 var(--theme-padding_x) | Sets the padding of 'parent' head cells |
| `--zg-icon-color` | var(--theme-color-primary) | Sets the color of icon |
| `--zg-icon-height` | 20px | Sets the height of icon |
| `--zg-icon-width` | 20px | Sets the width of icon |
| `--zg-input-border-radius` | 5px | Sets the border radius of input |
| `--zg-menu-item-color_hover` | #fff | Sets the font color of menu item on hover |
| `--zg-menu-item-color_hover` | #fff | Sets the font color of menu item on hover |
| `--zg-pager-background` | #fff | Styles the background of pager |
| `--zg-pager-border-top` | 1px solid var(--theme-border-color) | Styles the top border of pager |
| `--zg-pager-font-size` | .8125rem | Sets the base font size of pager |
| `--zg-pager-height` | 50px | Sets the height of pager |
| `--zg-pager-margin` | 20px 0 0 | Sets the margin of pager |
| `--zg-pager-padding` | 0 var(--theme-padding_x) 10px | Sets the padding of pager |
| `--zg-pager-section-margin-top` | 10px | Sets the top margin of pager |
| `--zg-row-body-border-top` | 1px solid var(--theme-border-color) | Styles the top border of body rows |
| `--zg-row-body-height` | 48px | Sets the height of body rows |
| `--zg-row-card-box-shadow` | 0 | Applies a box shadow behind cards in 'card' layout-mode |
| `--zg-search-border` | 1px solid var(--theme-border-color) | Styles the border of search input field |
| `--zg-search-border-radius` | 5px | Sets the border radius of search input field |
| `--zg-watermark-color` | var(--theme-color) | Sets the font color of watermark |
| `--zg-watermark-color_strong` | var(--theme-color) | Sets the font color of bold text in watermark |
| `--zing-grid-background` | #fbfbfb | Styles the background of grid |

## Custom Theme

You can create custom themes by creating your own context for the theme and referencing that in your grid. You will need to attach a host context to start creating a custom theme.

Example Usage
```html
<zing-grid
  caption="Custom Theme"
  theme="customTheme">
</zing-grid>
```

You can put this host context directly in a CSS file called **customTheme.css** and reference that file path directly in the grid or the theme value. For a base theme file you can fork and change to fit your custom theme, check out our [Dark Theme file](https://www.zinggrid.com/assets/plugin/zg-themes/dark-theme.css).

[Example code](https://app.zingsoft.com/demos/embed/7ZMLOK3J)