search

jspreadsheet / pro

Jspreadsheet Pro | The javascript spreadsheet
https://jspreadsheet.com/
15 stars 1 forks source link

Theming needs more explanation #301

Closed dmt0 closed 6 months ago

dmt0 commented 10 months ago

I'm trying to get themes working as described here: https://jspreadsheet.com/docs/themes

I added the css vars to my css like so.

:root {
  --header_color: #000;
  --header_color_highlighted: #000;
...
}

But I still see that jspreadsheet hardcodes values for headers and other elements. Looking at your example, I see there is a jspreadsheet.themes.css file that is not mentioned anywhere. I copied that whole thing into my code. So most values are now overwritten with that. Even though it's still not the same as the example on your theming docs page.

On your page I see

.jss>tbody>tr>td.jss_cursor {
  background-color: var(--cursor);
}

on mine I see 

.jss>tbody>tr>td.jss_cursor {
  background-color: #fafbfd;
  background-color: var(--cursor);
}

And the background-color: #fafbfd; comes from jspreadsheet/dist/jspreadsheet.css. Now after importing jspreadsheet.themes.css, I still see a lot of hardcoded classes.

What's the right way to do theming? Simply adding CSS variables does not do the job. Thanks

hodeware commented 6 months ago

We have update the themes on version 11.