Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#FF1744
  • activityBar.background#000000
  • activityBar.foreground#FFFFFF
  • button.background#FFFFFF
  • button.foreground#000000
  • button.hoverBackground#FF6B8A
  • descriptionForeground#8C91A0
  • diffEditor.insertedTextBackground#00FF8522
  • diffEditor.removedTextBackground#FF2D5522
  • dropdown.background#050505
  • editor.background#000000
  • editor.foreground#F8FBFF
  • editor.inactiveSelectionBackground#FFFFFF22
  • editor.lineHighlightBackground#FFFFFF10
  • editor.selectionBackground#FFFFFF44
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00FF85
  • editorGutter.background#000000
  • editorGutter.deletedBackground#FF2D55
  • editorGutter.modifiedBackground#FFD60A
  • editorIndentGuide.activeBackground1#FFFFFF
  • editorIndentGuide.background1#222222
  • editorLineNumber.activeForeground#FF1744
  • editorLineNumber.foreground#8C91A0
  • editorOverviewRuler.addedForeground#00FF85DD
  • editorOverviewRuler.deletedForeground#FF2D55DD
  • editorOverviewRuler.modifiedForeground#FFD60ADD
  • errorForeground#FF2D55
  • focusBorder#FFFFFF99
  • foreground#F8FBFF
  • gitDecoration.addedResourceForeground#00FF85
  • gitDecoration.deletedResourceForeground#FF2D55
  • gitDecoration.modifiedResourceForeground#FFD60A
  • input.background#050505
  • input.border#FFFFFF99
  • list.activeSelectionBackground#FFFFFF33
  • list.highlightForeground#2979FF
  • minimapGutter.addedBackground#00FF85
  • minimapGutter.deletedBackground#FF2D55
  • minimapGutter.modifiedBackground#FFD60A
  • panel.background#000000
  • sideBar.background#000000
  • sideBar.foreground#F8FBFF
  • statusBar.background#000000
  • statusBar.foreground#FF1744
  • tab.activeBackground#050505
  • tab.activeForeground#FF1744
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#8C91A0
  • terminal.background#000000
  • terminal.foreground#F8FBFF
  • terminalCursor.foreground#FFFFFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#F8FBFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C91A0italic
keyword, storage.type, storage.modifier#FFFFFF
entity.name.function, support.function#FF6B8A
entity.name.function.member, meta.method#7DA8FF
variable, meta.definition.variable#F8FBFF
variable.parameter, meta.parameter#FF1744
entity.name.type, support.type, entity.name.class#2979FF
entity.name.type.interface#2979FFitalic
string, constant.other.symbol#FF1744
constant.numeric, constant.language.boolean#2979FF
variable.other.property, support.variable.property#7DA8FF
keyword.operator, punctuation.accessor#FFFFFF
entity.name.tag, entity.other.attribute-name#FFFFFF
invalid, invalid.illegal#FF2D55bold