Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gadenbuie opened this issue Aug 30, 2023 · 1 comment

Comments

@gadenbuie
Copy link
Member

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 – rstudio/bslib#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
Copy link
Member Author

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

  • --bs-table-striped-bg
  • --bs-table-active-bg
  • --bs-table-hover-bg

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant