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#3b3b3b
  • activityBar.foreground#adadad
  • activityBarBadge.background#333333
  • activityBarBadge.foreground#adadad
  • button.background#adadad
  • button.foreground#292929
  • debugToolBar.background#292929
  • dropdown.background#292929
  • dropdown.foreground#adadad
  • editor.background#222222
  • editor.findMatchBackground#7f76a3
  • editor.findMatchHighlightBackground#7f76a360
  • editor.findMatchHighlightForeground#292929F0
  • editor.foreground#5a5a5a
  • editor.lineHighlightBorder#ffffff1a
  • editor.rangeHighlightBackground#7777771a
  • editor.selectionBackground#7f76a360
  • editorError.foreground#a37676
  • editorGroup.dropBackground#adadad80
  • editorGroup.focusedEmptyBorder#6b6b6b
  • editorGroupHeader.tabsBackground#333333
  • editorGutter.addedBackground#7a6fad
  • editorGutter.deletedBackground#7a6fad
  • editorGutter.modifiedBackground#7a6fad
  • editorHoverWidget.background#292929
  • editorLineNumber.activeForeground#6e6e6e
  • editorLineNumber.foreground#adadad4d
  • editorMarkerNavigation.background#292929
  • editorWarning.foreground#a39f76
  • editorWidget.background#292929
  • focusBorder#838383
  • foreground#adadad
  • gitDecoration.addedResourceForeground#7a6fad
  • gitDecoration.conflictingResourceForeground#7e7f91
  • gitDecoration.deletedResourceForeground#a37676
  • gitDecoration.ignoredResourceForeground#444444
  • gitDecoration.modifiedResourceForeground#7f76a3
  • gitDecoration.stageDeletedResourceForeground#a78888
  • gitDecoration.stageModifiedResourceForeground#9e9683
  • gitDecoration.untrackedResourceForeground#7a6fad
  • input.background#292929
  • input.foreground#adadad
  • inputOption.activeBorder#292929
  • list.activeSelectionBackground#00000033
  • list.activeSelectionForeground#a7a7a7
  • list.dropBackground#292929
  • list.focusBackground#29292980
  • list.focusOutline#ffffff1a
  • list.hoverBackground#0000001a
  • list.inactiveSelectionBackground#00000033
  • menu.selectionForeground#adadad
  • notificationsErrorIcon.foreground#7f76a3
  • notificationsInfoIcon.foreground#7f76a3
  • notificationsWarningIcon.foreground#7f76a3
  • panel.background#292929
  • panel.border#6b6b6b
  • panelTitle.activeBorder#6b6b6b
  • panelTitle.activeForeground#6b6b6b
  • panelTitle.inactiveForeground#adadad70
  • peekView.border#6b6b6b
  • peekViewEditor.background#292929
  • peekViewEditor.matchHighlightBackground#7a6fad
  • peekViewResult.background#292929
  • peekViewResult.matchHighlightBackground#7a6fad
  • peekViewResult.selectionBackground#7a6fad
  • peekViewTitle.background#292929
  • pickerGroup.border#ffffff1a
  • progressBar.background#7a6fad
  • selection.background#7f76a360
  • sideBar.background#292929
  • sideBar.foreground#757575
  • sideBarSectionHeader.background#3b3b3b
  • statusBar.background#292929
  • statusBar.debuggingBackground#292929
  • statusBar.foreground#adadad
  • statusBar.noFolderBackground#292929
  • statusBarItem.activeBackground#adadad80
  • statusBarItem.hoverBackground#adadad1a
  • tab.activeBackground#222222
  • tab.activeBorder#7a6fad
  • tab.activeForeground#adadad
  • tab.border#00000033
  • tab.inactiveBackground#292929A0
  • tab.inactiveForeground#adadad
  • terminal.border#7a6fad
  • terminal.selectionBackground#7f76a360
  • textLink.foreground#7f76a3
  • titleBar.activeBackground#292929
  • titleBar.activeForeground#adadad

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#505050
string#7f76a3
constant.language.false, constant.language.true#414141
constant.numeric#a1a1a1
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#686868
variable.parameter#4e4e4e
keyword, modifier, variable.language.this, support.type.object, constant.language#5c5c5c
entity.name.function, support.function#888888
storage.type, storage.modifier#4c4c4c
support.module, support.node#454545italic
support.type#838383
entity.name.type, entity.other.inherited-class, storage.type.java, entity.name.type.class.java, support.type.primitive#7f76a3
comment#4b4b4b
entity.name.type.class#888888
variable.object.property, meta.field.declaration entity.name.function#838383
meta.definition.method entity.name.function#a1a1a1
meta.function entity.name.function#a1a1a1
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#686868
entity.name.scope-resolution, entity.name.namespace#747474
meta.embedded, source.groovy.embedded, meta.template.expression#434343
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#838383
constant.language.json#707070
entity.other.attribute-name.class#888888
entity.other.attribute-name.id#888888
source.css entity.name.tag#888888
meta.tag, punctuation.definition.tag#838383
entity.name.tag#454545
entity.other.attribute-name#adadad
markup.heading#7e7e7e
text.html.markdown meta.link.inline, meta.link.reference#7e7e7e
text.html.markdown beginning.punctuation.definition.list#7e7e7e
markup.italic#454545italic
markup.bold#454545bold
markup.bold markup.italic, markup.italic markup.bold#454545italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#7e7e7e
markup.inline.raw.string.markdown#7e7e7e
keyword.other.definition.ini#7e7e7e
entity.name.section.group-title.ini#7e7e7e
source.cpp meta.preprocessor, keyword.control.directive#838383
source.cpp meta.preprocessor.pragma.cpp#adadad
keyword.other.unit.user-defined.cpp#838383
source.cpp meta.preprocessor, entity.name.function.preprocessor.cpp#9a76a3
variable.other.property, variable.other.enummember#555555
storage.modifier.import.java#7f76a3
support.type.property-name.toml#adadad
support.type.property-name.table.toml#525252
variable.source.cmake#7a7a7a
, storage.source.cmake#7a7a7a
Global settings#434343