Docs

Theme Variables

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

These are the 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 iOS theme is intended to look and feel like a native iOS application. The CSS variables below are the default values for the iOS 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, as well as the theme value.