---
title: "Styling | Features"
description: "Easily style ZingGrid with CSS selectors, ZingGrid's CSS variables, and built-in or custom themes."
url: https://www.zinggrid.com/docs/features/styling
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/styling.md
mode: provenance
representation: markdown
origin_response_id: 341becbbad80a4841eda7333442fbd1e
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.706Z
version_nonce: 893005ed8d3c28d2b372954ffb99a359
generated_at_utc: 2026-10-24T01:31:50.423Z
response_nonce: 679ad9a75ed65e4dbe4a6210b1a9dfae
```

# Styling

Style ZingGrid the way you want through CSS selectors or with ZingGrid's CSS variables. Use our built-in themes or create custom themes to easily switch up the look of your grid.

## CSS Variables

Easily style ZingGrid with CSS variables, like so:

```css
:root {
  --zing-grid-font-family: cursive;
}
```

> **Note:** Check out the [complete list of ZingGrid's CSS variables here](https://www.zinggrid.com/docs/api/css-variables/reference).

### CSS Variables Styled Grid
Here is a complete grid that has been styled via ZingGrid's CSS variables:

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

## Component Selectors

You can also use native CSS selectors to style your grid, like so:

```css
zing-grid {
  font-family: cursive;
}
```
### CSS Selectors Styled Grid
Here is a complete grid that has been styled via CSS selectors:

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

## CSS Shadow Parts

Use CSS shadow parts to style shadow elements within the grid:

```css
zg-dialog::part(header) {
  background-color: red;
}
```
### CSS Shadow Parts Styled Grid
Here is a complete grid that has ZGDialog styled via CSS shadow parts:

[Example code](https://app.zingsoft.com/demos/embed/9RGK3YSE)

## Themes

Easily change the theme of your ZingGrid by applying the `theme` attribute on `<zing-grid>` (see below). Choose from these built-in themes: **Android , Black, Dark, or iOS** or check out the Custom Theme section below to create your own. For the default theme, just omit the attribute (or set the value to `default`).

```html
<zing-grid theme="...">...</zing-grid>
```

### Default Theme
Here is a complete grid styled with the default theme:

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

### Android Theme
Here is a complete grid styled with the Android theme:

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

### iOS Theme
Here is a complete grid styled with the iOS theme:

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

### Black Theme
Here is a complete grid styled with the black theme:

[Example code](https://app.zingsoft.com/demos/embed/30HHCVKO)

### Dark Theme
Here is a complete grid styled with the dark theme:

[Example code](https://app.zingsoft.com/demos/embed/6140SLQI)

## Custom Theme

You can also create your own theme (with optional custom icons) and use the built-in CSS variables to customize your grid's colors, fonts, borders, and spacing.

---

To create a new theme, start a new `.css` file and add the following code:

```css
:host([theme="mytheme"]) {
  /* Add css vars here */
}
```

Then, change the theme value to a name of your choosing. For example: `[theme="mytheme"]`.

> **Warning:** You **must** name the `.css` file the same as you set in the `:host` attribute value. ZingGrid replaces the file path with the name of the file so that the selector inside the CSS file matches. For example, to enable your custom theme, you would call ZingGrid as `<zing-grid theme="path/to/mytheme.css">`. When the grid is rendered, the library changes that path to `<zing-grid theme="mytheme">` so that the selector `:host([theme="mytheme"])` matches.

### Custom Theme Grid
Here is a complete grid styled with a custom theme:

[Example code](https://app.zingsoft.com/demos/embed/9N1DEL8N)

### Custom SVG File (Optional)

When you create a custom theme, you can optionally provide a matching SVG file (`mytheme.svg`) in the same location as the .css file to load your own icons. In your new SVG file, just add new symbols for the icons you wish to replace (see below). Any icons not replaced will show the default icon instead.

> **Note:** You can check out the [list of ZingGrid's default SVG icons here](https://app.zingsoft.com/demos/embed/HJ08BICR).

```html
<svg id="mytheme" xmlns="http://www.w3.org/2000/svg">
  <!-- checked -->
  <symbol id="checked" viewBox="0 0 24 24">
    <path .../>
  </symbol>
  <!-- Edit -->
  <symbol id="edit" viewBox="0 0 24 24">
    <path .../>
  </symbol>
</svg>
```

> **Warning:** Remember to set the `id` attribute to your theme name

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Styling Basics Guide](https://www.zinggrid.com/docs/styling-basics)
* [CSS Variables List](https://www.zinggrid.com/docs/api-css-variables)