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

:root {

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

Default Theme

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

Example Usage

<zing-grid
  caption="Default Theme"
  theme="default">
</zing-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

<zing-grid
  caption="Android Theme"
  theme="android">
</zing-grid>

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

<zing-grid
  caption="iOS Theme"
  theme="ios">
</zing-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

<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.