Override the css

Tags: #<Tag:0x00007efc6d3993e0> #<Tag:0x00007efc6d398be8>
#1

Hello,
How can I change the color representation in the image below by overriding the CSS?
I hope you can provide me with a simple example or just the style that I could change those three sections of the color.
Thank you in advance

hhh
hhh.png1290×1322 77.5 KB

#2

Hi @ykifahh

The button OK can be changed via --ht-primary-button-background-color: class

22

It also has its hover class --ht-primary-button-hover-background-color and focus class --ht-primary-button-focus-background-color (used when for example someone uses keyboard to navigate to the button).

Then --ht-checkbox-checked-border-color is a border for a checkbox and --ht-checkbox-checked-background-color is the background for the checkbox.

36

and finally the column header that is actively selected. Here --ht-header-active-border-color: is the border class for it and here’s the background --ht-header-active-border-color

38

If you would also want to alter the color of the dropdown menu button then it is --ht-icon-active-button-hover-border-color for the border and --ht-icon-active-button-hover-background-color for the backgrond

05

Here’s a demo with all those changes applied https://stackblitz.com/edit/pgrkmldm-ftg7nf5n?file=some-custom-style.css,index.js,index.html

And here you can read more about how to create a upload a custom theme https://handsontable.com/docs/javascript-data-grid/themes/#create-a-custom-theme.

#3

Thank you