JavaScript Data Grid Themes

JavaScript Data GridThemes

Use Handsontable's built-in themes or customize its look by adjusting available CSS variables.

On this page

Overview

Handsontable themes manage most visual elements of the data grid and are easy to customize, thanks to over 180 CSS variables available for each theme. By default, two built-in themes are available: main, horizon and classic. All includes dark and light modes that automatically detect your application's preferred color scheme.

Built-in themes

The main (source (opens new window)) 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 (source (opens new window)) 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 (source (opens new window)) theme is a replacement for the old legacy classic style. It retains the familiar look and feel of the original classic theme, 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.

    Light and dark modes

    Each theme comes with three modes:

    • Light mode
    • Dark mode
    • Auto-dark mode

    The light and dark modes ignore the parent container's color scheme and remain either light or dark regardless the prefers-color-scheme media query value. The auto-dark mode automatically follow the preferred color of the parent container.

    Here's a summary of each available theme, mode, and their corresponding file names.

    Use a theme

    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.

    // ESM (ECMAScript modules)
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';

// CommonJS
require('handsontable/styles/handsontable.min.css');
require('handsontable/styles/ht-theme-main.min.css');

    Alternatively, you can import the necessary files from the recommended CDN such as JSDelivr (opens new window) or cdnjs (opens new window).

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />

    Pass a theme name

    To use a theme in your app, you need to specify the theme name in the data grid's global settings object. For the main theme, you can choose from the following theme modes:

    • ht-theme-main - light mode
    • ht-theme-main-dark - dark mode
    • ht-theme-main-dark-auto (recommended) - auto dark mode

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

const hot = new Handsontable(container, {
  // theme name with obligatory `ht-theme-*` prefix
  themeName: 'ht-theme-main-dark-auto',
  // other options
});

    The classic (legacy) theme

    The classic (legacy) CSS file (handsontable.full.min.css (opens new window)) was the default theme up until version 15 (released in December 2024). This theme is a legacy theme and will be 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 (opens new window)
    • 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 (opens new window)

    Troubleshooting

    Didn't find what you need? Try this: