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#4F4D5A
  • activityBar.foreground#9F9DAA
  • activityBarBadge.background#4A4755
  • activityBarBadge.foreground#9F9DAA
  • button.background#9F9DAA
  • button.foreground#43404E
  • debugToolBar.background#43404E
  • dropdown.background#43404E
  • dropdown.foreground#9F9DAA
  • editor.background#3E3B49
  • editor.findMatchBackground#7f76a3
  • editor.findMatchHighlightBackground#7f76a360
  • editor.findMatchHighlightForeground#43404EF0
  • editor.foreground#656270
  • editor.lineHighlightBorder#D9D6E31a
  • editor.rangeHighlightBackground#7977841a
  • editor.selectionBackground#7f76a360
  • editorError.foreground#a37676
  • editorGroup.dropBackground#9F9DAA80
  • editorGroup.focusedEmptyBorder#716E7C
  • editorGroupHeader.tabsBackground#4A4755
  • editorGutter.addedBackground#7a6fad
  • editorGutter.deletedBackground#7a6fad
  • editorGutter.modifiedBackground#7a6fad
  • editorHoverWidget.background#43404E
  • editorLineNumber.activeForeground#73707E
  • editorLineNumber.foreground#9F9DAA4d
  • editorMarkerNavigation.background#43404E
  • editorWarning.foreground#a39f76
  • editorWidget.background#43404E
  • focusBorder#827F8D
  • foreground#9F9DAA
  • gitDecoration.addedResourceForeground#7a6fad
  • gitDecoration.conflictingResourceForeground#7e7f91
  • gitDecoration.deletedResourceForeground#a37676
  • gitDecoration.ignoredResourceForeground#565361
  • gitDecoration.modifiedResourceForeground#7f76a3
  • gitDecoration.stageDeletedResourceForeground#a78888
  • gitDecoration.stageModifiedResourceForeground#9e9683
  • gitDecoration.untrackedResourceForeground#7a6fad
  • input.background#43404E
  • input.foreground#9F9DAA
  • inputOption.activeBorder#43404E
  • list.activeSelectionBackground#26233133
  • list.activeSelectionForeground#9B98A6
  • list.dropBackground#43404E
  • list.focusBackground#43404E80
  • list.focusOutline#D9D6E31a
  • list.hoverBackground#2623311a
  • list.inactiveSelectionBackground#26233133
  • menu.selectionForeground#9F9DAA
  • notificationsErrorIcon.foreground#7f76a3
  • notificationsInfoIcon.foreground#7f76a3
  • notificationsWarningIcon.foreground#7f76a3
  • panel.background#43404E
  • panel.border#716E7C
  • panelTitle.activeBorder#716E7C
  • panelTitle.activeForeground#716E7C
  • panelTitle.inactiveForeground#9F9DAA70
  • peekView.border#716E7C
  • peekViewEditor.background#43404E
  • peekViewEditor.matchHighlightBackground#7a6fad
  • peekViewResult.background#43404E
  • peekViewResult.matchHighlightBackground#7a6fad
  • peekViewResult.selectionBackground#7a6fad
  • peekViewTitle.background#43404E
  • pickerGroup.border#D9D6E31a
  • progressBar.background#7a6fad
  • selection.background#7f76a360
  • sideBar.background#43404E
  • sideBar.foreground#787583
  • sideBarSectionHeader.background#4F4D5A
  • statusBar.background#43404E
  • statusBar.debuggingBackground#43404E
  • statusBar.foreground#9F9DAA
  • statusBar.noFolderBackground#43404E
  • statusBarItem.activeBackground#9F9DAA80
  • statusBarItem.hoverBackground#9F9DAA1a
  • tab.activeBackground#3E3B49
  • tab.activeBorder#7a6fad
  • tab.activeForeground#9F9DAA
  • tab.border#26233133
  • tab.inactiveBackground#43404EA0
  • tab.inactiveForeground#9F9DAA
  • terminal.border#7a6fad
  • terminal.selectionBackground#7f76a360
  • textLink.foreground#7f76a3
  • titleBar.activeBackground#43404E
  • titleBar.activeForeground#9F9DAA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#5E5B69
string#7f76a3
constant.language.false, constant.language.true#54515E
constant.numeric#9794A2
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#6F6C7A
variable.parameter#5D5A68
keyword, modifier, variable.language.this, support.type.object, constant.language#676471
entity.name.function, support.function#858390
storage.type, storage.modifier#5B5966
support.module, support.node#565461italic
support.type#827F8D
entity.name.type, entity.other.inherited-class, storage.type.java, entity.name.type.class.java, support.type.primitive#7f76a3
comment#5B5865
entity.name.type.class#858390
variable.object.property, meta.field.declaration entity.name.function#827F8D
meta.definition.method entity.name.function#9794A2
meta.function entity.name.function#9794A2
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6F6C7A
entity.name.scope-resolution, entity.name.namespace#777582
meta.embedded, source.groovy.embedded, meta.template.expression#555260
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#827F8D
constant.language.json#75727F
entity.other.attribute-name.class#858390
entity.other.attribute-name.id#858390
source.css entity.name.tag#858390
meta.tag, punctuation.definition.tag#827F8D
entity.name.tag#565461
entity.other.attribute-name#9F9DAA
markup.heading#7E7C89
text.html.markdown meta.link.inline, meta.link.reference#7E7C89
text.html.markdown beginning.punctuation.definition.list#7E7C89
markup.italic#565461italic
markup.bold#565461bold
markup.bold markup.italic, markup.italic markup.bold#565461italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#7E7C89
markup.inline.raw.string.markdown#7E7C89
keyword.other.definition.ini#7E7C89
entity.name.section.group-title.ini#7E7C89
source.cpp meta.preprocessor, keyword.control.directive#827F8D
source.cpp meta.preprocessor.pragma.cpp#9F9DAA
keyword.other.unit.user-defined.cpp#827F8D
source.cpp meta.preprocessor, entity.name.function.preprocessor.cpp#9a76a3
variable.other.property, variable.other.enummember#625F6C
storage.modifier.import.java#7f76a3
support.type.property-name.toml#9F9DAA
support.type.property-name.table.toml#605D6A
variable.source.cmake#7C7986
, storage.source.cmake#7C7986
Global settings#555260