Themes

Use Handsontable’s built-in themes or customize its look using the Theme API or CSS variables.

Overview

Handsontable themes manage most visual elements of the data grid. Three built-in themes are available: main, horizon, and classic. All themes include dark and light modes.

The recommended way to apply themes is using the Theme API, which allows you to register and configure themes programmatically with runtime features like density modes and color schemes. Alternatively, you can use CSS files and pass the theme name as a string for a simpler setup.

Built-in themes

The main theme offers a spreadsheet-like interface, perfect for batch-editing tasks and providing users with a familiar experience, similar to other popular spreadsheet software on the market.

The horizon theme, on the other hand, is better suited for data display and analysis. It hides the vertical lines between columns, giving it a cleaner and more lightweight feel.

The classic theme is a replacement for the old legacy style. It retains the familiar look and feel of the original legacy styles, but has been updated to allow customization with CSS variables. This theme is ideal for users who prefer the traditional appearance of Handsontable but want to benefit from the theming system. The classic theme supports both light and dark modes, ensuring a seamless integration with your application’s color scheme preferences.

Keep in mind that starting from version 15.0, importing a theme is required.

1
import Handsontable from 'handsontable';
2
import { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';
3

4
registerTheme(mainTheme);
5
registerTheme(horizonTheme);
6
registerTheme(classicTheme);
7

8
// constants.js
102 collapsed lines
9
export const data = [
10
  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],
11
  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],
12
  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],
13
  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],
14
  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],
15
  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],
16
  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],
17
  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],
18
  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],
19
  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],
20
  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],
21
  [false, 'Twinder', 'Egypt', "Men's Bib-Shorts", '2025-08-31', '04-4281278', false, '96', 6, 1],
22
  [false, 'Midel', 'United States', "Men's Sports Shorts", '2025-06-27', '55-1711908', true, '108', 10, 3],
23
  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],
24
  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],
25
  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],
26
  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],
27
  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],
28
  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],
29
  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],
30
  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],
31
  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],
32
  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],
33
  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],
34
  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],
35
  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],
36
  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],
37
  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],
38
  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],
39
  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],
40
  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],
41
  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],
42
  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],
43
  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],
44
  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],
45
  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],
46
  [false, 'Zoombeat', 'United States', "Women's Mountain Shorts", '2025-11-03', '56-8673088', false, '53', 2, 3],
47
  [false, 'Roomm', 'China', "Women's Tights", '2025-03-16', '76-0085918', true, '168', 1, 1],
48
  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],
49
  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],
50
  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],
51
  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],
52
  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],
53
  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],
54
  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],
55
  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],
56
  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],
57
  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],
58
  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],
59
  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],
60
  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],
61
  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],
62
  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],
63
  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],
64
  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],
65
  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],
66
  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],
67
  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],
68
  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],
69
  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],
70
  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],
71
  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],
72
  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],
73
  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],
74
  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],
75
  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],
76
  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],
77
  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],
78
  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],
79
  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],
80
  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],
81
  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],
82
  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],
83
  [false, 'Quinu', "Xi'an", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],
84
  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],
85
  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],
86
  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],
87
  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],
88
  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],
89
  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],
90
  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],
91
  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],
92
  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],
93
  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],
94
  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],
95
  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],
96
  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],
97
  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],
98
  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],
99
  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],
100
  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],
101
  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],
102
  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],
103
  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],
104
  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],
105
  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],
106
  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],
107
  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],
108
  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],
109
  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],
110
];
111
const example = document.getElementById('exampleTheme');
112
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
113
const hotInstance = new Handsontable(example, {
114
  theme: getTheme('horizon').setColorScheme(isDark ? 'dark' : 'light'),
115
  data,
116
  height: 450,
117
  colWidths: [180, 220, 140, 120, 120, 120, 140],
118
  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],
119
  contextMenu: [
120
    'cut',
121
    'copy',
122
    '---------',
123
    'row_above',
124
    'row_below',
125
    'remove_row',
126
    '---------',
127
    'alignment',
128
    'make_read_only',
129
    'clear_column',
130
  ],
131
  columns: [
132
    {
133
      data: 1,
134
      type: 'text',
135
      headerClassName: 'htLeft',
136
    },
137
    {
138
      data: 3,
139
      type: 'text',
140
      headerClassName: 'htLeft',
141
    },
142
    {
143
      data: 4,
144
      type: 'intl-date',
145
      locale: 'en-GB',
146
      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },
147
      headerClassName: 'htLeft',
148
    },
149
    {
150
      data: 6,
151
      type: 'checkbox',
152
      className: 'htCenter',
153
      headerClassName: 'htLeft',
154
    },
155
    {
156
      data: 7,
157
      type: 'numeric',
158
      headerClassName: 'htLeft',
159
    },
160
    {
161
      data: 5,
162
      type: 'text',
163
      headerClassName: 'htLeft',
164
    },
165
    {
166
      data: 2,
167
      type: 'text',
168
      headerClassName: 'htLeft',
169
    },
170
  ],
