Custom rdeck Themes?

[mrworthington]

Hi Anthony,

I'm just wondering what the best way to go about writing a custom theme would be in the way you've written "kepler" and "light"? Ideally, I'd like to make adjustments to the theme, like this. I know I could do this by adding some CSS after I save a self-contained file, but wondering if there's a way to create a custom theme for use with rdeck? Here's an example:

Light Theme

Custom Theme

[anthonynorth]

Custom theming isn't currently supported; most of the classnames are generated base64. I hadn't considered theme customisation, the two themes are suitable for my team. Until I've implemented a more-friendly naming scheme for classnames, custom theming will require brittle & hacky css.

The tooltip container has a generated class, so selecting it isn't clean. One method for targeting the tooltip (at least until I've implemented something I intend to support) is via rdeckContainer.querySelector("[style*='transform']").

Or example class:

.rdeck [style*='transform'] {
  /* styles */
  border: 1px solid red;
}

[mrworthington]

This is incredibly helpful as an interim solution. The only thing worth mentioning is if the left-hand side of tooltip table had a <th> tag instead of <td>, it'd be even easier to customize the css for the tooltips. Right now, both the left and the right columns use <td> tags. Here's what I was able to do with the following scss:

Screenshot

SCSS Snippet

// rdeck font vars
$system: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;

// General rdeck tooltip styles
.rdeck [style*='transform'] {
  border: 2px solid #055387;
  font-family: $system;
}

// rdeck tooltip Header styles
.rdeck [style*='transform'] div {
  font-weight: 900;
  font-size: 1.75rem;
  color: #142b3b;
}