Theme Customization

Customize Handsontable’s appearance using the Theme API, Figma Theme Generator, CSS variables, or the visual Theme Builder.

Overview

CSS variables provide a powerful and flexible way to customize Handsontable’s appearance by adjusting design elements such as colors, spacing, borders, and typography to match your application’s design system. These variables give you granular control over every visual aspect of the data grid, from basic styling to advanced component customization.

We provide multiple approaches for leveraging CSS variables to create any look that your designer can imagine. From quick theme modifications to completely custom designs, your options include:

Theme API – Modify themes via configuration parameters or register your own custom theme programmatically.
Figma Theme Generator – Modify design variables in Figma and export them using the Figma Theme Generator tool.
Override CSS variables – Directly override CSS variables or edit CSS files from the /styles directory for full control.
Theme Builder UI – Use the online Theme Builder to visually customize and export your theme without writing code.

The data grid’s styling system is built entirely on CSS variables, with over 200 variables organized into logical categories covering typography, colors, spacing, borders, and component-specific styling listed below.

Option 1: Theme API

The Theme API allows you to customize themes programmatically by registering custom themes and configuring them at runtime. You can use the theme option with a ThemeBuilder object for dynamic configuration.

Register a custom theme

Use registerTheme to create a custom theme with your own configuration:

1
import Handsontable from 'handsontable';
2

3
import { mainTheme, registerTheme } from 'handsontable/themes';
4

5
// Register main theme
6
const myTheme = registerTheme(mainTheme);
7

8
// Configure the theme at runtime
9
myTheme.setColorScheme('light');
10
myTheme.setDensityType('default');

1
<hot-table [theme]="myTheme">
2
</hot-table>

Configure theme parameters

Use the params() method to update theme parameters dynamically:

1
myTheme.params({
2
  colors: {
3
    primary: {
4
      500: '#9333ea', // Change primary color
5
    },
6
  },
7
  tokens: {
8
    fontSize: '16px',
9
    iconSize: 'sizing.size_5',
10
    borderColor: ['colors.primary.500', 'colors.primary.600'],
11
  },
12
});

Theme API example

The following example demonstrates using the Theme API to register a theme with a custom purple accent color:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4
import { horizonTheme, registerTheme } from 'handsontable/themes';
5

6
// Register Handsontable's modules
7
registerAllModules();
8

9
// Register the main theme with custom parameters
10
const myTheme = registerTheme(horizonTheme);
11

12
// Configure theme parameters using the params() method
13
myTheme.params({
14
  colors: {
15
    primary: {
16
      500: '#9333ea', // Change primary color
17
    },
18
  },
19
  tokens: {
20
    fontSize: '16px',
21
    iconSize: 'sizing.size_5',
22
    accentColor: ['colors.primary.500', 'colors.primary.600'],
23
  },
24
});
25

26
// Set color scheme and density type
27
myTheme.setColorScheme('light');
28
myTheme.setDensityType('default');
29

30
@Component({
31
  selector: 'example2-demo',
32
  standalone: false,
33
  template: ` <div>
34
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
35
  </div>`,
36
})
37
export class Example2DemoComponent {
38
  readonly data: Array<Array<string | number>> = [
39
    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],
40
    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],
41
    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],
42
    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],
43
    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],
44
  ];
45

46
  readonly gridSettings: GridSettings = {
47
    theme: myTheme,
48
    colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],
49
    columns: [
50
      { data: 0, type: 'text' },
51
      { data: 1, type: 'text' },
52
      { data: 2, type: 'text' },
53
      { data: 3, type: 'numeric' },
54
      { data: 4, type: 'text' }
55
    ],
56
    rowHeaders: true,
57
    dropdownMenu: true,
58
    width: '100%',
59
    height: 'auto',
60
    licenseKey: 'non-commercial-and-evaluation'
61
  };
62
}
63
/* end-file */
64

65

66
/* file: app.module.ts */
67
import { NgModule, ApplicationConfig } from '@angular/core';
68
import { BrowserModule } from '@angular/platform-browser';
69
import { registerAllModules } from 'handsontable/registry';
70
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
71
import { CommonModule } from '@angular/common';
72
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
73
/* start:skip-in-compilation */
74
import { Example2DemoComponent } from './app.component';
75
/* end:skip-in-compilation */
76

77
// register Handsontable's modules
78
registerAllModules();
79

80
export const appConfig: ApplicationConfig = {
81
  providers: [
82
    {
83
      provide: HOT_GLOBAL_CONFIG,
84
      useValue: {
85
        license: NON_COMMERCIAL_LICENSE,
86
      } as HotGlobalConfig
87
    }
88
  ],
89
};
90

91
@NgModule({
92
  imports: [ BrowserModule, HotTableModule, CommonModule ],
93
  declarations: [ Example2DemoComponent ],
94
  providers: [...appConfig.providers],
95
  bootstrap: [ Example2DemoComponent ]
96
})
97

98
export class AppModule { }
99
/* end-file */

1
<example2-demo></example2-demo>

Option 2: Figma Theme Generator

The Figma Theme Generator allows designers and developers to work together seamlessly by exporting design tokens directly from Figma into a CSS theme file.

Export themes from Figma

To create a new theme or modify an existing one in Figma:

Open your Figma design file and modify the design variables (colors, spacing, typography, etc.) to match your requirements.
Export the design tokens as JSON using Figma’s built-in variables export or a plugin.
Visit the Handsontable Theme Generator and follow the instructions to convert your Figma tokens into CSS theme files or JS variable objects.

The Theme Generator transforms JSON tokens exported from Figma into properly formatted theme files that work with Handsontable. It outputs CSS files (with or without icons) and JS variable files for colors, tokens, and icons. This approach is ideal for teams where designers define the visual language in Figma and developers implement it in code.

Option 3: Override CSS variables

For full control over your theme, you can override CSS variables directly. Follow these steps to apply a theme, then override the variables for your chosen theme.

