Theming

Style packs

These are the bundled style packs:

bc_styles
#> [1] "vega" "nova" "maia" "lyra" "mira" "luma" "sera" "rhea"

To use a style pack, set the style argument of bc_deps():

bc_deps(style = "lyra")

Create a theme

Open the online theme builder, or run it locally:

bc_theme_builder()

Select CSS to save theme.css. The file contains only the :root and .dark token blocks.

You can also use tweakcn. Select Code and save the CSS as theme.css. It works with bc_theme() unedited.

Load your theme

Call bc_theme() after bc_deps():

htmltools::tagList(
  bc_deps(),
  bc_theme("theme.css"),
  bc_button("Save")
)

Use the theme argument of bc_deps() to do both in one call:

bc_deps(theme = "theme.css")

If your theme uses additional web fonts, those need to be imported manually.

Further theme customization

If further customization of a theme is necessary, it should be done in the theme.css file for styling tokens. Additionally, if you need to modify the components wholesale, it should be done via @apply directives using utility classes.

Add your own classes

You can write your own classes in theme.css using Tailwind's @apply directive. Classes written this way go inside of @layer components:

@layer components {
  .btn-pill {
    @apply rounded-full;
  }
}

Because bc_theme() gives the browser the file as-is, Tailwind has to compile the file first. Compiling turns each @apply into regular CSS.

For Tailwind to know what rounded-full means, the first line of theme.css must be this:

@reference "tailwindcss";

The @reference line lets Tailwind look up the utilities without copying all Tailwind's own styles into your file. A theme exported from tweakcn starts with @import "tailwindcss";, so replace that line with @reference "tailwindcss";. A theme from the theme builder has no such line, so add it.

Compile the file with the Tailwind CLI:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i theme.css -o theme.min.css

Then load theme.min.css with bc_theme() instead of theme.css, and pass the class to a component:

htmltools::tagList(
  bc_deps(),
  bc_theme("theme.min.css"),
  bc_button("Save", class = "btn-pill")
)