171
  dropdownMenu: true,
172
  hiddenColumns: {
173
    indicators: true,
174
  },
175
  multiColumnSorting: true,
176
  filters: true,
177
  rowHeaders: true,
178
  manualRowMove: true,
179
  headerClassName: 'htLeft',
180
  autoWrapRow: true,
181
  autoWrapCol: true,
182
  manualRowResize: true,
183
  manualColumnResize: true,
184
  navigableHeaders: true,
185
  licenseKey: 'non-commercial-and-evaluation',
186
});
187

188
// Theme dropdown
189
const dropdown = document.getElementById('themeDropdown');
190
const trigger = document.getElementById('themeTrigger');
191
const triggerLabel = document.getElementById('triggerLabel');
192
const triggerColors = document.getElementById('triggerColors');
193
const menu = document.getElementById('themeMenu');
194
const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'
195
  ? 'horizon-dark'
196
  : 'horizon-light';
197

198
const setTheme = (value) => {
199
  const [themeName, colorScheme] = value.split('-');
200

201
  hotInstance.updateSettings({ theme: getTheme(themeName).setColorScheme(colorScheme || 'auto') });
202

203
  // Update trigger label
204
  const item = menu.querySelector(`[data-value="${value}"]`);
205

206
  if (item) {
207
    triggerLabel.textContent = item.textContent.trim();
208
  }
209

210
  // Update trigger color dots by resolving computed grid styles
211
  const hotRoot = document.querySelector('#exampleTheme .handsontable');
212

213
  if (hotRoot) {
214
    const helper = document.createElement('div');
215

216
    helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
217
    hotRoot.appendChild(helper);
218

219
    const resolve = (varName) => {
220
      helper.style.color = `var(${varName})`;
221

222
      return getComputedStyle(helper).color;
223
    };
224

225
    const fg = resolve('--ht-foreground-color');
226
    const bg = resolve('--ht-background-color');
227
    const accent = resolve('--ht-accent-color');
228

229
    hotRoot.removeChild(helper);
230

231
    const dots = triggerColors.querySelectorAll('.color');
232

233
    if (dots.length >= 3) {
234
      dots[0].style.background = fg;
235
      dots[1].style.background = bg;
236
      dots[2].style.background = accent;
237
    }
238
  }
239

240
  // Update aria-selected
241
  menu.querySelectorAll('li').forEach((li) => {
242
    li.setAttribute('aria-selected', li.dataset.value === value ? 'true' : 'false');
243
  });
244
};
245

246
// Toggle dropdown
247
trigger.addEventListener('click', () => {
248
  const isOpen = !menu.hidden;
249

250
  menu.hidden = isOpen;
251
  trigger.setAttribute('aria-expanded', String(!isOpen));
252
});
253

254
// Select item
255
menu.addEventListener('click', (e) => {
256
  const item = e.target.closest('li[data-value]');
257

258
  if (item) {
259
    setTheme(item.dataset.value);
260
    menu.hidden = true;
261
    trigger.setAttribute('aria-expanded', 'false');
262
  }
263
});
264

265
// Close on outside click
266
document.addEventListener('click', (e) => {
267
  if (!dropdown.contains(e.target)) {
268
    menu.hidden = true;
269
    trigger.setAttribute('aria-expanded', 'false');
270
  }
271
});
272

273
// Close on Escape
274
document.addEventListener('keydown', (e) => {
275
  if (e.key === 'Escape' && !menu.hidden) {
276
    menu.hidden = true;
277
    trigger.setAttribute('aria-expanded', 'false');
278
    trigger.focus();
279
  }
280
});
281

282
// Set initial theme
283
setTheme(currentTheme);

