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#f8f5f2
  • activityBar.border#ebe1da
  • activityBar.foreground#a47864
  • activityBar.inactiveForeground#c7ab9a
  • activityBarBadge.background#6fb0cb
  • activityBarBadge.foreground#fcfbfa
  • badge.background#a47864
  • badge.foreground#19120f
  • breadcrumb.activeSelectionForeground#19120f
  • breadcrumb.focusForeground#19120f
  • breadcrumb.foreground#c7ab9a
  • button.background#a47864
  • button.foreground#19120f
  • button.hoverBackground#946c5a
  • button.secondaryBackground#f8f5f2
  • button.secondaryForeground#19120f
  • descriptionForeground#c7ab9a
  • dropdown.background#fdfcfb
  • dropdown.border#ebe1da
  • dropdown.foreground#19120f
  • editor.background#fdfcfb
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#19120f
  • editor.inactiveSelectionBackground#a478641a
  • editor.lineHighlightBackground#a4786414
  • editor.lineHighlightBorder#a4786400
  • editor.selectionBackground#a4786433
  • editor.wordHighlightBackground#a4786426
  • editorBracketMatch.background#a4786433
  • editorBracketMatch.border#a4786480
  • editorCursor.foreground#a47864
  • editorError.foreground#bf1932
  • editorGroup.border#ebe1da
  • editorGroupHeader.tabsBackground#faf8f6
  • editorGroupHeader.tabsBorder#ebe1da
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#19120f2e
  • editorIndentGuide.background#19120f14
  • editorInfo.foreground#6fb0cb
  • editorLineNumber.activeForeground#19120f
  • editorLineNumber.foreground#c7ab9a
  • editorRuler.foreground#19120f14
  • editorSuggestWidget.selectedBackground#a4786426
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#19120f1a
  • editorWidget.background#fdfcfb
  • editorWidget.border#ebe1da
  • focusBorder#a4786480
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#c7ab9a
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#c7ab9a
  • input.background#fdfcfb
  • input.border#ebe1da
  • input.foreground#19120f
  • input.placeholderForeground#c7ab9a
  • inputOption.activeBorder#a47864
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#6fb0cb
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#a4786433
  • list.activeSelectionForeground#19120f
  • list.focusBackground#a4786426
  • list.highlightForeground#a47864
  • list.hoverBackground#a478641a
  • list.inactiveSelectionBackground#a478641a
  • minimap.background#fdfcfb
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#a478644d
  • notificationLink.foreground#a47864
  • notifications.background#fdfcfb
  • notifications.foreground#19120f
  • panel.background#faf8f6
  • panel.border#ebe1da
  • panelTitle.activeBorder#a47864
  • panelTitle.activeForeground#19120f
  • panelTitle.inactiveForeground#c7ab9a
  • peekView.border#a47864
  • peekViewEditor.background#faf8f6
  • peekViewResult.background#f8f5f2
  • peekViewTitle.background#faf8f6
  • progressBar.background#a47864
  • scrollbar.shadow#100c0a14
  • scrollbarSlider.activeBackground#19120f4d
  • scrollbarSlider.background#19120f1a
  • scrollbarSlider.hoverBackground#19120f33
  • selection.background#a4786433
  • sideBar.background#faf8f6
  • sideBar.border#ebe1da
  • sideBar.foreground#19120f
  • sideBarSectionHeader.background#a478641a
  • sideBarSectionHeader.foreground#19120f
  • sideBarTitle.foreground#19120f
  • statusBar.background#a47864
  • statusBar.border#ebe1da
  • statusBar.debuggingBackground#6fb0cb
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#19120f
  • statusBar.noFolderBackground#f8f5f2
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#8b6655
  • statusBarItem.remoteForeground#19120f
  • tab.activeBackground#fdfcfb
  • tab.activeBorder#a47864
  • tab.activeBorderTop#a4786400
  • tab.activeForeground#19120f
  • tab.border#ebe1da
  • tab.inactiveBackground#faf8f6
  • tab.inactiveForeground#c7ab9a
  • terminal.ansiBlack#19120f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#c7ab9a
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfcfb
  • terminal.ansiYellow#d4a017
  • terminal.background#faf8f6
  • terminal.foreground#19120f
  • terminalCursor.foreground#a47864
  • textLink.activeForeground#629db5
  • textLink.foreground#6fb0cb
  • titleBar.activeBackground#faf8f6
  • titleBar.activeForeground#19120f
  • titleBar.border#ebe1da
  • titleBar.inactiveBackground#faf8f6
  • titleBar.inactiveForeground#c7ab9a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#c7ab9aitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8b6555bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8b6555bold
storage.type, storage.modifier#8b6555bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4b7889
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#8b6555
string.regexp#4b7889
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#428328
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#d4145abold
variable.other.constant, variable.other.enummember#d4145abold
constant.character.escape#8b6d60
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#d33831italic
entity.name.type.parameter#d33831italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#19120f
variable.parameter#19120fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#8b6555italic
variable.other.property, variable.other.object.property, meta.object-literal.key#19120f
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#8b6555bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8b6d60
punctuation, punctuation.separator, punctuation.terminator, meta.brace#c7ab9a
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#d33831italic
support.type.property-name.css, support.type.vendored.property-name.css#d33831
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#d4145a
keyword.other.unit.css#428328
support.type.property-name.json#d33831
markup.heading, markup.heading entity.name, entity.name.section.markdown#8b6555bold
markup.bold#d4145abold
markup.italic#d33831italic
markup.inline.raw, markup.raw#4b7889
markup.underline.link#786d74
markup.quote#c7ab9aitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050