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.background#ffffff
  • activityBar.foreground#3d3b4f
  • button.background#3d3b4f
  • button.foreground#ffffff
  • dropdown.background#ffffff
  • dropdown.border#b2b2b2
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#3d3b4f
  • editor.lineHighlightBackground#eeeeee
  • editor.selectionBackground#bbbbbb
  • editorGroup.border#ffffff
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorLineNumber.activeForeground#3d3b4f
  • editorLineNumber.foreground#bbbbbb
  • editorSuggestWidget.highlightForeground#3d3b4f
  • editorSuggestWidget.selectedBackground#f3f3f3
  • editorWidget.background#f9f9f9
  • editorWidget.border#ffffff
  • focusBorder#ffffff
  • foreground#3d3b4f
  • input.background#ffffff
  • input.border#b2b2b2
  • inputOption.activeBorder#3d3b4f
  • inputOption.activeForeground#3d3b4f
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#3d3b4f
  • list.focusBackground#eeeeee
  • list.focusForeground#3d3b4f
  • list.highlightForeground#3d3b4f
  • list.hoverBackground#eeeeee
  • list.hoverForeground#3d3b4f
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#3d3b4f
  • notificationCenter.border#ffffff
  • notificationCenterHeader.background#ffffff
  • notifications.background#ffffff
  • notifications.border#ffffff
  • notificationToast.border#ffffff
  • panel.border#e2e2e2
  • sideBar.background#ffffff
  • sideBar.foreground#3d3b4f
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#FFFFFF
  • statusBar.debuggingBackground#FFFFFF
  • statusBar.foreground#3d3b4f
  • statusBar.noFolderBackground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#e4e4e4
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A0A1A7italic
comment markup.link#A0A1A7
entity.name.type#CC7A00
entity.other.inherited-class#CC7A00
keyword#A626A4
keyword.control#A626A4
keyword.operator#3d3b4f
keyword.other.special-method#006699
keyword.other.unit#CC7A00
storage#A626A4
storage.type.annotation, storage.type.primitive#A626A4
storage.modifier.package, storage.modifier.import#3d3b4f
constant#CC7A00
constant.variable#CC7A00
constant.character.escape#006699
constant.numeric#CC7A00
constant.other.color#006699
constant.other.symbol#006699
variable#B366FF
variable.interpolation#B366FF
variable.parameter#3d3b4f
string#00B386
string > source, string embedded#3d3b4f
string.regexp#006699
string.regexp source.ruby.embedded#CC7A00
string.other.link#B366FF
punctuation.definition.comment#A0A1A7
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#3d3b4f
punctuation.definition.heading, punctuation.definition.identity#006699
punctuation.definition.bold#CC7A00bold
punctuation.definition.italic#A626A4italic
punctuation.section.embedded#B366FF
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#3d3b4f
support.class#CC7A00
support.type#006699
support.function#006699
support.function.any-method#006699
entity.name.function#006699
entity.name.class, entity.name.type.class#CC7A00
entity.name.section#006699
entity.name.tag#B366FF
entity.other.attribute-name#CC7A00
entity.other.attribute-name.id#006699
meta.class#CC7A00
meta.class.body#3d3b4f
meta.method-call, meta.method#3d3b4f
meta.definition.variable#B366FF
meta.link#CC7A00
meta.require#006699
meta.selector#A626A4
meta.separator#3d3b4f
meta.tag#3d3b4f
none#3d3b4f
invalid.deprecated#000000
markup.bold#CC7A00bold
markup.changed#A626A4
markup.deleted#B366FF
markup.italic#A626A4italic
markup.heading#B366FF
markup.heading punctuation.definition.heading#006699
markup.link#006699
markup.inserted#00B386
markup.quote#CC7A00
markup.raw#00B386