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#002220
  • activityBar.border#003834
  • activityBar.foreground#00a499
  • activityBar.inactiveForeground#6ca09c
  • activityBarBadge.background#7c2029
  • activityBarBadge.foreground#f7f7f7
  • badge.background#00a499
  • badge.foreground#001917
  • breadcrumb.activeSelectionForeground#d8e4e3
  • breadcrumb.focusForeground#d8e4e3
  • breadcrumb.foreground#6ca09c
  • button.background#00a499
  • button.foreground#001917
  • button.hoverBackground#1aada3
  • button.secondaryBackground#002b28
  • button.secondaryForeground#d8e4e3
  • descriptionForeground#6ca09c
  • dropdown.background#002220
  • dropdown.border#003834
  • dropdown.foreground#d8e4e3
  • editor.background#001a18
  • editor.findMatchBackground#78be2066
  • editor.findMatchHighlightBackground#78be2033
  • editor.foreground#d8e4e3
  • editor.inactiveSelectionBackground#00a49926
  • editor.lineHighlightBackground#00a4991a
  • editor.lineHighlightBorder#00a49900
  • editor.selectionBackground#00a4994d
  • editor.wordHighlightBackground#00a49933
  • editorBracketMatch.background#00a49940
  • editorBracketMatch.border#00a49999
  • editorCursor.foreground#00a499
  • editorError.foreground#dd4132
  • editorGroup.border#003834
  • editorGroupHeader.tabsBackground#002220
  • editorGroupHeader.tabsBorder#003834
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d8e4e333
  • editorIndentGuide.background#d8e4e314
  • editorInfo.foreground#7c2029
  • editorLineNumber.activeForeground#d8e4e3
  • editorLineNumber.foreground#6ca09c
  • editorRuler.foreground#d8e4e314
  • editorSuggestWidget.selectedBackground#00a49940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d8e4e31a
  • editorWidget.background#002220
  • editorWidget.border#003834
  • focusBorder#00a49999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6ca09c
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6ca09c
  • input.background#002220
  • input.border#003834
  • input.foreground#d8e4e3
  • input.placeholderForeground#6ca09c
  • inputOption.activeBorder#00a499
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#7c2029
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#00a4994d
  • list.activeSelectionForeground#d8e4e3
  • list.focusBackground#00a49933
  • list.highlightForeground#00a499
  • list.hoverBackground#00a49926
  • list.inactiveSelectionBackground#00a49926
  • minimap.background#001a18
  • minimap.findMatchHighlight#78be2099
  • minimap.selectionHighlight#00a49966
  • notificationLink.foreground#00a499
  • notifications.background#002b28
  • notifications.foreground#d8e4e3
  • panel.background#002220
  • panel.border#003834
  • panelTitle.activeBorder#00a499
  • panelTitle.activeForeground#d8e4e3
  • panelTitle.inactiveForeground#6ca09c
  • peekView.border#00a499
  • peekViewEditor.background#002220
  • peekViewResult.background#002b28
  • peekViewTitle.background#002220
  • progressBar.background#00a499
  • scrollbar.shadow#00100f45
  • scrollbarSlider.activeBackground#d8e4e359
  • scrollbarSlider.background#d8e4e31f
  • scrollbarSlider.hoverBackground#d8e4e340
  • selection.background#00a4994d
  • sideBar.background#002b28
  • sideBar.border#003834
  • sideBar.foreground#d8e4e3
  • sideBarSectionHeader.background#00a49926
  • sideBarSectionHeader.foreground#d8e4e3
  • sideBarTitle.foreground#d8e4e3
  • statusBar.background#00625c
  • statusBar.border#003834
  • statusBar.debuggingBackground#7c2029
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#66c8c2
  • statusBar.noFolderBackground#002220
  • statusBarItem.hoverBackground#00a4994d
  • statusBarItem.remoteBackground#00a499
  • statusBarItem.remoteForeground#001917
  • tab.activeBackground#001a18
  • tab.activeBorder#00a499
  • tab.activeBorderTop#00a49900
  • tab.activeForeground#d8e4e3
  • tab.border#003834
  • tab.inactiveBackground#002220
  • tab.inactiveForeground#6ca09c
  • terminal.ansiBlack#001a18
  • terminal.ansiBlue#08788d
  • terminal.ansiBrightBlack#6ca09c
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d8e4e3
  • terminal.ansiYellow#efc050
  • terminal.background#002220
  • terminal.foreground#d8e4e3
  • terminalCursor.foreground#00a499
  • textLink.activeForeground#904149
  • textLink.foreground#7c2029
  • titleBar.activeBackground#002220
  • titleBar.activeForeground#d8e4e3
  • titleBar.border#003834
  • titleBar.inactiveBackground#002220
  • titleBar.inactiveForeground#6ca09c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6ca09citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#00a499bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#00a499bold
storage.type, storage.modifier#00a499bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b0787c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#00a499
string.regexp#b0787c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#78be20
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#4d88e1bold
variable.other.constant, variable.other.enummember#4d88e1bold
constant.character.escape#26b2a8
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#00b4e1italic
entity.name.type.parameter#00b4e1italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#d8e4e3
variable.parameter#d8e4e3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#00a499italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d8e4e3
entity.name.class, entity.name.type.class, support.class#8d7dacbold italic
entity.other.inherited-class#8d7dacitalic
entity.name.tag, punctuation.definition.tag#00a499bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#26b2a8
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6ca09c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#00b4e1italic
support.type.property-name.css, support.type.vendored.property-name.css#00b4e1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8d7dacbold
support.constant.property-value.css, support.constant.color.css#4d88e1
keyword.other.unit.css#78be20
support.type.property-name.json#00b4e1
markup.heading, markup.heading entity.name, entity.name.section.markdown#00a499bold
markup.bold#4d88e1bold
markup.italic#00b4e1italic
markup.inline.raw, markup.raw#b0787c
markup.underline.link#e8d4e2
markup.quote#6ca09citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050