You can also directly modify the CSS theme files located in handsontable/dist/styles/themes/. This gives you immediate access to all CSS variables and allows for quick iterations.

Here’s an example for .ht-theme-main:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example1-demo',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`,
11
})
12
export class Example1DemoComponent {
13
  readonly data: Array<Array<string | number>> = [
14
    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],
15
    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],
16
    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],
17
    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],
18
    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],
19
  ];
20

21
  readonly gridSettings: GridSettings = {
22
    colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],
23
    columns: [
24
      { data: 0, type: 'text' },
25
      { data: 1, type: 'text' },
26
      { data: 2, type: 'text' },
27
      { data: 3, type: 'numeric' },
28
      { data: 4, type: 'text' }
29
    ],
30
    rowHeaders: true,
31
    width: '100%',
32
    height: 'auto',
33
    licenseKey: 'non-commercial-and-evaluation'
34
  };
35
}
36
/* end-file */
37

38

39
/* file: app.module.ts */
40
import { NgModule, ApplicationConfig } from '@angular/core';
41
import { BrowserModule } from '@angular/platform-browser';
42
import { registerAllModules } from 'handsontable/registry';
43
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
44
import { CommonModule } from '@angular/common';
45
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
46
/* start:skip-in-compilation */
47
import { Example1DemoComponent } from './app.component';
48
/* end:skip-in-compilation */
49
import 'handsontable/styles/ht-theme-main.css';
50

51
// register Handsontable's modules
52
registerAllModules();
53

54
export const appConfig: ApplicationConfig = {
55
  providers: [
56
    {
57
      provide: HOT_GLOBAL_CONFIG,
58
      useValue: {
59
        theme: 'ht-theme-main',
60
        license: NON_COMMERCIAL_LICENSE,
61
      } as HotGlobalConfig
62
    }
63
  ],
64
};
65

66
@NgModule({
67
  imports: [ BrowserModule, HotTableModule, CommonModule ],
68
  declarations: [ Example1DemoComponent ],
69
  providers: [...appConfig.providers],
70
  bootstrap: [ Example1DemoComponent ]
71
})
72

73
export class AppModule { }
74
/* end-file */

1
<div class="disable-auto-theme">
2
  <style>
3
    .ht-theme-main {
4
      --ht-accent-color: #2c78d4;
5
      --ht-foreground-color: #1a2533;
6
      --ht-background-color: #f8f9fa;
7
      --ht-row-header-odd-background-color: #f8f9fa;
8
      --ht-row-header-even-background-color: #e9ecef;
9
      --ht-row-cell-odd-background-color: #f8f9fa;
10
      --ht-row-cell-even-background-color: #e9ecef;
11
      --ht-cell-horizontal-border-color: #cbd5e0;
12
      --ht-cell-vertical-border-color: #cbd5e0;
13
      --ht-wrapper-border-color: #a0aec0;
14
    }
15
  </style>
16
  <example1-demo></example1-demo>
17
</div>

Option 4: Use the Theme Builder UI

If you prefer a visual approach to creating themes, use the Handsontable Theme Builder. This online tool provides an intuitive interface for customizing colors, spacing, and other theme properties without writing code. Once you’re satisfied with your design, you can export the generated your theme and integrate it into your project.

Variables Reference

Handsontable provides a comprehensive set of JS and CSS variables that let you customize the appearance of every component.

CSS Variable — The names of the CSS custom properties (e.g. --ht-sizing-size-1) you can override in your stylesheet.

JS Option — The values in this column are the keys you use when customizing a theme via the Theme API. Call theme.params() on your registered theme and pass an object where each key is nested under one of:

sizing — spacing and size scale (e.g. sizing.size_1)
density.sizes.default, density.sizes.compact, or density.sizes.comfortable — density-specific spacing (e.g. cellVertical, gap)
colors — color palette (e.g. colors.primary.500)
tokens — design tokens used by components (e.g. tokens.fontSize)

Example: to override the tokens.gapSize, use the JS Option like this:

1
  myTheme.params({
2
    tokens: {
3
      gapSize: 'sizing.size_1'
4
    }
5
  })

Sizing Variables

Variable	Description
CSS: `--ht-sizing-size-0` JS: `size_0`	Zero size (0px)
CSS: `--ht-sizing-size-0-25` JS: `size_0_25`	Quarter unit size (1px)
CSS: `--ht-sizing-size-0-5` JS: `size_0_5`	Half unit size (2px)
CSS: `--ht-sizing-size-1` JS: `size_1`	Base unit size (4px)
CSS: `--ht-sizing-size-1-5` JS: `size_1_5`	1.5x unit size (6px)
CSS: `--ht-sizing-size-2` JS: `size_2`	2x unit size (8px)
CSS: `--ht-sizing-size-3` JS: `size_3`	3x unit size (12px)
CSS: `--ht-sizing-size-4` JS: `size_4`	4x unit size (16px)
CSS: `--ht-sizing-size-5` JS: `size_5`	5x unit size (20px)
CSS: `--ht-sizing-size-6` JS: `size_6`	6x unit size (24px)
CSS: `--ht-sizing-size-7` JS: `size_7`	7x unit size (28px)
CSS: `--ht-sizing-size-8` JS: `size_8`	8x unit size (32px)
CSS: `--ht-sizing-size-9` JS: `size_9`	9x unit size (36px)
CSS: `--ht-sizing-size-10` JS: `size_10`	10x unit size (40px)

Density Variables

