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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#0078d4
  • activityBar.background#182433
  • activityBar.border#1F2F41
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#182433
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1B293A
  • editor.background#1B293A
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41fa
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#182433
  • editorGroupHeader.tabsBorder#1F2F41
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#1B293A
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1B293A
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1B293A
  • notifications.border#1F2F41
  • notifications.foreground#cccccc
  • panel.background#182433
  • panel.border#1F2F41
  • panelInput.border#1F2F41
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#1B293A
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1B293A
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#182433
  • sideBar.border#1F2F41
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#182433
  • sideBarSectionHeader.border#1F2F41
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#182433
  • statusBar.border#1F2F41
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#1B293A
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1B293A
  • tab.activeBorder#1B293A
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#1F2F41
  • tab.hoverBackground#1B293A
  • tab.inactiveBackground#182433
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1B293A
  • tab.unfocusedActiveBorderTop#1F2F41
  • tab.unfocusedHoverBackground#1B293A
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#182433
  • titleBar.activeForeground#cccccc
  • titleBar.border#1F2F41
  • titleBar.inactiveBackground#1B293A
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#C3E88DCF
punctuation, constant.other.symbol#89DDFFCF
constant.character.escape, text.html constant.character.entity.named#BABED8CF
constant.language.boolean#FF9CACCF
constant.numeric#F78C6CCF
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#BABED8CF
keyword.other#F78C6CCF
keyword, modifier, variable.language.this, support.type.object, constant.language#89DDFFCF
entity.name.function, support.function#82AAFFCF
storage.type, storage.modifier, storage.control#C792EACFitalic
support.module, support.node#F07178CFitalic
support.type, constant.other.key#FFCB6BCF
entity.name.type, entity.other.inherited-class, entity.other#FFCB6BCF
comment#88846Fitalic
comment punctuation.definition.comment, string.quoted.docstring#88846Fitalic
punctuation#89DDFFCF
entity.name, entity.name.type.class, support.type, support.class, meta.use#FFCB6BCF
variable.object.property, meta.field.declaration entity.name.function#F07178CF
meta.definition.method entity.name.function#F07178CF
meta.function entity.name.function#82AAFFCF
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#89DDFFCF
meta.embedded, source.groovy.embedded, meta.template.expression#BABED8CF
entity.name.tag.yaml#F07178CF
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#F07178CF
constant.language.json#89DDFFCF
entity.other.attribute-name.class#FFCB6BCF
entity.other.attribute-name.id#F78C6CCF
source.css entity.name.tag#FFCB6BCF
support.type.property-name.css#B2CCD6
meta.tag, punctuation.definition.tag#89DDFFCF
entity.name.tag#F07178CF
entity.other.attribute-name#C792EACF
punctuation.definition.entity.html#BABED8CF
markup.heading#89DDFFCF
text.html.markdown meta.link.inline, meta.link.reference#F07178CF
text.html.markdown beginning.punctuation.definition.list#89DDFFCF
markup.italic#F07178CFitalic
markup.bold#F07178CFbold
markup.bold markup.italic, markup.italic markup.bold#F07178CFitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#C3E88DCF
markup.inline.raw.string.markdown#C3E88DCF
keyword.other.definition.ini#F07178CF
entity.name.section.group-title.ini#89DDFFCF
source.cs meta.class.identifier storage.type#FFCB6BCF
source.cs meta.method.identifier entity.name.function#F07178CF
source.cs meta.method-call meta.method, source.cs entity.name.function#82AAFFCF
source.cs storage.type#FFCB6BCF
source.cs meta.method.return-type#FFCB6BCF
source.cs meta.preprocessor#464B5D
source.cs entity.name.type.namespace#BABED8CF
meta.jsx.children, SXNested#BABED8CF
support.class.component#FFCB6BCF
source.cpp meta.block variable.other#BABED8CF
source.python meta.member.access.python#F07178CF
source.python meta.function-call.python, meta.function-call.arguments#82AAFFCF
meta.block#F07178CF
entity.name.function.call#82AAFFCF
source.php support.other.namespace, source.php meta.use support.class#BABED8CF
constant.keyword#89DDFFCFitalic
entity.name.function#82AAFFCF
constant.other.placeholder#F07178CF
markup.deleted#F07178CF
markup.inserted#C3E88DCF
markup.underlineunderline
keyword.control#89DDFFCFitalic
variable.parameteritalic
variable.parameter.function.language.special.self.python#F07178CFitalic
constant.character.format.placeholder.other.python#F78C6CCF
markup.quote#89DDFFCFitalic
markup.fenced_code.block#BABED890
punctuation.definition.quote#FF9CACCF
meta.structure.dictionary.json support.type.property-name.json#C792EACF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6BCF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6CCF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F07178CF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#916B53CF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFFCF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF9CACCF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EACF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88DCF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6