Style help pane

[salim-b]

I couldn't find any useful information on the topic by googling, so I thought I'd ask you since you seem to have quite some experience with RStudio's UI styling.

Is it possible to provide a custom stylesheet for RStudio's help pane?

RStudio's current help pane styling is very minimal and looks almost the same for normal and \code{}-styled text – which is just sad IMHO. What I would really like is styling similar to how rdrr.io does it. Example for ?base::deparse: https://rdrr.io/r/base/deparse.html

It's just so much more readable. 🤓

[rileytwo]

I've only been able to style the help pane within an *.rstheme file. From what I can tell with messing around in RStudio's DevTools, the issue lies in when darkstudio.css is loaded in relation to the help pane css files. You can try my kiss theme, which modifies the font families/colors. Or, you can just take a look at the elements in the file for use in the theme of your choice.

I think most of the elements can be altered, since (I think) they're exposed to the R.css file(s) packages are themed with.

[salim-b]

Ok, thanks for your tips! My CSS skills are pretty low and I have no experience with RStudio theming, but I'll see what I can achieve when I find some spare time.

[rileytwo]

Here are the lines from kiss.rstheme that style the help pane.

Snippet:

/**
*
* Help Pane fonts
*
*/

/* #rstudio_workbench_panel_help * :-webkit-any(code) {
   font-family: var(--kiss-ui-monospace-font) !important;
 } */
/* .rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme p code, */
/* .rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme pre,  */
/* .rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme pre code, */
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme
  :-webkit-any(pre, code) {
  font-family: var(--kiss-ui-monospace-font) !important;
}

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme p code {
  color: var(--kiss-help-monospace-font-fg) !important;
}

.rstudio-themes-flat.editor_dark.ace_editor_theme a {
  color: var(--kiss-cursor) !important;
}

You can ignore the commented lines--the :-webkit-any() should cover each element that's commented out.

You'll need to replace var() functions to the font-family/color you wish to use. For example, if you wanted to use Fira Code as the monospace font used in the help pane, you would change

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme
  :-webkit-any(pre, code) {
  font-family: var(--kiss-ui-monospace-font) !important;
}

to

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme
  :-webkit-any(pre, code) {
  font-family: Fira Code !important;
}

Obviously, you'll need to have the font installed for the help pane to actually use the font. This should work, but let me know if you run into any trouble.

[salim-b]

Hey @rileytwo

Thanks again for your hints! Today I've spent some hours creating a custom version of the rscodeio theme and finally managed to style the help pane according to my aesthetic feelings (largely inspired by GitHub CSS and the likes 😅).

The relevant rules look like this (feel free to adopt if you like):

/* help pane */
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme p,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme h1,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme h2,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme h3,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme h4,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme h5,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme h6 {
  line-height: 1.75 !important;
  color: #DEDEDE !important;
}

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme pre,
.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme code {
  font-family: "Fira Code", Ubuntu, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 85%;
  color: white !important;
  background-color: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
}

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme code {
  padding: .2em .4em;
}

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme pre {
  padding: 1.5em;
  line-height: 1.45;
  overflow: auto;
}

.rstudio-themes-flat.rstudio-themes-dark.editor_dark.ace_editor_theme a {
  color: #80D7FF !important;
  text-decoration: none;
}

And the the result looks like this (for ?pal::as_string):

[rileytwo]

@salim-b that looks great! I'm actually going to reopen this issue, since I would like to support theming the help pane if possible.

[salim-b]

Ok, cool!

Note that I wasn't able to use CSS variables for the help pane styling. At some point I switched to "hardcode"[1] the font family spec, colors etc. and then it worked. I have no clue what the underlying problem was, I'm not skilled in CSS. 😛 Just as a warning...

[1]: Doesn't really make a difference since these definitions aren't used multiple times anyways.