Variable	Description
CSS: `--ht-density-cell-vertical` JS: `cellVertical`	Vertical padding for cells
CSS: `--ht-density-cell-horizontal` JS: `cellHorizontal`	Horizontal padding for cells
CSS: `--ht-density-bars-horizontal` JS: `barsHorizontal`	Horizontal padding for bars
CSS: `--ht-density-bars-vertical` JS: `barsVertical`	Vertical padding for bars
CSS: `--ht-density-gap` JS: `gap`	Standard gap size
CSS: `--ht-density-button-horizontal` JS: `buttonHorizontal`	Horizontal padding for buttons
CSS: `--ht-density-button-vertical` JS: `buttonVertical`	Vertical padding for buttons
CSS: `--ht-density-dialog-horizontal` JS: `dialogHorizontal`	Horizontal padding for dialogs
CSS: `--ht-density-dialog-vertical` JS: `dialogVertical`	Vertical padding for dialogs
CSS: `--ht-density-input-horizontal` JS: `inputHorizontal`	Horizontal padding for inputs
CSS: `--ht-density-input-vertical` JS: `inputVertical`	Vertical padding for inputs
CSS: `--ht-density-menu-vertical` JS: `menuVertical`	Vertical padding for menus
CSS: `--ht-density-menu-horizontal` JS: `menuHorizontal`	Horizontal padding for menus
CSS: `--ht-density-menu-item-vertical` JS: `menuItemVertical`	Vertical padding for menu items
CSS: `--ht-density-menu-item-horizontal` JS: `menuItemHorizontal`	Horizontal padding for menu items

Color Palette Variables

Variable	Description
CSS: `--ht-colors-white` JS: `white`	Pure white color
CSS: `--ht-colors-black` JS: `black`	Pure black color
CSS: `--ht-colors-transparent` JS: `transparent`	Transparent color
CSS: `--ht-colors-primary-100` JS: `primary.100`	Lightest primary accent
CSS: `--ht-colors-primary-200` JS: `primary.200`	Light primary accent
CSS: `--ht-colors-primary-300` JS: `primary.300`	Medium-light primary accent
CSS: `--ht-colors-primary-400` JS: `primary.400`	Medium primary accent
CSS: `--ht-colors-primary-500` JS: `primary.500`	Main primary accent
CSS: `--ht-colors-primary-600` JS: `primary.600`	Dark primary accent
CSS: `--ht-colors-palette-50` JS: `palette.50`	Lightest gray
CSS: `--ht-colors-palette-100` JS: `palette.100`	Very light gray
CSS: `--ht-colors-palette-200` JS: `palette.200`	Light gray
CSS: `--ht-colors-palette-300` JS: `palette.300`	Medium-light gray
CSS: `--ht-colors-palette-400` JS: `palette.400`	Medium gray
CSS: `--ht-colors-palette-500` JS: `palette.500`	Medium-dark gray
CSS: `--ht-colors-palette-600` JS: `palette.600`	Dark gray
CSS: `--ht-colors-palette-700` JS: `palette.700`	Darker gray
CSS: `--ht-colors-palette-800` JS: `palette.800`	Very dark gray
CSS: `--ht-colors-palette-900` JS: `palette.900`	Near black
CSS: `--ht-colors-palette-950` JS: `palette.950`	Darkest gray

Tokens Variables

Typography Variables

Variable	Description
CSS: `--ht-font-family` JS: `fontFamily`	Font family for all text elements
CSS: `--ht-font-size` JS: `fontSize`	Base font size for all text elements
CSS: `--ht-font-size-small` JS: `fontSizeSmall`	Font size for smaller text
CSS: `--ht-line-height` JS: `lineHeight`	Line height for text elements
CSS: `--ht-line-height-small` JS: `lineHeightSmall`	Line height for smaller text
CSS: `--ht-font-weight` JS: `fontWeight`	Font weight for text elements
CSS: `--ht-letter-spacing` JS: `letterSpacing`	Letter spacing for text elements

Layout & Spacing Variables

Variable	Description
CSS: `--ht-gap-size` JS: `gapSize`	Standard gap size used throughout the component
CSS: `--ht-icon-size` JS: `iconSize`	Size of icons throughout the interface
CSS: `--ht-table-transition` JS: `tableTransition`	Transition duration for table animations

Color System Variables

Variable	Description
CSS: `--ht-border-color` JS: `borderColor`	Default border color for all elements
CSS: `--ht-accent-color` JS: `accentColor`	Primary accent color used for highlights and active states
CSS: `--ht-foreground-color` JS: `foregroundColor`	Primary text color
CSS: `--ht-foreground-secondary-color` JS: `foregroundSecondaryColor`	Secondary text color
CSS: `--ht-background-color` JS: `backgroundColor`	Primary background color
CSS: `--ht-background-secondary-color` JS: `backgroundSecondaryColor`	Secondary background color
CSS: `--ht-placeholder-color` JS: `placeholderColor`	Color for placeholder text
CSS: `--ht-read-only-color` JS: `readOnlyColor`	Color for read-only text
CSS: `--ht-disabled-color` JS: `disabledColor`	Color for disabled elements

Shadow Variables

Variable	Description
CSS: `--ht-shadow-color` JS: `shadowColor`	Base color used for shadows
CSS: `--ht-shadow-x` JS: `shadowX`	Horizontal offset of shadows
CSS: `--ht-shadow-y` JS: `shadowY`	Vertical offset of shadows
CSS: `--ht-shadow-blur` JS: `shadowBlur`	Blur radius of shadows
CSS: `--ht-shadow-opacity` JS: `shadowOpacity`	Opacity of shadows

Bar Variables

Variable	Description
CSS: `--ht-bar-foreground-color` JS: `barForegroundColor`	Foreground color of bar elements
CSS: `--ht-bar-background-color` JS: `barBackgroundColor`	Background color of bar elements
CSS: `--ht-bar-horizontal-padding` JS: `barHorizontalPadding`	Horizontal padding inside bar elements
CSS: `--ht-bar-vertical-padding` JS: `barVerticalPadding`	Vertical padding inside bar elements

Cell Border Variables

Variable	Description
CSS: `--ht-cell-horizontal-border-color` JS: `cellHorizontalBorderColor`	Color of horizontal cell borders
CSS: `--ht-cell-vertical-border-color` JS: `cellVerticalBorderColor`	Color of vertical cell borders

Wrapper Variables

Variable	Description
CSS: `--ht-wrapper-border-width` JS: `wrapperBorderWidth`	Width of the table wrapper border
CSS: `--ht-wrapper-border-radius` JS: `wrapperBorderRadius`	Border radius of the table wrapper
CSS: `--ht-wrapper-border-color` JS: `wrapperBorderColor`	Color of the table wrapper border