1
import Handsontable from 'handsontable';
2
import { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';
3
import { PredefinedMenuItemKey } from 'handsontable/plugins/contextMenu';
4

5
registerTheme(mainTheme);
6
registerTheme(horizonTheme);
7
registerTheme(classicTheme);
8

103 collapsed lines
9
// constants.js
10
export const data: (string | number | boolean)[][] = [
11
  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],
12
  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],
13
  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],
14
  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],
15
  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],
16
  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],
17
  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],
18
  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],
19
  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],
20
  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],
21
  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],
22
  [false, 'Twinder', 'Egypt', "Men's Bib-Shorts", '2025-08-31', '04-4281278', false, '96', 6, 1],
23
  [false, 'Midel', 'United States', "Men's Sports Shorts", '2025-06-27', '55-1711908', true, '108', 10, 3],
24
  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],
25
  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],
26
  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],
27
  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],
28
  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],
29
  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],
30
  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],
31
  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],
32
  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],
33
  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],
34
  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],
35
  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],
36
  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],
37
  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],
38
  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],
39
  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],
40
  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],
41
  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],
42
  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],
43
  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],
44
  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],
45
  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],
46
  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],
47
  [false, 'Zoombeat', 'United States', "Women's Mountain Shorts", '2025-11-03', '56-8673088', false, '53', 2, 3],
48
  [false, 'Roomm', 'China', "Women's Tights", '2025-03-16', '76-0085918', true, '168', 1, 1],
49
  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],
50
  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],
51
  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],
52
  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],
53
  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],
54
  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],
55
  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],
56
  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],
57
  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],
58
  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],
59
  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],
60
  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],
61
  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],
62
  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],
63
  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],
64
  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],
65
  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],
66
  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],
67
  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],
68
  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],
69
  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],
70
  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],
71
  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],
72
  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],
73
  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],
74
  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],
75
  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],
76
  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],
77
  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],
78
  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],
79
  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],
80
  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],
81
  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],
82
  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],
83
  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],
84
  [false, 'Quinu', "Xi'an", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],
85
  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],
86
  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],
87
  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],
88
  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],
89
  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],
90
  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],
91
  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],
92
  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],
93
  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],
94
  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],
95
  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],
96
  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],
97
  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],
98
  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],
99
  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],
100
  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],
101
  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],
102
  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],
103
  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],
104
  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],
105
  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],
106
  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],
107
  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],
108
  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],
109
  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],
110
  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],
111
];
112

113
const example = document.getElementById('exampleTheme')!;
114
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
115

116
const hotInstance = new Handsontable(example, {
117
  theme: getTheme('horizon').setColorScheme(isDark ? 'dark' : 'light'),
118
  data,
119
  height: 450,
120
  colWidths: [180, 220, 140, 120, 120, 120, 140],
121
  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],
122
  contextMenu: [
123
    'cut',
124
    'copy',
125
    '---------',
126
    'row_above',
127
    'row_below',
128
    'remove_row',
129
    '---------',
130
    'alignment',
131
    'make_read_only',
132
    'clear_column',
133
  ] as PredefinedMenuItemKey[],
134
  columns: [
135
    {
136
      data: 1,
137
      type: 'text',
138
      headerClassName: 'htLeft',
139
    },
140
    {
141
      data: 3,
142
      type: 'text',
143
      headerClassName: 'htLeft',
144
    },
145
    {
146
      data: 4,
147
      type: 'intl-date',
148
      locale: 'en-GB',
149
      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },
150
      headerClassName: 'htLeft',
151
    },
152
    {
153
      data: 6,
154
      type: 'checkbox',
155
      className: 'htCenter',
156
      headerClassName: 'htLeft',
157
    },
158
    {
159
      data: 7,
160
      type: 'numeric',
161
      headerClassName: 'htLeft',
162
    },
163
    {
164
      data: 5,
165
      type: 'text',
166
      headerClassName: 'htLeft',
167
    },
168
    {
169
      data: 2,
170
      type: 'text',
171
      headerClassName: 'htLeft',
172
    },
173
  ],
174
  dropdownMenu: true,
175
  hiddenColumns: {
176
    indicators: true,
177
  },
178
  multiColumnSorting: true,
179
  filters: true,
180
  rowHeaders: true,
181
  manualRowMove: true,
182
  headerClassName: 'htLeft',
183
  autoWrapRow: true,
184
  autoWrapCol: true,
185
  manualRowResize: true,
