ipydatagrid icon indicating copy to clipboard operation
ipydatagrid copied to clipboard

Use var(--something) to color cells

Open tfmark opened this issue 10 months ago • 2 comments

Is your feature request related to a problem? Please describe.

There's currently no built-in way to color rows in a row % 2 fashion (see https://github.com/bloomberg/ipydatagrid/issues/379).

Rolling our own is relatively simple:

import ipydatagrid
import pandas as pd

ipydatagrid.DataGrid(
    dataframe=pd.DataFrame({"a":[1, 2, 3]}),
    default_renderer=ipydatagrid.TextRenderer(background_color=ipydatagrid.VegaExpr("cell.row % 2 == 0 ? 'white' : 'red'"))
)

image

.. however when I switch to dark mode, the styled rows does not update (of course they wouldnt), but the rest of the grid does:

image

I thought I might be able to use CSS variables to get around this, but trying to use, e.g. var(--ipydatagrid-layout-color2) results in a black background:

image

which suggests the variables aren't available to the canvas (or whatever is coloring the rows).

Describe the solution you'd like I'd like to be able to theme my grid with variables so it works in both light and dark mode.

Describe alternatives you've considered

The python widget does not have the attribute _isLightTheme that the javascript side has, otherwise I might be able to manually set different TextRenderers based on whether or not the widget was experiencing dark mode.

Additional context

n/a

tfmark avatar Apr 03 '24 16:04 tfmark