Themes and styling.
Match light and dark app views using base presets and shared tokens.
Quick overview
Adjust brightness and row spacing to fit the same order data into your service. Choose a base theme first, then change only necessary colors.
Integration steps
- Compare base appearances
Compare Alpine and Balham in the Grid workspace's bottom options. Use the page's theme button to switch light and dark views.
- Choose readable spacing
Try 28, 36, and 44px row spacing and check that text and checkboxes are easy to read and use.
- Apply the settings in your app
Set theme and rowHeight. To change only some base colors, extend a theme and override the required tokens.
Match brightness, density, and colors to your service without changing data.
The documentation theme button controls this site's previews. In your app, pass the app's theme state directly to the Grid.
Useful terms
- Preset
- A predefined combination of colors and appearance.
- Token
- A variable representing an individual design value, such as background or border color.
Base themes
#theme provides light and dark Alpine and Balham presets. The page theme and workspace preset both affect previews. Pass your service's theme state to the Grid in your app.
grid.theme = 'alpine';
// 'alpine' | 'balham' | 'alpine-dark' | 'balham-dark'
const applyTheme = dark => { grid.theme = dark ? 'alpine-dark' : 'alpine'; };Custom tokens
#Extend a base preset through extends and override only required CSS variables in tokens. Adjust relevant areas such as headers, highlights, and focus instead of replacing the whole page background.
grid.theme = {
extends: 'alpine',
tokens: {
'--sy-grid-bg': '#ffffff',
'--sy-grid-header-bg': '#f6f7f3'
}
};For dark views, extend alpine-dark or balham-dark and supply colors suited to that background. The default logo follows the applied theme.
Row spacing and readability
#Control row spacing with rowHeight. Allow enough room for text, editors, and checkboxes. Verify selection, focus, and errors in both light and dark views.
grid.rowHeight = 36;
grid.height = 510;