186
  manualColumnResize: true,
187
  navigableHeaders: true,
188
  licenseKey: 'non-commercial-and-evaluation',
189
});
190

191
// Theme dropdown
192
const dropdown = document.getElementById('themeDropdown')!;
193
const trigger = document.getElementById('themeTrigger')!;
194
const triggerLabel = document.getElementById('triggerLabel')!;
195
const triggerColors = document.getElementById('triggerColors')!;
196
const menu = document.getElementById('themeMenu')!;
197
const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'
198
  ? 'horizon-dark'
199
  : 'horizon-light';
200

201
const setTheme = (value: string) => {
202
  const [themeName, colorScheme] = value.split('-');
203

204
  hotInstance.updateSettings({ theme: getTheme(themeName).setColorScheme(colorScheme || 'auto') });
205

206
  // Update trigger label
207
  const item = menu.querySelector(`[data-value="${value}"]`);
208

209
  if (item) {
210
    triggerLabel.textContent = item.textContent!.trim();
211
  }
212

213
  // Update trigger color dots by resolving computed grid styles
214
  const hotRoot = document.querySelector('#exampleTheme .handsontable');
215

216
  if (hotRoot) {
217
    const helper = document.createElement('div');
218

219
    helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
220
    hotRoot.appendChild(helper);
221

222
    const resolve = (varName: string) => {
223
      helper.style.color = `var(${varName})`;
224

225
      return getComputedStyle(helper).color;
226
    };
227

228
    const fg = resolve('--ht-foreground-color');
229
    const bg = resolve('--ht-background-color');
230
    const accent = resolve('--ht-accent-color');
231

232
    hotRoot.removeChild(helper);
233

234
    const dots = triggerColors.querySelectorAll<HTMLElement>('.color');
235

236
    if (dots.length >= 3) {
237
      dots[0].style.background = fg;
238
      dots[1].style.background = bg;
239
      dots[2].style.background = accent;
240
    }
241
  }
242

243
  // Update aria-selected
244
  menu.querySelectorAll('li').forEach((li) => {
245
    li.setAttribute('aria-selected', (li as HTMLElement).dataset.value === value ? 'true' : 'false');
246
  });
247
};
248

249
// Toggle dropdown
250
trigger.addEventListener('click', () => {
251
  const isOpen = !menu.hidden;
252

253
  menu.hidden = isOpen;
254
  trigger.setAttribute('aria-expanded', String(!isOpen));
255
});
256

257
// Select item
258
menu.addEventListener('click', (e) => {
259
  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;
260

261
  if (item) {
262
    setTheme(item.dataset.value!);
263
    menu.hidden = true;
264
    trigger.setAttribute('aria-expanded', 'false');
265
  }
266
});
267

268
// Close on outside click
269
document.addEventListener('click', (e) => {
270
  if (!dropdown.contains(e.target as Node)) {
271
    menu.hidden = true;
272
    trigger.setAttribute('aria-expanded', 'false');
273
  }
274
});
275

276
// Close on Escape
277
document.addEventListener('keydown', (e) => {
278
  if (e.key === 'Escape' && !menu.hidden) {
279
    menu.hidden = true;
280
    trigger.setAttribute('aria-expanded', 'false');
281
    trigger.focus();
282
  }
283
});
284

285
// Set initial theme
286
setTheme(currentTheme);

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <div class="theme-dropdown" id="themeDropdown">
4
      <button class="theme-dropdown-trigger" id="themeTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
5
        <span class="theme-dropdown-colors" id="triggerColors">
6
          <span class="color"></span>
7
          <span class="color"></span>
8
          <span class="color"></span>
9
        </span>
10
        <span class="theme-dropdown-label" id="triggerLabel">Horizon Light</span>
11
        <svg class="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
12
      </button>
13
      <ul class="theme-dropdown-menu" id="themeMenu" role="listbox" hidden>
14
        <li role="option" data-value="main-light">
15
          <span class="theme-dropdown-colors ht-theme-main"><span class="color" style="background: var(--ht-foreground-color);"></span><span class="color" style="background: var(--ht-background-color);"></span><span class="color" style="background: var(--ht-accent-color);"></span></span>
16
          Main Light
17
        </li>
18
        <li role="option" data-value="main-dark">
19
          <span class="theme-dropdown-colors ht-theme-main-dark"><span class="color" style="background: var(--ht-foreground-color);"></span><span class="color" style="background: var(--ht-background-color);"></span><span class="color" style="background: var(--ht-accent-color);"></span></span>