Row Styling Variables

Variable	Description
CSS: `--ht-row-header-odd-background-color` JS: `rowHeaderOddBackgroundColor`	Background color for odd row headers
CSS: `--ht-row-header-even-background-color` JS: `rowHeaderEvenBackgroundColor`	Background color for even row headers
CSS: `--ht-row-cell-odd-background-color` JS: `rowCellOddBackgroundColor`	Background color for odd row cells
CSS: `--ht-row-cell-even-background-color` JS: `rowCellEvenBackgroundColor`	Background color for even row cells

Cell Padding Variables

Variable	Description
CSS: `--ht-cell-horizontal-padding` JS: `cellHorizontalPadding`	Horizontal padding inside cells
CSS: `--ht-cell-vertical-padding` JS: `cellVerticalPadding`	Vertical padding inside cells

Cell Editor Variables

Variable	Description
CSS: `--ht-cell-editor-border-width` JS: `cellEditorBorderWidth`	Border width of cell editors
CSS: `--ht-cell-editor-border-color` JS: `cellEditorBorderColor`	Border color of cell editors
CSS: `--ht-cell-editor-foreground-color` JS: `cellEditorForegroundColor`	Text color in cell editors
CSS: `--ht-cell-editor-background-color` JS: `cellEditorBackgroundColor`	Background color of cell editors
CSS: `--ht-cell-editor-shadow-blur-radius` JS: `cellEditorShadowBlurRadius`	Shadow blur radius for cell editors
CSS: `--ht-cell-editor-shadow-color` JS: `cellEditorShadowColor`	Shadow color for cell editors

Cell State Variables

Variable	Description
CSS: `--ht-cell-success-background-color` JS: `cellSuccessBackgroundColor`	Background color for successful cell operations
CSS: `--ht-cell-error-background-color` JS: `cellErrorBackgroundColor`	Background color for error states in cells
CSS: `--ht-cell-read-only-background-color` JS: `cellReadOnlyBackgroundColor`	Background color for read-only cells

Cell Selection Variables

Variable	Description
CSS: `--ht-cell-selection-border-color` JS: `cellSelectionBorderColor`	Border color for selected cells
CSS: `--ht-cell-selection-background-color` JS: `cellSelectionBackgroundColor`	Background color for selected cells

Cell Autofill Variables

Variable	Description
CSS: `--ht-cell-autofill-size` JS: `cellAutofillSize`	Size of the autofill handle
CSS: `--ht-cell-autofill-hit-area-size` JS: `cellAutofillHitAreaSize`	Size of the autofill hit area
CSS: `--ht-cell-autofill-border-width` JS: `cellAutofillBorderWidth`	Border width of autofill elements
CSS: `--ht-cell-autofill-border-radius` JS: `cellAutofillBorderRadius`	Border radius of autofill elements
CSS: `--ht-cell-autofill-border-color` JS: `cellAutofillBorderColor`	Border color of autofill elements
CSS: `--ht-cell-autofill-background-color` JS: `cellAutofillBackgroundColor`	Background color of autofill elements
CSS: `--ht-cell-autofill-fill-border-color` JS: `cellAutofillFillBorderColor`	Border color of autofill fill indicator

Cell Mobile Handle Variables

Variable	Description
CSS: `--ht-cell-mobile-handle-size` JS: `cellMobileHandleSize`	Size of mobile touch handles
CSS: `--ht-cell-mobile-handle-border-width` JS: `cellMobileHandleBorderWidth`	Border width of mobile handles
CSS: `--ht-cell-mobile-handle-border-radius` JS: `cellMobileHandleBorderRadius`	Border radius of mobile handles
CSS: `--ht-cell-mobile-handle-border-color` JS: `cellMobileHandleBorderColor`	Border color of mobile handles
CSS: `--ht-cell-mobile-handle-background-color` JS: `cellMobileHandleBackgroundColor`	Background color of mobile handles
CSS: `--ht-cell-mobile-handle-background-opacity` JS: `cellMobileHandleBackgroundOpacity`	Background opacity of mobile handles

Indicator Variables

Variable	Description
CSS: `--ht-resize-indicator-color` JS: `resizeIndicatorColor`	Color of resize indicators
CSS: `--ht-move-backlight-color` JS: `moveBacklightColor`	Background color for move operations
CSS: `--ht-move-backlight-opacity` JS: `moveBacklightOpacity`	Opacity of move backlight
CSS: `--ht-move-indicator-color` JS: `moveIndicatorColor`	Color of move indicators
CSS: `--ht-hidden-indicator-color` JS: `hiddenIndicatorColor`	Color of hidden element indicators

Scrollbar Variables

Variable	Description
CSS: `--ht-scrollbar-border-radius` JS: `scrollbarBorderRadius`	Border radius of scrollbars
CSS: `--ht-scrollbar-track-color` JS: `scrollbarTrackColor`	Background color of scrollbar tracks
CSS: `--ht-scrollbar-thumb-color` JS: `scrollbarThumbColor`	Color of scrollbar thumbs

Header Variables

Variable	Description
CSS: `--ht-header-font-weight` JS: `headerFontWeight`	Font weight for header text
CSS: `--ht-header-foreground-color` JS: `headerForegroundColor`	Text color for headers
CSS: `--ht-header-background-color` JS: `headerBackgroundColor`	Background color for headers
CSS: `--ht-header-highlighted-shadow-size` JS: `headerHighlightedShadowSize`	Shadow size for highlighted headers
CSS: `--ht-header-highlighted-foreground-color` JS: `headerHighlightedForegroundColor`	Text color for highlighted headers
CSS: `--ht-header-highlighted-background-color` JS: `headerHighlightedBackgroundColor`	Background color for highlighted headers
CSS: `--ht-header-active-border-color` JS: `headerActiveBorderColor`	Border color for active headers
CSS: `--ht-header-active-foreground-color` JS: `headerActiveForegroundColor`	Text color for active headers
CSS: `--ht-header-active-background-color` JS: `headerActiveBackgroundColor`	Background color for active headers
CSS: `--ht-header-filter-background-color` JS: `headerFilterBackgroundColor`	Background color for header filters

