# Themes for your app

Grid themes coordinate backgrounds, lines, text, and selection states inside the table. They define the table's reading environment without replacing the page background.

Canonical: https://grid.syidax.com/docs/guides/theming/

<a id="understand"></a>

## How it works and when to use it

Use alpine, balham, or their dark presets. Choose a base preset first, then override only the tokens you need to preserve contrast for hover, selection, errors, and other states.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Light and dark views

Explicitly update the Grid theme when the app theme changes.

```javascript
grid.theme = 'alpine';
// When the app switches to a dark theme:
grid.theme = 'alpine-dark';
```

Verify the result: Table text, lines, and backgrounds change together. Manage colors outside the table through app styles.

<a id="example-2"></a>

## Example 2. Adjust density

Balance the amount of visible data against readable spacing.

```javascript
grid.theme = 'balham';
grid.rowHeight = 36;
grid.height = 480;
```

Verify the result: Changing Grid height and row height changes the visible row count. Also test touch interaction and long text.

<a id="example-3"></a>

## Example 3. Extend with brand tokens

Pass {extends: baseTheme, tokens: tokenObject} to theme. Check GridTokenOverrides for available keys and adjust app accent colors, selection colors, and contrast.

Verify the result: Do not guess CSS variable names. After changes, verify that selected rows, editing errors, menus, and tooltips remain readable.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Renderer content taller than the fixed row height may be clipped. Design row layout and theme density together.

Mutating only the theme object's contents may not trigger an update. Pass new theme and tokens objects.

<a id="related-api"></a>

## APIs used by this feature

- [theme](https://grid.syidax.com/docs/options/theme.md) — Sets Grid colors and appearance with a light/dark preset or a token object extending a preset.
- [themeChanged](https://grid.syidax.com/docs/events/themeChanged.md) — Emitted when the Grid theme changes. Check it alongside the surrounding app theme.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/theming) — The guide describes which interactions are available to try.