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#737993
  • activityBar.dropBackground#8c435180
  • activityBarBadge.background#8c4351
  • activityBarBadge.foreground#ffffff
  • badge.background#8c4351
  • badge.foreground#ffffff
  • button.background#8c4351
  • button.foreground#ffffff
  • debugToolBar.background#737993
  • dropdown.background#4c5062
  • editor.background#c0caf5
  • editor.foreground#1a1b26
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#8c435180
  • editorGroup.focusedEmptyBorder#8c4351
  • editorGroupHeader.tabsBackground#99a1c4
  • editorHoverWidget.background#99a1c4
  • editorLineNumber.activeForeground#8c4351
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#99a1c4
  • editorWidget.background#99a1c4
  • focusBorder#8c4351
  • foreground#1a1b26
  • input.background#4c5062
  • inputOption.activeBorder#8c4351
  • list.activeSelectionBackground#8c435180
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#8c435180
  • list.focusBackground#8c435180
  • list.focusForeground#FFFFFF
  • list.highlightForeground#8c4351
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • notebook.focusedCellBorder#8c4351
  • notebook.inactiveFocusedCellBorder#8c435180
  • panel.background#99a1c4
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#1a1b2680
  • panelTitle.inactiveForeground#1a1b2680
  • peekView.border#8c4351
  • peekViewEditor.background#e6f2ff
  • peekViewResult.background#99a1c4
  • peekViewTitle.background#c0caf5
  • pickerGroup.border#FFFFFF1a
  • selection.background#8c4351
  • sideBar.background#99a1c4
  • sideBarSectionHeader.background#737993
  • statusBar.background#e6f2ff
  • statusBar.debuggingBackground#8c4351
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#e6f2ff
  • statusBarItem.activeBackground#8c435180
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#8c4351
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#8c4351
  • tab.activeModifiedBorder#8c4351
  • tab.border#00000033
  • tab.inactiveBackground#737993
  • tab.inactiveModifiedBorder#542830
  • tab.unfocusedActiveModifiedBorder#703540
  • tab.unfocusedInactiveModifiedBorder#542830
  • titleBar.activeBackground#e6f2ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#1a1b26
string#485e30
punctuation, constant.other.symbol#8c4351
constant.character.escape, text.html constant.character.entity.named#242f18
constant.language.boolean#8c4351
constant.numeric#34548a
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#8c4351
keyword, modifier, variable.language.this, support.type.object, constant.language#8c4351
entity.name.function, support.function#34548a
storage.type, storage.modifier, storage.control#8c4351
support.module, support.node#462128italic
support.type, constant.other.key#8f5e15
entity.name.type, entity.other.inherited-class, entity.other#8f5e15
comment#-c0-ca-f5italic
comment punctuation.definition.comment, string.quoted.docstring#-c0-ca-f5italic
punctuation#8c4351
entity.name, entity.name.type.class, support.type, support.class, meta.use#8f5e15
variable.object.property, meta.field.declaration entity.name.function#8f5e15
meta.definition.method entity.name.function#8f5e15
meta.function entity.name.function#8f5e15
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8c4351
meta.embedded, source.groovy.embedded, meta.template.expression#1a1b26
entity.name.tag.yaml#462128
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#462128
constant.language.json#8c4351
entity.other.attribute-name.class#8c4351
entity.other.attribute-name.id#485e30
source.css entity.name.tag#8f5e15
support.type.property-name.css#34548a
meta.tag, punctuation.definition.tag#8c4351
entity.name.tag#462128
entity.other.attribute-name#8c4351
punctuation.definition.entity.html#242f18
markup.heading#8c4351
text.html.markdown meta.link.inline, meta.link.reference#462128
text.html.markdown beginning.punctuation.definition.list#8c4351
markup.italic#462128italic
markup.bold#462128bold
markup.bold markup.italic, markup.italic markup.bold#462128italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#485e30
markup.inline.raw.string.markdown#485e30
keyword.other.definition.ini#462128
entity.name.section.group-title.ini#8c4351
source.cs meta.class.identifier storage.type#8f5e15
source.cs meta.method.identifier entity.name.function#8f5e15
source.cs meta.method-call meta.method, source.cs entity.name.function#34548a
source.cs storage.type#8f5e15
source.cs meta.method.return-type#8f5e15
source.cs meta.preprocessor#-c0-ca-f5
source.cs entity.name.type.namespace#1a1b26
meta.jsx.children, SXNested#1a1b26
support.class.component#8f5e15
source.cpp meta.block variable.other#1a1b26
source.python meta.member.access.python#462128
source.python meta.function-call.python, meta.function-call.arguments#34548a
meta.block#462128
entity.name.function.call#8f5e15
source.php support.other.namespace, source.php meta.use support.class#1a1b26
constant.keyword#8c4351italic
entity.name.function#8f5e15
Global settings#1a1b26