Strings are too light

[simurai]

Feedback from a DM:

The contrast of the string is a bit light

compared to the default

[minimaxir]

tbh, inversely the string color is a bit dark in Light mode too. I cannot see any contrast between normal text and strings either. (albeit that's the case with the GitHub UI in general; but more notable when using it as a primary IDE theme)

[mattaningram]

This is my first reaction to using this theme as well. Beautiful theme but the light strings makes HTML and CSS harder to read.

[posthardcode]

I've been experimenting and it's trickier to make them darker if you want to stick to Primer (as other scopes are using darker hues of blue). An alternative would be #ffab70 which doesn't seem to clash with other colors. However, it introduces a new color to the theme palette, which might be undesired...

[samuelgozi]

Agree. That it the first thing I noticed. Hurts the eyes... I think that if needed we should deviate from Primers colours in this case. Maybe use a darker shade of the current color?

[balazs4]

I am not a designer, but #fff5b1 $yellow-200 looks good to me:

Reference image (without patch)

/// really nice theme btw :clap:

[estevanmaito]

It gets even worse with template literals, as the variables look almost the same as the surrounding string.

GitHub Dark

Dracula

[simurai]

tbh, inversely the string color is a bit dark in Light mode too.

Yeah, it's a tricky question. How much should this "GitHub theme" try to mimic the syntax highlighting on github.com? Below an example and a screenshot from VS Code. It doesn't have to be 100% the same, but would still be nice to stay somewhat close. Not that github.com's syntax highlighting is perfect, but people should feel familiar. :grimacing:

https://github.com/primer/github-vscode-theme/blob/71691fbdde883083ad95b60d454b689e35a43f47/src/index.js#L10-L13

As for the dark version.. we might can be less strict since that doesn't exist for github.com.

I've been experimenting and it's trickier to make them darker if you want to stick to Primer (as other scopes are using darker hues of blue).

Yeah, blue[7] is still pretty light and blue[6] already gets used a lot elsewhere. Here a mix in between:

Maybe as quick fix before considering a bigger change.

[loreina]

I feel a lighter blue is too close to $blue-300 #79b8ff and can be hard to read in the same line:

I'm using $yellow-200 #fff5b1 as @balazs4 suggested as a temporary fix:

[paramaggarwal]

As a user, I come to use this theme because I want to feel at home when switching between GitHub web and VSCode. I think we should honour this expectation and try to stay close to the GitHub web theme.

[simurai]

I'm using $yellow-200 #fff5b1 as @balazs4 suggested as a temporary fix:

👍 If anyone else wants to test it out, here the config you can add to your settings.json:

  "editor.tokenColorCustomizations": {
    "[GitHub Dark]": {
      "strings": "#fff5b1"
    }
  },

[minimaxir]

The corresponding TextMate rule will have to be added too:

"[GitHub Dark]": {
      "strings": "#fff5b1",
      "textMateRules": [
        {
          "scope": "punctuation.definition.string",
          "settings": {
            "foreground": "#fff5b1"
          }
        }
      ]
    }

I've been testing that out and it works fine.

[MrSunshyne]

As a user, I come to use this theme because I want to feel at home when switching between GitHub web and VSCode. I think we should honour this expectation and try to stay close to the GitHub web theme.

Not at the expense of readability

[paramaggarwal]

@MrSunshyne Your claim is that readability is lacking on GitHub website? Because my point was about sticking to the GitHub website design as much as possible.

[estevanmaito]

@MrSunshyne Your claim is that readability is lacking on GitHub website? Because my point was about sticking to the GitHub website design as much as possible.

I think you're missing the point of this issue. GitHub uses a light theme, and as pointed earlier (https://github.com/primer/github-vscode-theme/issues/19#issuecomment-627240537) there is no intent on changing it.

We're trying to find a way to improve readability for the Dark Theme, and with this particular theme, there is more room for changes, as GitHub doesn't have a dark mode, so there is no standard for it.

[balazs4]

We're trying to find a way to improve readability for the Dark Theme, and with this particular theme, there is more room for changes, as GitHub doesn't have a dark mode, so there is no standard for it.

And how about the Github Mobile (iOS) dark mode?

Same color palette (?), but they are slightly different assigned to the tokens.

I personally find the mobile version somehow cleaner. 🙄

What do you think?

[estevanmaito]

You're right, mobile apps (Android uses the same theme as iOS) already have a dark theme, and the color palette seems the same, but better applied.

[simurai]

And how about the Github Mobile (iOS) dark mode?

Yeah, that's a great idea. Let's see if we can :flashlight: :mag: spy on their dark theme and steal a few hex values.

[this-fifo]

There's also a dark theme available for the GitHub Desktop app

[CatsMiaow]

• VS Code v1.45.1
• GitHub Theme v1.1.2 dark

Is there any reason why the color of the const variable is similar to the color of the text?

[MrSunshyne]

@MrSunshyne Your claim is that readability is lacking on GitHub website? Because my point was about sticking to the GitHub website design as much as possible.

@paramaggarwal Yep that is my claim. I would 100% prefer loading a project in vscode/webstorm darkmode before doing any serious code review. I didn't even know I was doing that until I thought about it after reading your question. I can glance at the code on github.com, but not for long. Also, to be clear, this is my opinion and I understand thousands of people do code review on github since years and it's working perfectly fine for them.

@estevanmaito since there is no standard for it, it's probably makes inserting new variations(removing while text) more acceptable?

[estevanmaito]

@MrSunshyne actually we found that there is already a Dark Mode for GitHub, mainly used on mobile, and it actually looks good https://github.com/primer/github-vscode-theme/issues/19#issuecomment-630435353

It would make sense using it.

[icebeam030]

This might be irrelevant to this issue but I feel using #fff as white in general is too bright in a dark theme and kind of hurts my eyes. I am not sure if the iOS app uses #fff as white but we can test that out.