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.