Fonts do not display correctly

[DavidSchischke]

Hey man,

so this is probably a super stupid question, but I'm not a programer at all and feel a little bit lost here. I am studying psychology and have been using R for all my analysis over the last year and wanted to switch up the looks a bit. I installed your package (I don't know if I did that correctly though) and somehow, the fonts don't really seem to work on any dark theme if I use daRkStudio. I'll upload a picture to clarify what the issue is:

Do you by any chance know what I might have done wrong? I am using RStudio version 1.2.5019 on MacOS 10.15.3.

Also, terribly sorry if this is not the right way to ask a question like this. I have never used GitHub before and didn't find any other way of contacting you.

Thanks in advance! Best,
David

[rileytwo]

Not a stupid question at all, no worries.

Can you tell me which editor theme you are using? You can find this by going to Preferences -> Appearance.

I think this may be related to the foreground color your theme is using.

I've also just pushed an update. Can you try updating index.htm and custom_styles.css for me?

[DavidSchischke]

Hey man,

sorry for not getting back quicker. I installed the update, sadly the problem persisted. I am currently using the "Vibrant Ink" Theme, but it is the same across all dark themes (preinstalled as well as third party). Thanks for looking into it!

[rileytwo]

I installed RStudio 1.2.5042, tested daRkStudio with Vibrant Ink, and was able to see the fonts as expected. If you're okay with updating RStudio, would you mind updating to 1.2.5042 and trying again?

[DavidSchischke]

I just updated R as well as RStudio and am still experiencing the problem :/

[rileytwo]

Hmm. There must be some property that's overriding the default text, since the text color should be black in preferences, but white in the UI.

Have you used RStudio's devtools? You can open devtools by right clicking anywhere in RStudio and selecting "Inspect element". That's what I use to figure out why things may be broken or displaying incorrectly, and since I'm not able to reproduce your issue, I'm not able to see what's causing the text to display incorrectly.

In RStudio, right click on the name of a tab that's not showing properly (for example, the Environment tab in your first image). Select "Inspect element", and when devtools opens up, find the effective element and/or property being used for the text color. It should look something like this:

Although in your case, the color won't be white.

[DavidSchischke]

Hey,

I checked the CSS and, unlike in your image, the DevTools are displayed as a light theme:

Aside from that, everything looks like your version to me:

One more thing I realized: When I start up RStudio it displays this warning for a split second:

and the console shows seven warnings:

I'm sorry I'm such a pain in the ass, really appreciate your help. If you don't know what the problem is or don't have the time/nerve to look into it, I'm totally okay with using a light theme.

[rileytwo]

Don't worry about it, really! I'd rather you open an issue than abandon using this.

Your devtools showing as a light theme is the normal/expected behavior if you haven't changed the devtools theme to Dark. You can do that by clicking the three dots in the top right corner and selecting Preferences.

From what I can tell, devtools is showing the effective color should be white for text. I can't figure out why the text isn't white, especially if the property color is set to rgb(255, 255, 255. What's weirder is that the Preferences pane text is also not displaying properly. daRkStudio intentionally avoids modifying the Preference pane, so it shouldn't change the text, although I suppose it could be happening.

The errors in the console are because of the modified index.htm file the README instructs you to use. I use RStudio Preview, and base custom_styles.css off of RStudio Preview's index.htm. RStudio Preview is a beta release of RStudio, so naturally some changes exist between the two. RStudio Preview references files that are not present in RStudio (the version you're using), which is what the errors are describing. I've been meaning to come up with a solution to that, but haven't gotten around to it yet...

In the meantime, to solve those errors, you can copy/symlink custom_styles.css to /Applications/RStudio.app/Contents/Resources/www/custom_styles.css and then edit RStudio's index.htm manually, by adding in a <link/> near the end:

Before:

<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="gwt:property" content="compiler.stackMode=#compiler_stack_mode#"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="csrf-token" content="#csrf_token#" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <title>RStudio</title>
    #!head_tags#
    <link type="text/css" rel="stylesheet" href="css/icons.css" />
    <script type="text/javascript" language="javascript" src="#!gwt_prefix#rstudio/rstudio.nocache.js"></script>
  </head>

  <body>
  </body>
</html>

After:

<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="gwt:property" content="compiler.stackMode=#compiler_stack_mode#"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="csrf-token" content="#csrf_token#" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <title>RStudio</title>
    #!head_tags#
    <link type="text/css" rel="stylesheet" href="css/icons.css" />
    <script type="text/javascript" language="javascript" src="#!gwt_prefix#rstudio/rstudio.nocache.js"></script>
  </head>

  <body>
  </body>
  <link rel="stylesheet" href="custom_styles.css" type="text/css" />
</html>

That should fix the errors, but I don't think it will fix the text issue. Have you tried uninstalling/reinstalling?

[DavidSchischke]

I just re-downloaded and re-installed RStudio (1.2.5042) as well as daRkStudio and now have quite a different problem. The errors are gone - however, the stylesheet is not implemented into RStudio. So it just looks like it did before with the blue borders. I did everything twice and also tried it with the supplied index.htm from the zip-File (which led to the same errors, but didn't change the design either). I'm fairly certain that I'm just doing something wrong (even though I don't know, what) and am really sorry for wasting your time :/ Really appreciate the great support!

[rileytwo]

did you update the index.htm and copy/symlink custom_styles.css files?

[DavidSchischke]

Yup! Just tried it again and it worked, so I probably went wrong somewhere along the way. The fonts however still do not display as white :/