20
          Main Dark
21
        </li>
22
        <li role="option" data-value="horizon-light">
23
          <span class="theme-dropdown-colors ht-theme-horizon"><span class="color" style="background: var(--ht-foreground-color);"></span><span class="color" style="background: var(--ht-background-color);"></span><span class="color" style="background: var(--ht-accent-color);"></span></span>
24
          Horizon Light
25
        </li>
26
        <li role="option" data-value="horizon-dark">
27
          <span class="theme-dropdown-colors ht-theme-horizon-dark"><span class="color" style="background: var(--ht-foreground-color);"></span><span class="color" style="background: var(--ht-background-color);"></span><span class="color" style="background: var(--ht-accent-color);"></span></span>
28
          Horizon Dark
29
        </li>
30
        <li role="option" data-value="classic-light">
31
          <span class="theme-dropdown-colors ht-theme-classic"><span class="color" style="background: var(--ht-foreground-color);"></span><span class="color" style="background: var(--ht-background-color);"></span><span class="color" style="background: var(--ht-accent-color);"></span></span>
32
          Classic Light
33
        </li>
34
        <li role="option" data-value="classic-dark">
35
          <span class="theme-dropdown-colors ht-theme-classic-dark"><span class="color" style="background: var(--ht-foreground-color);"></span><span class="color" style="background: var(--ht-background-color);"></span><span class="color" style="background: var(--ht-accent-color);"></span></span>
36
          Classic Dark
37
        </li>
38
      </ul>
39
    </div>
40
  </div>
41
</div>
42

43
<div id="exampleTheme" class="disable-auto-theme"></div>

1
#exampleTheme {
2
  position: relative;
3
  z-index: 0;
4
}
5

6
/* Theme dropdown */
7
.theme-dropdown {
8
  position: relative;
9
  display: inline-flex;
10
  align-items: center;
11
}
12

13
.theme-dropdown-trigger {
14
  display: inline-flex;
15
  align-items: center;
16
  gap: 0.5rem;
17
  background: none;
18
  border: 1px solid var(--sl-color-gray-5);
19
  color: var(--sl-color-gray-2);
20
  cursor: pointer;
21
  font-size: var(--sl-text-sm);
22
  font-weight: 500;
23
  padding: 0.4rem 0.625rem;
24
  transition: color 0.15s, background-color 0.15s;
25
  white-space: nowrap;
26
  border-radius: 0;
27
}
28

29
.theme-dropdown-trigger:hover {
30
  color: var(--sl-color-white);
31
  background: var(--sl-color-gray-7, var(--sl-color-gray-6));
32
}
33

34
.theme-dropdown-chevron {
35
  flex-shrink: 0;
36
  margin-inline-start: 0.15rem;
37
  transition: transform 0.15s;
38
}
39

40
.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {
41
  transform: rotate(180deg);
42
}
43

44
.theme-dropdown-menu {
45
  background: var(--sl-color-bg-nav);
46
  border: 1px solid var(--sl-color-gray-5);
47
  border-radius: 0;
48
  box-shadow: none;
49
  inset-inline-start: 0;
50
  list-style: none;
51
  margin: 0;
52
  min-width: 100%;
53
  overflow-y: auto;
54
  padding: 0;
55
  position: absolute;
56
  top: 100%;
57
  z-index: 100;
58
}
59

60
.theme-dropdown-menu[hidden] {
61
  display: none !important;
62
}
63

64
.theme-dropdown-menu li {
65
  align-items: center;
66
  color: var(--sl-color-text);
67
  display: flex;
68
  font-size: var(--sl-text-sm);
69
  gap: 0.5rem;
70
  padding: 0.5rem 0.75rem;
71
  cursor: pointer;
72
  border-bottom: 1px solid var(--sl-color-gray-5);
73
  transition: background 0.1s, color 0.1s;
74
  white-space: nowrap;
75
  list-style: none;
76
  margin: 0;
77
}
78

79
.theme-dropdown-menu li .theme-dropdown-colors {
80
  display: none;
81
}
82

83
.theme-dropdown-menu li:last-child {
84
  border-bottom: none;
85
}
86

87
.theme-dropdown-menu li:hover,
88
.theme-dropdown-menu li:focus-visible {
89
  background: var(--sl-color-gray-6);
90
  color: var(--sl-color-white);
91
  outline: none;
92
}
93

