18

How can I change the color of the line numbers in VS code

enter image description here

Often times the line numbers are to dark to make out.

krv
  • 631
  • 5
  • 13
  • 24

4 Answers4

41

Version 1.12 introduced new workbench theming options (they were experimental in 1.11).

There is a setting for the color of line numbers:

"workbench.colorCustomizations": {
  "editorLineNumber.foreground": "#999999"
}

Some themes also define current line number:

"workbench.colorCustomizations": {
  "editorLineNumber.activeForeground": "#555555"
}

See the Theme Color Reference.

G-Man Says 'Reinstate Monica'
  • 7,678
  • 22
  • 41
  • 87
andykellr
  • 526
  • 5
  • 5
  • This also works for CodeSandbox, for anyone looking for how to change the line number color there (it is pretty dim!) – Karl Horky Apr 02 '20 at 16:08
  • More info about the issue with the default CodeSandbox theme here: https://github.com/codesandbox/codesandbox-client/issues/3824#issuecomment-607957131 – Karl Horky Apr 02 '20 at 16:43
  • Any way to control the background of the overall "line number sidebar"? – jerclarke Jul 11 '20 at 23:22
4

@jerclarke If you want to change the background color of the sidebar containing the row numbers, use:

    "workbench.colorCustomizations": {
        "editorGutter.background" : "#393a39"
    }
Saulo
  • 41
  • 1
3

There doesn't appear to be an option to tweak individual colors from a color theme in VSCode (yet?), but there are many color themes to choose from (built-in and 3rd-party), and they do post instructions on how to design your own color theme:

https://code.visualstudio.com/Docs/customization/themes

emackey
  • 221
  • 2
  • 8
0

In Visual Studio 2017 RC it can be done as followed:
Tools -> Options -> Environment -> Fonts and Colors -> Line Number
Don't know if it's the same is VS Code, sorry if it isn't.

Gustav Eriksson
  • 59
  • 4