Differentiate const and let

[nonameolsson]

Thanks for a great theme!

Would it be possible to adjust the colors for const and let variables in JavaScript/TypeScript? They use the same color right now.

Valley

Other themes

Dark+

Dark+ V2 (Experimental)

GitHub Dark Default

Light+

Light+ V2 (Experimental)

GitHub Light Default

[timnarr]

Hi @nonameolsson,

thanks for your comment What exactly would you expect in Valley? My first idea was to have let in a lighter color than const. What do you think?

[nonameolsson]

Hi @nonameolsson,

thanks for your comment What exactly would you expect in Valley? My first idea was to have let in a lighter color than const. What do you think?

Thank you for an excellent theme!
As you say, a lighter color for let is a good approach. I have compared a lot of themes, and only a few of them differentiates let from const. Those who differentiates those two are going with a lighter color for let.
👍🏻

Thanks for answering so quickly! 👏🏻

[timnarr]

Okay, I'm really unsure about what color it should be. Can you try adding this snippet to your settings.json file and see if this works for you? Maybe you can tweak the hex value and let me know, what is working for you?

Thanks for you help 🙂

  "editor.tokenColorCustomizations": {
    "[Valley]": {
      "textMateRules": [
        {
          "scope": [
            "variable.other.readwrite.js",
            "meta.block.js",
            "meta.function.js",
            "source.js"
          ],
          "settings": {
            "foreground": "#87A6AC",
          }
        }
      ],
    },
  },

[nonameolsson]

Thanks! I tried it but I didn't see any change actually. Probably I must have done something wrong.

What am I doing wrong? :)

[timnarr]

Actually, everything looks correct 🤔
Or are you using Valley Italic?

[nonameolsson]

Actually, everything looks correct 🤔 Or are you using Valley Italic?

So strange. I'm using just Valley.

What could be wrong?

[nonameolsson]

Actually, everything looks correct 🤔 Or are you using Valley Italic?

So strange. I'm using just Valley.

What could be wrong?

Hello again!
Any updates on this? I would really like to continue using Valley, it is one of y favourite themes 🙂

[timnarr]

Hi @nonameolsson
it's hard to say and I'm really unsure why I choosed these scopes back than 😄

Can you try this this one please:

"editor.tokenColorCustomizations": {
    "[Valley]": {
      "textMateRules": [
        {
          "scope": [
            "variable.other.constant",
            "source.js",
          ],
          "settings": {
            "foreground": "#ff00aa",
          }
        }
      ],
    },
  },

[nonameolsson]

Hi @nonameolsson it's hard to say and I'm really unsure why I choosed these scopes back than 😄

Can you try this this one please:

"editor.tokenColorCustomizations": {
    "[Valley]": {
      "textMateRules": [
        {
          "scope": [
            "variable.other.constant",
            "source.js",
          ],
          "settings": {
            "foreground": "#ff00aa",
          }
        }
      ],
    },
  },

Thank you, that is working like a charm!

[timnarr]

@nonameolsson cool, glad to hear. Would you like to share what color you chose for const? By the way, you can discover Valley's colors here: https://calcolor.co/palette/915560412

[nonameolsson]

@nonameolsson cool, glad to hear. Would you like to share what color you chose for const? By the way, you can discover Valley's colors here: https://calcolor.co/palette/915560412

Thanks for your help! At the moment I'm using "Pinkish" (#d66a81). It works well 🙂

At the moment all the properties have the same color.

This is how it looks in some other themes.

I have very limited experience with customising VS Code themes. Do you know the key to use if I would like to adjust this code syntax?