94
.theme-dropdown-menu li[aria-selected='true'] {
95
  color: var(--sl-color-white);
96
  box-shadow: inset 0 0 0 1px var(--sl-color-accent);
97
}
98

99
/* Color dots */
100
.theme-dropdown-colors {
101
  display: inline-flex;
102
  align-items: center;
103
  gap: 3px;
104
}
105

106
.theme-dropdown-colors .color {
107
  width: 8px;
108
  height: 8px;
109
  border-radius: 50%;
110
  border: 1px solid var(--sl-color-gray-4);
111
}

Light and dark modes

Each theme comes with three modes:

Light mode
Dark mode
Auto mode

When using the Theme API, you can configure the color scheme using setColorScheme() with 'light', 'dark', or 'auto' values. The 'auto' option allows programmatic control over light/dark switching based on your application’s logic.

When using CSS files, color scheme switching is controlled through CSS class names. Use ht-theme-{name} for light mode, ht-theme-{name}-dark for dark mode, or ht-theme-{name}-dark-auto for automatic switching based on system preferences (e.g., ht-theme-main, ht-theme-main-dark, ht-theme-main-dark-auto).

Available Theme API parameters

When registering a theme with registerTheme() or updating it using the params() method, you can configure the following keys:

Key	Description
`name`	Theme name string (can only be set during `registerTheme()`, cannot be updated via `params()`)
`sizing`	Size scale values (`size_0` through `size_10`)
`density`	Density type (`'default'`, `'compact'`, `'comfortable'`) or density configuration object
`icons`	SVG icon definitions
`colors`	Color palette with nested color values
`tokens`	Design tokens for visual properties
`colorScheme`	Color scheme (`'light'`, `'dark'`, or `'auto'`)

Token value references

Token values support a powerful reference system using dot notation. Instead of hardcoding values, you can reference values from other configuration namespaces:

Reference pattern	Example	Description
Direct value	`'14px'`	Use a literal CSS value
`tokens.*`	`'tokens.foregroundColor'`	Reference another token value
`sizing.*`	`'sizing.size_4'`	Reference a sizing scale value
`colors.*`	`'colors.primary.500'`	Reference a color from the palette
`density.*`	`'density.gap'`	Reference a density-specific value

Sizing references

The sizing scale provides consistent spacing values:

1
myTheme.params({
2
  tokens: {
3
    iconSize: 'sizing.size_5',             // References e.g. 20px
4
    wrapperBorderRadius: 'sizing.size_2',  // References e.g. 8px
5
  },
6
});

Color references

Colors use a hierarchical structure with dot notation for nested values:

1
myTheme.params({
2
  tokens: {
3
    accentColor: 'colors.primary.500',      // References primary color
4
    borderColor: 'colors.palette.200',      // References palette color
5
    backgroundColor: 'colors.white',        // References base white color
6
  },
7
});

Density references

Density values adjust spacing based on the selected density type:

1
myTheme.params({
2
  tokens: {
3
    cellHorizontalPadding: 'density.cellHorizontal',
4
    buttonVerticalPadding: 'density.buttonVertical',
5
    gapSize: 'density.gap',
6
  },
7
});

Token cross-references

Tokens can reference other tokens for consistent styling:

1
myTheme.params({
2
  tokens: {
3
    barForegroundColor: 'tokens.foregroundColor',
4
    cellEditorBackgroundColor: 'tokens.backgroundColor',
5
  },
6
});

Light and dark mode values

For tokens that should have different values in light and dark modes, use an array with two values where the first value is for light mode and the second is for dark mode:

1
myTheme.params({
2
  tokens: {
3
    // [lightModeValue, darkModeValue]
4
    borderColor: ['colors.palette.100', 'colors.palette.700'],
5
    foregroundColor: ['colors.palette.800', 'colors.palette.200'],
6
    backgroundColor: ['colors.white', 'colors.palette.950'],
7
  },
8
});

Available CSS files

Handsontable provides CSS files needed to style your data grid. Here’s an overview of what’s available:

Base CSS file

handsontable.css / handsontable.min.css - The base stylesheet containing all structural styles, layout rules, and core functionality. This file is auto-injected by default. You can inject it manually instead, but you must set injectCoreCss to false first. It includes border styles, cell rendering rules, and other fundamental grid components.

