[Feature Request]: Use bootstrap theme for all elements

[asbates]

Feature description

It would be nice to have everything in the app to have the same look and feel if I use anything other than the Shiny default theme. For example if I want to use Bootswatch's Minty theme, I would like the sparklines in the tm_variable_browser table to match.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.

Contribution Guidelines

• [X] I agree to follow this project's Contribution Guidelines.

Security Policy

• [X] I agree to follow this project's Security Policy.

[asbates]

The thematic package might be a quick and easy way to achieve this.

[nikolas-burkoff]

Also note the histogram and labels in the filter panel https://github.com/insightsengineering/teal.slice/pull/164#discussion_r1073787170

[asbates]

Bootstrap 3 doesn't have variables. So we would either need to

1. Only support bootstrap 4 and higher (I suggest this)
2. Handle different bootstrap versions differently

For 2, we could for example define CSS variables for bootstrap 3 ourselves and use those or not depending on the version.

[asbates]

Bootstrap uses hex for colors. If we wanted to use primary in the slider histogram for example, we would likely use different different opacity for filtered vs. unfiltered. There's not a direct way to do this in CSS unfortunately.

But luckily, it looks to be fairly easy to do this with JavaScript. We could do the following.

• Read in primary color and convert to rgb with the desired opacity.
• Write this out to a variable or overwrite a variable.

Conversion: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb.

Updating variables: https://www.w3schools.com/css/css3_variables_javascript.asp and https://css-tricks.com/updating-a-css-variable-with-javascript/.

[asbates]

Just found that Bootstrap 5 also has variables for the colors in rgb.

[gogonzo]

Switching to bslib even more relevant with this item