[GH #9397] Theming support in HOT

Tags: #<Tag:0x00007fee30babde8> #<Tag:0x00007fee30babc08>

Will handsontable ever add true support for authentic theming of tables via CSS custom properties?

I have tried many times to override some of the default styles, but it is almost impossible in some cases as a lot of the elements are added dynamically by HOT JS code. Even worse, most times the styles are applied as inline styling

Hi @shakiem_saunders

That is true. Currently, it is pretty hard to have control over all the elements in the table.

However, in Q3-Q4 we are starting an Accessibility project that will force us to make some changes to the UI. Then in 2022, we plan to provide themes for Handsontable (however, the end date is not yet set).

1 Like

Hi,
Have you been able to work on this (wanted) feature ?
Many thanks

We made some drafts. But I’d be more than happy to hear your feedback, @littlelama

I do not know when we will be able to publish themes. But any tips on the styling are welcomed. We made some minor changes to styling in v10. But that was an alteration for the whole table (without the ability to switch between the two options).

If I could make some wishes for theming I would love to see a general update of the current grid by default. Then a more spaced out version would be nice. Today it looks like Excel (from 10 years ago), which is a good thing as you’re able to fit more data on the screen. But sometimes you want a prettier grid, and my experience is that more air/white space in the grid makes it easier on the eyes.

So my theme wish list looks like this:

Default compact
Default spaced out
Dark compact
Dark spaced out

Thank you very much for the feedback @mottosson
We will definitely consider all the tips.