Theme files

All themes are available in two variants:

ht-theme-{name}.css / ht-theme-{name}.min.css - Complete theme with icons included (where {name} is main, horizon, or classic).
ht-theme-{name}-no-icons.css / ht-theme-{name}-no-icons.min.css - Theme without icon styles.

Icon files

If you’re using a theme without icons (*-no-icons.css), you can optionally load separate icon files:

ht-icons-{name}.css / ht-icons-{name}.min.css - Icon styles for the theme (where {name} is main or horizon).

Recommended usage

For production, use the minified versions (.min.css) to reduce file size and improve load times. For development, you may prefer the unminified versions (.css) for easier debugging.

Use a theme

There are two ways to apply a theme. The recommended approach is to use the Theme API with a theme object, which provides full access to runtime configuration features like density modes and color schemes.

Option 1: Using the Theme API (recommended)

The Theme API allows you to import and register themes programmatically. This approach provides runtime access to theme customization features.

Import a theme

1
import Handsontable from 'handsontable';
2
import { classicTheme } from 'handsontable/themes';
3

4
const hot = new Handsontable(container, {
5
  theme: classicTheme,
6
  // ... other options
7
});

Configure the theme

You can configure the theme before creating the instance using the builder pattern:

1
import { mainTheme, registerTheme } from 'handsontable/themes';
2

3
const theme = registerTheme(mainTheme)
4
  .setColorScheme('auto')   // 'light', 'dark', or 'auto'
5
  .setDensityType('comfortable');  // 'default', 'compact', or 'comfortable'
6

7
const hot = new Handsontable(container, {
8
  theme,
9
});

Or configure it after init by retrieving the registered theme with getTheme() (the theme is registered when you pass it to the config):

1
import { mainTheme, getTheme } from 'handsontable/themes';
2

3
const hot = new Handsontable(container, {
4
  theme: mainTheme,
5
});
6

7
getTheme('main')
8
  ?.setColorScheme('auto')
9
  ?.setDensityType('comfortable');

UMD build (script tags)

When using Handsontable via CDN or script tags, load the theme script after the main Handsontable script. The theme auto-registers itself, and you can retrieve it using getTheme():

1
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
2
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/themes/main.min.js"></script>
3

4
<script>
5
  // The theme is auto-registered when the script loads
6
  // Retrieve it using getTheme()
7
  const theme = Handsontable.themes.getTheme('main')
8
    .setColorScheme('auto')
9
    .setDensityType('default');
10

11
  const hot = new Handsontable(document.getElementById('container'), {
12
    theme: theme,
13
    // ... other options
14
  });
15
</script>

Option 2: Using CSS files

Alternatively, you can load theme CSS files and pass the theme name as a string to the theme option.

Load CSS files

To ensure Handsontable renders correctly, it’s required to load both the base and theme CSS files. The base file contains structural styles, while the theme file includes colors, sizes, and other variables needed for the grid.
```
1
// ESM (ECMAScript modules)
2
import 'handsontable/styles/ht-theme-main.min.css';
3

4
// CommonJS
5
require('handsontable/styles/ht-theme-main.min.css');
```
Alternatively, you can import the necessary files from the recommended CDN such as JSDelivr or cdnjs.
```
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />
```

Pass a theme name

To use a theme, specify the theme name in the data grid’s global settings object:

1
const container = document.querySelector('#handsontable-example');
2

3
const hot = new Handsontable(container, {
4
  // theme name with obligatory `ht-theme-*` prefix
5
  theme: 'ht-theme-main',
6
  // other options
7
});

The legacy theme

The legacy CSS file (handsontable.full.min.css) was the default styles up until version 15 (released in December 2024). These styles are legacy and are removed in version 17.0.0.

Known limitations

In some cases, global styles enforced by the browser or operating system can impact the appearance of the data grid. This is a common challenge faced by all websites, not just Handsontable. Here are two specific scenarios and how to handle them:

High contrast mode in Windows: To style the component when Windows’ high contrast mode is active, use the forced-colors media query. This allows you to detect and adapt to forced color settings. Read more
Auto dark theme in Google Chrome: Chrome automatically applies a dark theme in some scenarios. To detect and manage this behavior, refer to the official Chrome guide

Handsontable 15.0.0: Introducing Themes and Functional React Wrapper

Handsontable 16.2.0: Simplified Theming and Advanced User Notifications

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support