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#000000
  • activityBar.dropBackground#6f2a3a80
  • activityBarBadge.background#6f2a3a
  • activityBarBadge.foreground#ffffff
  • badge.background#6f2a3a
  • badge.foreground#ffffff
  • button.background#6f2a3a
  • button.foreground#ffffff
  • debugToolBar.background#000000
  • dropdown.background#000000
  • editor.background#000000
  • editor.foreground#44445a
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#44445a3a
  • editor.wordHighlightBackground#45459922
  • editor.wordHighlightStrongBackground#4545992a
  • editorCursor.foreground#44445a
  • editorGroup.dropBackground#6f2a3a80
  • editorGroup.focusedEmptyBorder#6f2a3a
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorIndentGuide.background#44445a55
  • editorLineNumber.activeForeground#6f2a3a
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#000000
  • editorWidget.background#000000
  • focusBorder#6f2a3a
  • foreground#44445a
  • input.background#000000
  • inputOption.activeBorder#6f2a3a
  • list.activeSelectionBackground#6f2a3a80
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#6f2a3a80
  • list.focusBackground#6f2a3a80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#6f2a3a
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#000000
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#44445a80
  • panelTitle.inactiveForeground#44445a80
  • peekView.border#6f2a3a
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#FFFFFF1a
  • selection.background#6f2a3a
  • sideBar.background#000000
  • sideBarSectionHeader.background#000000
  • statusBar.background#000000
  • statusBar.debuggingBackground#6f2a3a
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#6f2a3a80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#6f2a3a
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#6f2a3a
  • tab.activeModifiedBorder#6f2a3a
  • tab.border#00000033
  • tab.inactiveBackground#000000
  • tab.inactiveModifiedBorder#421922
  • tab.unfocusedActiveModifiedBorder#58212e
  • tab.unfocusedInactiveModifiedBorder#421922
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#44445a
string#45653a
punctuation, constant.other.symbol#707030
constant.character.escape, text.html constant.character.entity.named#679757
constant.language.boolean#772310
constant.numeric#909030
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#44445a
keyword, modifier, variable.language.this, support.type.object, constant.language#6f2a3a
entity.name.function, support.function#454599
storage.type, storage.modifier, storage.control#563390
support.module, support.node#44445aitalic
support.type, constant.other.key#7a337a
entity.name.type, entity.other.inherited-class, entity.other#7a337a
comment#444444italic
comment punctuation.definition.comment, string.quoted.docstring#444444italic
punctuation#707030
entity.name, entity.name.type.class, support.type, support.class, meta.use#454599
variable.object.property, meta.field.declaration entity.name.function#8a4022
meta.definition.method entity.name.function#8a4022
meta.function entity.name.function#8a4022
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6f2a3a
meta.embedded, source.groovy.embedded, meta.template.expression#44445a
entity.name.tag.yaml#44445a
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#44445a
constant.language.json#6f2a3a
entity.other.attribute-name.class#8a4022
entity.other.attribute-name.id#7a337a
source.css entity.name.tag#8a4022
support.type.property-name.css#454599
meta.tag, punctuation.definition.tag#6f2a3a
entity.name.tag#44445a
entity.other.attribute-name#563390
punctuation.definition.entity.html#679757
markup.heading#6f2a3a
text.html.markdown meta.link.inline, meta.link.reference#44445a
text.html.markdown beginning.punctuation.definition.list#6f2a3a
markup.italic#44445aitalic
markup.bold#44445abold
markup.bold markup.italic, markup.italic markup.bold#44445aitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#45653a
markup.inline.raw.string.markdown#45653a
keyword.other.definition.ini#44445a
entity.name.section.group-title.ini#6f2a3a
source.cs meta.class.identifier storage.type#454599
source.cs meta.method.identifier entity.name.function#8a4022
source.cs meta.method-call meta.method, source.cs entity.name.function#454599
source.cs storage.type#7a337a
source.cs meta.method.return-type#7a337a
source.cs meta.preprocessor#444444
source.cs entity.name.type.namespace#44445a
meta.jsx.children, SXNested#44445a
support.class.component#8a4022
source.cpp meta.block variable.other#44445a
source.python meta.member.access.python#44445a
source.python meta.function-call.python, meta.function-call.arguments#454599
meta.block#44445a
entity.name.function.call#8a4022
source.php support.other.namespace, source.php meta.use support.class#44445a
constant.keyword#6f2a3aitalic
entity.name.function#8a4022
Global settings#44445a
commentitalic
keyword.control, keyword.other, keyword.operator.new, entity.other.attribute-nameitalic
constant.language, variable.language.this, support.constant#458a8aitalic
support.class.component, support.variable#7a337a
support.variable.property#7a337aitalic
entity.name.tag, punctuation.definition.tag#454599