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#4D535A
  • activityBar.foreground#9DA3AA
  • activityBarBadge.background#474D55
  • activityBarBadge.foreground#9DA3AA
  • button.background#9DA3AA
  • button.foreground#40464E
  • debugToolBar.background#40464E
  • dropdown.background#40464E
  • dropdown.foreground#9DA3AA
  • editor.background#3B4149
  • editor.findMatchBackground#768aa3
  • editor.findMatchHighlightBackground#768aa360
  • editor.findMatchHighlightForeground#40464EF0
  • editor.foreground#626870
  • editor.lineHighlightBorder#D6DCE31a
  • editor.rangeHighlightBackground#777D841a
  • editor.selectionBackground#768aa360
  • editorError.foreground#a37676
  • editorGroup.dropBackground#9DA3AA80
  • editorGroup.focusedEmptyBorder#6E747C
  • editorGroupHeader.tabsBackground#474D55
  • editorGutter.addedBackground#6282ac
  • editorGutter.deletedBackground#6282ac
  • editorGutter.modifiedBackground#6282ac
  • editorHoverWidget.background#40464E
  • editorLineNumber.activeForeground#70767E
  • editorLineNumber.foreground#9DA3AA4d
  • editorMarkerNavigation.background#40464E
  • editorWarning.foreground#a39f76
  • editorWidget.background#40464E
  • focusBorder#7F858D
  • foreground#9DA3AA
  • gitDecoration.addedResourceForeground#6282ac
  • gitDecoration.conflictingResourceForeground#7e7f91
  • gitDecoration.deletedResourceForeground#a37676
  • gitDecoration.ignoredResourceForeground#535961
  • gitDecoration.modifiedResourceForeground#768aa3
  • gitDecoration.stageDeletedResourceForeground#a78888
  • gitDecoration.stageModifiedResourceForeground#9e9683
  • gitDecoration.untrackedResourceForeground#6282ac
  • input.background#40464E
  • input.foreground#9DA3AA
  • inputOption.activeBorder#40464E
  • list.activeSelectionBackground#23293133
  • list.activeSelectionForeground#989EA6
  • list.dropBackground#40464E
  • list.focusBackground#40464E80
  • list.focusOutline#D6DCE31a
  • list.hoverBackground#2329311a
  • list.inactiveSelectionBackground#23293133
  • menu.selectionForeground#9DA3AA
  • notificationsErrorIcon.foreground#768aa3
  • notificationsInfoIcon.foreground#768aa3
  • notificationsWarningIcon.foreground#768aa3
  • panel.background#40464E
  • panel.border#6E747C
  • panelTitle.activeBorder#6E747C
  • panelTitle.activeForeground#6E747C
  • panelTitle.inactiveForeground#9DA3AA70
  • peekView.border#6E747C
  • peekViewEditor.background#40464E
  • peekViewEditor.matchHighlightBackground#6282ac
  • peekViewResult.background#40464E
  • peekViewResult.matchHighlightBackground#6282ac
  • peekViewResult.selectionBackground#6282ac
  • peekViewTitle.background#40464E
  • pickerGroup.border#D6DCE31a
  • progressBar.background#6282ac
  • selection.background#768aa360
  • sideBar.background#40464E
  • sideBar.foreground#757B83
  • sideBarSectionHeader.background#4D535A
  • statusBar.background#40464E
  • statusBar.debuggingBackground#40464E
  • statusBar.foreground#9DA3AA
  • statusBar.noFolderBackground#40464E
  • statusBarItem.activeBackground#9DA3AA80
  • statusBarItem.hoverBackground#9DA3AA1a
  • tab.activeBackground#3B4149
  • tab.activeBorder#6282ac
  • tab.activeForeground#9DA3AA
  • tab.border#23293133
  • tab.inactiveBackground#40464EA0
  • tab.inactiveForeground#9DA3AA
  • terminal.border#6282ac
  • terminal.selectionBackground#768aa360
  • textLink.foreground#768aa3
  • titleBar.activeBackground#40464E
  • titleBar.activeForeground#9DA3AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#5B6169
string#768aa3
constant.language.false, constant.language.true#51575E
constant.numeric#949AA2
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#6C727A
variable.parameter#5A6068
keyword, modifier, variable.language.this, support.type.object, constant.language#646A71
entity.name.function, support.function#838990
storage.type, storage.modifier#595F66
support.module, support.node#545A61italic
support.type#7F858D
entity.name.type, entity.other.inherited-class, storage.type.java, entity.name.type.class.java, support.type.primitive#768aa3
comment#585E65
entity.name.type.class#838990
variable.object.property, meta.field.declaration entity.name.function#7F858D
meta.definition.method entity.name.function#949AA2
meta.function entity.name.function#949AA2
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6C727A
entity.name.scope-resolution, entity.name.namespace#757B82
meta.embedded, source.groovy.embedded, meta.template.expression#525860
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#7F858D
constant.language.json#72787F
entity.other.attribute-name.class#838990
entity.other.attribute-name.id#838990
source.css entity.name.tag#838990
meta.tag, punctuation.definition.tag#7F858D
entity.name.tag#545A61
entity.other.attribute-name#9DA3AA
markup.heading#7C8289
text.html.markdown meta.link.inline, meta.link.reference#7C8289
text.html.markdown beginning.punctuation.definition.list#7C8289
markup.italic#545A61italic
markup.bold#545A61bold
markup.bold markup.italic, markup.italic markup.bold#545A61italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#7C8289
markup.inline.raw.string.markdown#7C8289
keyword.other.definition.ini#7C8289
entity.name.section.group-title.ini#7C8289
source.cpp meta.preprocessor, keyword.control.directive#7F858D
source.cpp meta.preprocessor.pragma.cpp#9DA3AA
keyword.other.unit.user-defined.cpp#7F858D
source.cpp meta.preprocessor, entity.name.function.preprocessor.cpp#769ea3
variable.other.property, variable.other.enummember#5F656C
storage.modifier.import.java#768aa3
support.type.property-name.toml#9DA3AA
support.type.property-name.table.toml#5D636A
variable.source.cmake#797F86
, storage.source.cmake#797F86
Global settings#525860