docs
Menu
Menu

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.

Using Theme Variables

Using ZingGrid's CSS theme variables is just like using any CSS variables. The CSS theme variables are helpful to scaffold a new theme or to build off an existing theme.

Using CSS variables is as simple as setting the variables in your CSS under the :root{} or zing-grid selector.

CloseCopy Copied
/* preferred usage */
:root {
  --theme-background-color:red;
}

/* alternative usage */
zing-grid {
  --theme-background-color:red;
}

Base Theme CSS Variables

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

CloseCopy Copied
: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

CloseCopy Copied
<zing-grid
  caption="Default Theme"
  theme="default">
</zing-grid>
Note: You may omit theme="default" for the default theme.

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

CloseCopy Copied
<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

CloseCopy Copied
<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

CloseCopy Copied
:host([theme="customTheme"]) {

  /* MY VARS */
  --theme-background-color:red;
  ...
}

After registering the theme's namespace, you can reference your custom theme in a grid.

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

CloseCopy Copied
<zing-grid
  caption="Custom Theme"
  theme="/public/css/customTheme.css"
></zing-grid>

You can dynamically update the theme attribute at runtime. This includes pointing to a remote .CSS file, as well as all of our built-in themes. This feature is directly a product of using CSS variables internally.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading