search

rstudio / DT

R Interface to the jQuery Plug-in DataTables
https://rstudio.github.io/DT/
Other
600 stars 181 forks source link

Support Bootstrap CSS variables for better theming of DT tables in Bootstrap #1081

Open gadenbuie opened 1 year ago

gadenbuie commented 1 year ago

The latest versions of Bootstrap include a layer of CSS properties that help make theming, and adapting to new themes, much easier for downstream components like DT data tables.

For instance, the popover menus for DT filters assume a light theme by default – https://github.com/rstudio/bslib/issues/267 – and cannot be themed by third parties the outside due to their use of inline styles.

Where DT currently uses the following inline styles for popovers

background-color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
border-radius: 4px;
padding: 20px 20px 10px;

it could instead (at least for BS5) use the following.

background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
border-width: var(--bs-border-width);
border-radius: var(--bs-border-radius);
border-style: var(--bs-border-style);
gadenbuie commented 1 year ago

Also the BS5 rules for DT datatables could pick up some BS5 CSS variables, namely:

These would also likely help DT be more responsive to Bootstrap's new dark mode (in BS 5.3). In general, if you or anyone are exploring dark mode support (#1085), especially for the latest version of Bootstrap, I'd recommend using Bootstrap's CSS variables as much as possible.