Header Row Variables

Variable	Description
CSS: `--ht-header-row-foreground-color` JS: `headerRowForegroundColor`	Text color for header rows
CSS: `--ht-header-row-background-color` JS: `headerRowBackgroundColor`	Background color for header rows
CSS: `--ht-header-row-highlighted-foreground-color` JS: `headerRowHighlightedForegroundColor`	Text color for highlighted header rows
CSS: `--ht-header-row-highlighted-background-color` JS: `headerRowHighlightedBackgroundColor`	Background color for highlighted header rows
CSS: `--ht-header-row-active-foreground-color` JS: `headerRowActiveForegroundColor`	Text color for active header rows
CSS: `--ht-header-row-active-background-color` JS: `headerRowActiveBackgroundColor`	Background color for active header rows

Checkbox Variables

Variable	Description
CSS: `--ht-checkbox-size` JS: `checkboxSize`	Size of checkbox elements
CSS: `--ht-checkbox-border-radius` JS: `checkboxBorderRadius`	Border radius of checkboxes
CSS: `--ht-checkbox-border-color` JS: `checkboxBorderColor`	Border color of checkboxes
CSS: `--ht-checkbox-background-color` JS: `checkboxBackgroundColor`	Background color of checkboxes
CSS: `--ht-checkbox-icon-color` JS: `checkboxIconColor`	Color of checkbox icons
CSS: `--ht-checkbox-focus-border-color` JS: `checkboxFocusBorderColor`	Border color of focused checkboxes
CSS: `--ht-checkbox-focus-background-color` JS: `checkboxFocusBackgroundColor`	Background color of focused checkboxes
CSS: `--ht-checkbox-focus-icon-color` JS: `checkboxFocusIconColor`	Icon color of focused checkboxes
CSS: `--ht-checkbox-focus-ring-color` JS: `checkboxFocusRingColor`	Focus ring color for checkboxes
CSS: `--ht-checkbox-disabled-border-color` JS: `checkboxDisabledBorderColor`	Border color of disabled checkboxes
CSS: `--ht-checkbox-disabled-background-color` JS: `checkboxDisabledBackgroundColor`	Background color of disabled checkboxes
CSS: `--ht-checkbox-disabled-icon-color` JS: `checkboxDisabledIconColor`	Icon color of disabled checkboxes
CSS: `--ht-checkbox-checked-border-color` JS: `checkboxCheckedBorderColor`	Border color of checked checkboxes
CSS: `--ht-checkbox-checked-background-color` JS: `checkboxCheckedBackgroundColor`	Background color of checked checkboxes
CSS: `--ht-checkbox-checked-icon-color` JS: `checkboxCheckedIconColor`	Icon color of checked checkboxes
CSS: `--ht-checkbox-checked-focus-border-color` JS: `checkboxCheckedFocusBorderColor`	Border color of focused checked checkboxes
CSS: `--ht-checkbox-checked-focus-background-color` JS: `checkboxCheckedFocusBackgroundColor`	Background color of focused checked checkboxes
CSS: `--ht-checkbox-checked-focus-icon-color` JS: `checkboxCheckedFocusIconColor`	Icon color of focused checked checkboxes
CSS: `--ht-checkbox-checked-disabled-border-color` JS: `checkboxCheckedDisabledBorderColor`	Border color of disabled checked checkboxes
CSS: `--ht-checkbox-checked-disabled-background-color` JS: `checkboxCheckedDisabledBackgroundColor`	Background color of disabled checked checkboxes
CSS: `--ht-checkbox-checked-disabled-icon-color` JS: `checkboxCheckedDisabledIconColor`	Icon color of disabled checked checkboxes
CSS: `--ht-checkbox-indeterminate-border-color` JS: `checkboxIndeterminateBorderColor`	Border color of indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-background-color` JS: `checkboxIndeterminateBackgroundColor`	Background color of indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-icon-color` JS: `checkboxIndeterminateIconColor`	Icon color of indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-focus-border-color` JS: `checkboxIndeterminateFocusBorderColor`	Border color of focused indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-focus-background-color` JS: `checkboxIndeterminateFocusBackgroundColor`	Background color of focused indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-focus-icon-color` JS: `checkboxIndeterminateFocusIconColor`	Icon color of focused indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-disabled-border-color` JS: `checkboxIndeterminateDisabledBorderColor`	Border color of disabled indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-disabled-background-color` JS: `checkboxIndeterminateDisabledBackgroundColor`	Background color of disabled indeterminate checkboxes
CSS: `--ht-checkbox-indeterminate-disabled-icon-color` JS: `checkboxIndeterminateDisabledIconColor`	Icon color of disabled indeterminate checkboxes

Radio Button Variables

Variable	Description
CSS: `--ht-radio-size` JS: `radioSize`	Size of radio button elements
CSS: `--ht-radio-border-color` JS: `radioBorderColor`	Border color of radio buttons
CSS: `--ht-radio-background-color` JS: `radioBackgroundColor`	Background color of radio buttons
CSS: `--ht-radio-icon-color` JS: `radioIconColor`	Color of radio button icons
CSS: `--ht-radio-focus-border-color` JS: `radioFocusBorderColor`	Border color of focused radio buttons
CSS: `--ht-radio-focus-background-color` JS: `radioFocusBackgroundColor`	Background color of focused radio buttons
CSS: `--ht-radio-focus-icon-color` JS: `radioFocusIconColor`	Icon color of focused radio buttons
CSS: `--ht-radio-focus-ring-color` JS: `radioFocusRingColor`	Focus ring color for radio buttons
CSS: `--ht-radio-disabled-border-color` JS: `radioDisabledBorderColor`	Border color of disabled radio buttons
CSS: `--ht-radio-disabled-background-color` JS: `radioDisabledBackgroundColor`	Background color of disabled radio buttons
CSS: `--ht-radio-disabled-icon-color` JS: `radioDisabledIconColor`	Icon color of disabled radio buttons
CSS: `--ht-radio-checked-border-color` JS: `radioCheckedBorderColor`	Border color of checked radio buttons
CSS: `--ht-radio-checked-background-color` JS: `radioCheckedBackgroundColor`	Background color of checked radio buttons
CSS: `--ht-radio-checked-icon-color` JS: `radioCheckedIconColor`	Icon color of checked radio buttons
CSS: `--ht-radio-checked-focus-border-color` JS: `radioCheckedFocusBorderColor`	Border color of focused checked radio buttons
CSS: `--ht-radio-checked-focus-background-color` JS: `radioCheckedFocusBackgroundColor`	Background color of focused checked radio buttons
CSS: `--ht-radio-checked-focus-icon-color` JS: `radioCheckedFocusIconColor`	Icon color of focused checked radio buttons
CSS: `--ht-radio-checked-disabled-border-color` JS: `radioCheckedDisabledBorderColor`	Border color of disabled checked radio buttons
CSS: `--ht-radio-checked-disabled-background-color` JS: `radioCheckedDisabledBackgroundColor`	Background color of disabled checked radio buttons
CSS: `--ht-radio-checked-disabled-icon-color` JS: `radioCheckedDisabledIconColor`	Icon color of disabled checked radio buttons

Icon Button Variables

Variable	Description
CSS: `--ht-icon-button-border-radius` JS: `iconButtonBorderRadius`	Border radius of icon buttons
CSS: `--ht-icon-button-large-border-radius` JS: `iconButtonLargeBorderRadius`	Border radius of large icon buttons
CSS: `--ht-icon-button-large-padding` JS: `iconButtonLargePadding`	Padding of large icon buttons
CSS: `--ht-icon-button-border-color` JS: `iconButtonBorderColor`	Border color of icon buttons
CSS: `--ht-icon-button-background-color` JS: `iconButtonBackgroundColor`	Background color of icon buttons
CSS: `--ht-icon-button-icon-color` JS: `iconButtonIconColor`	Color of icon button icons
CSS: `--ht-icon-button-hover-border-color` JS: `iconButtonHoverBorderColor`	Border color of hovered icon buttons
CSS: `--ht-icon-button-hover-background-color` JS: `iconButtonHoverBackgroundColor`	Background color of hovered icon buttons
CSS: `--ht-icon-button-hover-icon-color` JS: `iconButtonHoverIconColor`	Icon color of hovered icon buttons
CSS: `--ht-icon-button-active-border-color` JS: `iconButtonActiveBorderColor`	Border color of active icon buttons
CSS: `--ht-icon-button-active-background-color` JS: `iconButtonActiveBackgroundColor`	Background color of active icon buttons
CSS: `--ht-icon-button-active-icon-color` JS: `iconButtonActiveIconColor`	Icon color of active icon buttons
CSS: `--ht-icon-button-active-hover-border-color` JS: `iconButtonActiveHoverBorderColor`	Border color of hovered active icon buttons
CSS: `--ht-icon-button-active-hover-background-color` JS: `iconButtonActiveHoverBackgroundColor`	Background color of hovered active icon buttons
CSS: `--ht-icon-button-active-hover-icon-color` JS: `iconButtonActiveHoverIconColor`	Icon color of hovered active icon buttons
CSS: `--ht-icon-button-hit-area-size` JS: `iconButtonHitAreaSize`	Hit area size of icon buttons

Collapse Button Variables

Variable	Description
CSS: `--ht-collapse-button-border-radius` JS: `collapseButtonBorderRadius`	Border radius of collapse buttons
CSS: `--ht-collapse-button-open-border-color` JS: `collapseButtonOpenBorderColor`	Border color of open collapse buttons
CSS: `--ht-collapse-button-open-background-color` JS: `collapseButtonOpenBackgroundColor`	Background color of open collapse buttons
CSS: `--ht-collapse-button-open-icon-color` JS: `collapseButtonOpenIconColor`	Icon color of open collapse buttons
CSS: `--ht-collapse-button-open-icon-active-color` JS: `collapseButtonOpenIconActiveColor`	Active icon color of open collapse buttons
CSS: `--ht-collapse-button-open-hover-border-color` JS: `collapseButtonOpenHoverBorderColor`	Border color of hovered open collapse buttons
CSS: `--ht-collapse-button-open-hover-background-color` JS: `collapseButtonOpenHoverBackgroundColor`	Background color of hovered open collapse buttons
CSS: `--ht-collapse-button-open-hover-icon-color` JS: `collapseButtonOpenHoverIconColor`	Icon color of hovered open collapse buttons
CSS: `--ht-collapse-button-open-hover-icon-active-color` JS: `collapseButtonOpenHoverIconActiveColor`	Active icon color of hovered open collapse buttons
CSS: `--ht-collapse-button-close-border-color` JS: `collapseButtonCloseBorderColor`	Border color of closed collapse buttons
CSS: `--ht-collapse-button-close-background-color` JS: `collapseButtonCloseBackgroundColor`	Background color of closed collapse buttons
CSS: `--ht-collapse-button-close-icon-color` JS: `collapseButtonCloseIconColor`	Icon color of closed collapse buttons
CSS: `--ht-collapse-button-close-icon-active-color` JS: `collapseButtonCloseIconActiveColor`	Active icon color of closed collapse buttons
CSS: `--ht-collapse-button-close-hover-border-color` JS: `collapseButtonCloseHoverBorderColor`	Border color of hovered closed collapse buttons
CSS: `--ht-collapse-button-close-hover-background-color` JS: `collapseButtonCloseHoverBackgroundColor`	Background color of hovered closed collapse buttons
CSS: `--ht-collapse-button-close-hover-icon-color` JS: `collapseButtonCloseHoverIconColor`	Icon color of hovered closed collapse buttons
CSS: `--ht-collapse-button-close-hover-icon-active-color` JS: `collapseButtonCloseHoverIconActiveColor`	Active icon color of hovered closed collapse buttons

Button Variables

Variable	Description
CSS: `--ht-button-border-radius` JS: `buttonBorderRadius`	Border radius of buttons
CSS: `--ht-button-horizontal-padding` JS: `buttonHorizontalPadding`	Horizontal padding of buttons
CSS: `--ht-button-vertical-padding` JS: `buttonVerticalPadding`	Vertical padding of buttons

Primary Button Variables

Variable	Description
CSS: `--ht-primary-button-border-color` JS: `primaryButtonBorderColor`	Border color of primary buttons
CSS: `--ht-primary-button-foreground-color` JS: `primaryButtonForegroundColor`	Text color of primary buttons
CSS: `--ht-primary-button-background-color` JS: `primaryButtonBackgroundColor`	Background color of primary buttons
CSS: `--ht-primary-button-disabled-border-color` JS: `primaryButtonDisabledBorderColor`	Border color of disabled primary buttons
CSS: `--ht-primary-button-disabled-foreground-color` JS: `primaryButtonDisabledForegroundColor`	Text color of disabled primary buttons
CSS: `--ht-primary-button-disabled-background-color` JS: `primaryButtonDisabledBackgroundColor`	Background color of disabled primary buttons
CSS: `--ht-primary-button-hover-border-color` JS: `primaryButtonHoverBorderColor`	Border color of hovered primary buttons
CSS: `--ht-primary-button-hover-foreground-color` JS: `primaryButtonHoverForegroundColor`	Text color of hovered primary buttons
CSS: `--ht-primary-button-hover-background-color` JS: `primaryButtonHoverBackgroundColor`	Background color of hovered primary buttons
CSS: `--ht-primary-button-focus-border-color` JS: `primaryButtonFocusBorderColor`	Border color of focused primary buttons
CSS: `--ht-primary-button-focus-foreground-color` JS: `primaryButtonFocusForegroundColor`	Text color of focused primary buttons
CSS: `--ht-primary-button-focus-background-color` JS: `primaryButtonFocusBackgroundColor`	Background color of focused primary buttons

Secondary Button Variables

Variable	Description
CSS: `--ht-secondary-button-border-color` JS: `secondaryButtonBorderColor`	Border color of secondary buttons
CSS: `--ht-secondary-button-foreground-color` JS: `secondaryButtonForegroundColor`	Text color of secondary buttons
CSS: `--ht-secondary-button-background-color` JS: `secondaryButtonBackgroundColor`	Background color of secondary buttons
CSS: `--ht-secondary-button-disabled-border-color` JS: `secondaryButtonDisabledBorderColor`	Border color of disabled secondary buttons
CSS: `--ht-secondary-button-disabled-foreground-color` JS: `secondaryButtonDisabledForegroundColor`	Text color of disabled secondary buttons
CSS: `--ht-secondary-button-disabled-background-color` JS: `secondaryButtonDisabledBackgroundColor`	Background color of disabled secondary buttons
CSS: `--ht-secondary-button-hover-border-color` JS: `secondaryButtonHoverBorderColor`	Border color of hovered secondary buttons
CSS: `--ht-secondary-button-hover-foreground-color` JS: `secondaryButtonHoverForegroundColor`	Text color of hovered secondary buttons
CSS: `--ht-secondary-button-hover-background-color` JS: `secondaryButtonHoverBackgroundColor`	Background color of hovered secondary buttons
CSS: `--ht-secondary-button-focus-border-color` JS: `secondaryButtonFocusBorderColor`	Border color of focused secondary buttons
CSS: `--ht-secondary-button-focus-foreground-color` JS: `secondaryButtonFocusForegroundColor`	Text color of focused secondary buttons
CSS: `--ht-secondary-button-focus-background-color` JS: `secondaryButtonFocusBackgroundColor`	Background color of focused secondary buttons

Chip Variables

Variable	Description
CSS: `--ht-chip-background` JS: `chipBackground`	Background color of chip elements
CSS: `--ht-chip-border-radius` JS: `chipBorderRadius`	Border radius of chip elements
CSS: `--ht-chip-vertical-padding` JS: `chipVerticalPadding`	Vertical padding of chip elements
CSS: `--ht-chip-horizontal-padding` JS: `chipHorizontalPadding`	Horizontal padding of chip elements
CSS: `--ht-chip-gap` JS: `chipGap`	Gap between chip elements

Comments Variables

Variable	Description
CSS: `--ht-comments-textarea-horizontal-padding` JS: `commentsTextareaHorizontalPadding`	Horizontal padding of comment textareas
CSS: `--ht-comments-textarea-vertical-padding` JS: `commentsTextareaVerticalPadding`	Vertical padding of comment textareas
CSS: `--ht-comments-textarea-border-width` JS: `commentsTextareaBorderWidth`	Border width of comment textareas
CSS: `--ht-comments-textarea-border-color` JS: `commentsTextareaBorderColor`	Border color of comment textareas
CSS: `--ht-comments-textarea-foreground-color` JS: `commentsTextareaForegroundColor`	Text color of comment textareas
CSS: `--ht-comments-textarea-background-color` JS: `commentsTextareaBackgroundColor`	Background color of comment textareas
CSS: `--ht-comments-textarea-focus-border-width` JS: `commentsTextareaFocusBorderWidth`	Border width of focused comment textareas
CSS: `--ht-comments-textarea-focus-border-color` JS: `commentsTextareaFocusBorderColor`	Border color of focused comment textareas
CSS: `--ht-comments-textarea-focus-foreground-color` JS: `commentsTextareaFocusForegroundColor`	Text color of focused comment textareas
CSS: `--ht-comments-textarea-focus-background-color` JS: `commentsTextareaFocusBackgroundColor`	Background color of focused comment textareas
CSS: `--ht-comments-indicator-size` JS: `commentsIndicatorSize`	Size of comment indicators
CSS: `--ht-comments-indicator-color` JS: `commentsIndicatorColor`	Color of comment indicators

License Variables

Variable	Description
CSS: `--ht-license-horizontal-padding` JS: `licenseHorizontalPadding`	Horizontal padding of license elements
CSS: `--ht-license-vertical-padding` JS: `licenseVerticalPadding`	Vertical padding of license elements
CSS: `--ht-license-foreground-color` JS: `licenseForegroundColor`	Text color of license elements
CSS: `--ht-license-background-color` JS: `licenseBackgroundColor`	Background color of license elements

Link Variables

Variable	Description
CSS: `--ht-link-color` JS: `linkColor`	Color of links
CSS: `--ht-link-hover-color` JS: `linkHoverColor`	Color of hovered links

Input Variables

Variable	Description
CSS: `--ht-input-border-width` JS: `inputBorderWidth`	Border width of input elements
CSS: `--ht-input-border-radius` JS: `inputBorderRadius`	Border radius of input elements
CSS: `--ht-input-horizontal-padding` JS: `inputHorizontalPadding`	Horizontal padding of input elements
CSS: `--ht-input-vertical-padding` JS: `inputVerticalPadding`	Vertical padding of input elements
CSS: `--ht-input-border-color` JS: `inputBorderColor`	Border color of input elements
CSS: `--ht-input-foreground-color` JS: `inputForegroundColor`	Text color of input elements
CSS: `--ht-input-background-color` JS: `inputBackgroundColor`	Background color of input elements
CSS: `--ht-input-hover-border-color` JS: `inputHoverBorderColor`	Border color of hovered input elements
CSS: `--ht-input-hover-foreground-color` JS: `inputHoverForegroundColor`	Text color of hovered input elements
CSS: `--ht-input-hover-background-color` JS: `inputHoverBackgroundColor`	Background color of hovered input elements
CSS: `--ht-input-disabled-border-color` JS: `inputDisabledBorderColor`	Border color of disabled input elements
CSS: `--ht-input-disabled-foreground-color` JS: `inputDisabledForegroundColor`	Text color of disabled input elements
CSS: `--ht-input-disabled-background-color` JS: `inputDisabledBackgroundColor`	Background color of disabled input elements
CSS: `--ht-input-focus-border-color` JS: `inputFocusBorderColor`	Border color of focused input elements
CSS: `--ht-input-focus-foreground-color` JS: `inputFocusForegroundColor`	Text color of focused input elements
CSS: `--ht-input-focus-background-color` JS: `inputFocusBackgroundColor`	Background color of focused input elements

Variable	Description
CSS: `--ht-menu-border-width` JS: `menuBorderWidth`	Border width of menu elements
CSS: `--ht-menu-border-radius` JS: `menuBorderRadius`	Border radius of menu elements
CSS: `--ht-menu-horizontal-padding` JS: `menuHorizontalPadding`	Horizontal padding of menu elements
CSS: `--ht-menu-vertical-padding` JS: `menuVerticalPadding`	Vertical padding of menu elements
CSS: `--ht-menu-item-horizontal-padding` JS: `menuItemHorizontalPadding`	Horizontal padding of menu items
CSS: `--ht-menu-item-vertical-padding` JS: `menuItemVerticalPadding`	Vertical padding of menu items
CSS: `--ht-menu-border-color` JS: `menuBorderColor`	Border color of menu elements
CSS: `--ht-menu-shadow-x` JS: `menuShadowX`	Horizontal shadow offset of menus
CSS: `--ht-menu-shadow-y` JS: `menuShadowY`	Vertical shadow offset of menus
CSS: `--ht-menu-shadow-blur` JS: `menuShadowBlur`	Shadow blur radius of menus
CSS: `--ht-menu-shadow-color` JS: `menuShadowColor`	Shadow color of menus
CSS: `--ht-menu-shadow-opacity` JS: `menuShadowOpacity`	Shadow opacity of menus
CSS: `--ht-menu-item-hover-color` JS: `menuItemHoverColor`	Background color of hovered menu items
CSS: `--ht-menu-item-hover-color-opacity` JS: `menuItemHoverColorOpacity`	Opacity of hovered menu item background
CSS: `--ht-menu-item-active-color` JS: `menuItemActiveColor`	Background color of active menu items
CSS: `--ht-menu-item-active-color-opacity` JS: `menuItemActiveColorOpacity`	Opacity of active menu item background

Dialog Variables

Variable	Description
CSS: `--ht-dialog-semi-transparent-background-color` JS: `dialogSemiTransparentBackgroundColor`	Semi-transparent background color of dialog overlay
CSS: `--ht-dialog-semi-transparent-background-opacity` JS: `dialogSemiTransparentBackgroundOpacity`	Opacity of semi-transparent dialog background
CSS: `--ht-dialog-solid-background-color` JS: `dialogSolidBackgroundColor`	Solid background color of dialog overlay
CSS: `--ht-dialog-content-padding-horizontal` JS: `dialogContentPaddingHorizontal`	Horizontal padding of dialog content
CSS: `--ht-dialog-content-padding-vertical` JS: `dialogContentPaddingVertical`	Vertical padding of dialog content
CSS: `--ht-dialog-content-border-radius` JS: `dialogContentBorderRadius`	Border radius of dialog content
CSS: `--ht-dialog-content-background-color` JS: `dialogContentBackgroundColor`	Background color of dialog content

Pagination Variables

Variable	Description
CSS: `--ht-pagination-bar-foreground-color` JS: `paginationBarForegroundColor`	Text color of pagination bar
CSS: `--ht-pagination-bar-background-color` JS: `paginationBarBackgroundColor`	Background color of pagination bar
CSS: `--ht-pagination-bar-horizontal-padding` JS: `paginationBarHorizontalPadding`	Horizontal padding of pagination bar
CSS: `--ht-pagination-bar-vertical-padding` JS: `paginationBarVerticalPadding`	Vertical padding of pagination bar