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#ecefed
  • activityBar.border#cedcd0
  • activityBar.foreground#5ecc62
  • activityBar.inactiveForeground#8cc58f
  • activityBarBadge.background#8e4795
  • activityBarBadge.foreground#f7f7f7
  • badge.background#5ecc62
  • badge.foreground#122612
  • breadcrumb.activeSelectionForeground#122612
  • breadcrumb.focusForeground#122612
  • breadcrumb.foreground#8cc58f
  • button.background#5ecc62
  • button.foreground#122612
  • button.hoverBackground#55b858
  • button.secondaryBackground#ecefed
  • button.secondaryForeground#122612
  • descriptionForeground#8cc58f
  • dropdown.background#f9faf9
  • dropdown.border#cedcd0
  • dropdown.foreground#122612
  • editor.background#f9faf9
  • editor.findMatchBackground#1464a059
  • editor.findMatchHighlightBackground#1464a026
  • editor.foreground#122612
  • editor.inactiveSelectionBackground#5ecc621a
  • editor.lineHighlightBackground#5ecc6214
  • editor.lineHighlightBorder#5ecc6200
  • editor.selectionBackground#5ecc6233
  • editor.wordHighlightBackground#5ecc6226
  • editorBracketMatch.background#5ecc6233
  • editorBracketMatch.border#5ecc6280
  • editorCursor.foreground#5ecc62
  • editorError.foreground#bf1932
  • editorGroup.border#cedcd0
  • editorGroupHeader.tabsBackground#f2f5f3
  • editorGroupHeader.tabsBorder#cedcd0
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1226122e
  • editorIndentGuide.background#12261214
  • editorInfo.foreground#8e4795
  • editorLineNumber.activeForeground#122612
  • editorLineNumber.foreground#8cc58f
  • editorRuler.foreground#12261214
  • editorSuggestWidget.selectedBackground#5ecc6226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1226121a
  • editorWidget.background#f9faf9
  • editorWidget.border#cedcd0
  • focusBorder#5ecc6280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8cc58f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8cc58f
  • input.background#f9faf9
  • input.border#cedcd0
  • input.foreground#122612
  • input.placeholderForeground#8cc58f
  • inputOption.activeBorder#5ecc62
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8e4795
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5ecc6233
  • list.activeSelectionForeground#122612
  • list.focusBackground#5ecc6226
  • list.highlightForeground#5ecc62
  • list.hoverBackground#5ecc621a
  • list.inactiveSelectionBackground#5ecc621a
  • minimap.background#f9faf9
  • minimap.findMatchHighlight#1464a080
  • minimap.selectionHighlight#5ecc624d
  • notificationLink.foreground#5ecc62
  • notifications.background#f9faf9
  • notifications.foreground#122612
  • panel.background#f2f5f3
  • panel.border#cedcd0
  • panelTitle.activeBorder#5ecc62
  • panelTitle.activeForeground#122612
  • panelTitle.inactiveForeground#8cc58f
  • peekView.border#5ecc62
  • peekViewEditor.background#f2f5f3
  • peekViewResult.background#ecefed
  • peekViewTitle.background#f2f5f3
  • progressBar.background#5ecc62
  • scrollbar.shadow#0c190c14
  • scrollbarSlider.activeBackground#1226124d
  • scrollbarSlider.background#1226121a
  • scrollbarSlider.hoverBackground#12261233
  • selection.background#5ecc6233
  • sideBar.background#f2f5f3
  • sideBar.border#cedcd0
  • sideBar.foreground#122612
  • sideBarSectionHeader.background#5ecc621a
  • sideBarSectionHeader.foreground#122612
  • sideBarTitle.foreground#122612
  • statusBar.background#5ecc62
  • statusBar.border#cedcd0
  • statusBar.debuggingBackground#8e4795
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#122612
  • statusBar.noFolderBackground#ecefed
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#50ad53
  • statusBarItem.remoteForeground#122612
  • tab.activeBackground#f9faf9
  • tab.activeBorder#5ecc62
  • tab.activeBorderTop#5ecc6200
  • tab.activeForeground#122612
  • tab.border#cedcd0
  • tab.inactiveBackground#f2f5f3
  • tab.inactiveForeground#8cc58f
  • terminal.ansiBlack#122612
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8cc58f
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f9faf9
  • terminal.ansiYellow#d4a017
  • terminal.background#f2f5f3
  • terminal.foreground#122612
  • terminalCursor.foreground#5ecc62
  • textLink.activeForeground#7e3f84
  • textLink.foreground#8e4795
  • titleBar.activeBackground#f2f5f3
  • titleBar.activeForeground#122612
  • titleBar.border#cedcd0
  • titleBar.inactiveBackground#f2f5f3
  • titleBar.inactiveForeground#8cc58f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8cc58fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#38793abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#38793abold
storage.type, storage.modifier#38793abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#9e4fa5
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#38793a
string.regexp#9e4fa5
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#1464a0
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#4b746bbold
variable.other.constant, variable.other.enummember#4b746bbold
constant.character.escape#427943
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#007f2eitalic
entity.name.type.parameter#007f2eitalic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#122612
variable.parameter#122612italic
variable.language, variable.language.this, variable.language.self, variable.language.super#38793aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#122612
entity.name.class, entity.name.type.class, support.class#776d56bold italic
entity.other.inherited-class#776d56italic
entity.name.tag, punctuation.definition.tag#38793abold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#427943
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8cc58f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#007f2eitalic
support.type.property-name.css, support.type.vendored.property-name.css#007f2e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#776d56bold
support.constant.property-value.css, support.constant.color.css#4b746b
keyword.other.unit.css#1464a0
support.type.property-name.json#007f2e
markup.heading, markup.heading entity.name, entity.name.section.markdown#38793abold
markup.bold#4b746bbold
markup.italic#007f2eitalic
markup.inline.raw, markup.raw#9e4fa5
markup.underline.link#7f6666
markup.quote#8cc58fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050