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#f7f3f0
  • activityBar.border#e4dbd3
  • activityBar.foreground#5c3317
  • activityBar.inactiveForeground#aa8f7b
  • activityBarBadge.background#125a90
  • activityBarBadge.foreground#fcfbfa
  • badge.background#5c3317
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#140b05
  • breadcrumb.focusForeground#140b05
  • breadcrumb.foreground#aa8f7b
  • button.background#5c3317
  • button.foreground#fcfbfa
  • button.hoverBackground#532e15
  • button.secondaryBackground#f7f3f0
  • button.secondaryForeground#140b05
  • descriptionForeground#aa8f7b
  • dropdown.background#fcfbfa
  • dropdown.border#e4dbd3
  • dropdown.foreground#140b05
  • editor.background#fcfbfa
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#140b05
  • editor.inactiveSelectionBackground#5c33171a
  • editor.lineHighlightBackground#5c331714
  • editor.lineHighlightBorder#5c331700
  • editor.selectionBackground#5c331733
  • editor.wordHighlightBackground#5c331726
  • editorBracketMatch.background#5c331733
  • editorBracketMatch.border#5c331780
  • editorCursor.foreground#5c3317
  • editorError.foreground#bf1932
  • editorGroup.border#e4dbd3
  • editorGroupHeader.tabsBackground#f9f7f5
  • editorGroupHeader.tabsBorder#e4dbd3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#140b052e
  • editorIndentGuide.background#140b0514
  • editorInfo.foreground#125a90
  • editorLineNumber.activeForeground#140b05
  • editorLineNumber.foreground#aa8f7b
  • editorRuler.foreground#140b0514
  • editorSuggestWidget.selectedBackground#5c331726
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#140b051a
  • editorWidget.background#fcfbfa
  • editorWidget.border#e4dbd3
  • focusBorder#5c331780
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#aa8f7b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#aa8f7b
  • input.background#fcfbfa
  • input.border#e4dbd3
  • input.foreground#140b05
  • input.placeholderForeground#aa8f7b
  • inputOption.activeBorder#5c3317
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#125a90
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5c331733
  • list.activeSelectionForeground#140b05
  • list.focusBackground#5c331726
  • list.highlightForeground#5c3317
  • list.hoverBackground#5c33171a
  • list.inactiveSelectionBackground#5c33171a
  • minimap.background#fcfbfa
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#5c33174d
  • notificationLink.foreground#5c3317
  • notifications.background#fcfbfa
  • notifications.foreground#140b05
  • panel.background#f9f7f5
  • panel.border#e4dbd3
  • panelTitle.activeBorder#5c3317
  • panelTitle.activeForeground#140b05
  • panelTitle.inactiveForeground#aa8f7b
  • peekView.border#5c3317
  • peekViewEditor.background#f9f7f5
  • peekViewResult.background#f7f3f0
  • peekViewTitle.background#f9f7f5
  • progressBar.background#5c3317
  • scrollbar.shadow#09050214
  • scrollbarSlider.activeBackground#140b054d
  • scrollbarSlider.background#140b051a
  • scrollbarSlider.hoverBackground#140b0533
  • selection.background#5c331733
  • sideBar.background#f9f7f5
  • sideBar.border#e4dbd3
  • sideBar.foreground#140b05
  • sideBarSectionHeader.background#5c33171a
  • sideBarSectionHeader.foreground#140b05
  • sideBarTitle.foreground#140b05
  • statusBar.background#5c3317
  • statusBar.border#e4dbd3
  • statusBar.debuggingBackground#125a90
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fcfbfa
  • statusBar.noFolderBackground#f7f3f0
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#4e2b14
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#fcfbfa
  • tab.activeBorder#5c3317
  • tab.activeBorderTop#5c331700
  • tab.activeForeground#140b05
  • tab.border#e4dbd3
  • tab.inactiveBackground#f9f7f5
  • tab.inactiveForeground#aa8f7b
  • terminal.ansiBlack#140b05
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#aa8f7b
  • 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#fcfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#f9f7f5
  • terminal.foreground#140b05
  • terminalCursor.foreground#5c3317
  • textLink.activeForeground#105080
  • textLink.foreground#125a90
  • titleBar.activeBackground#f9f7f5
  • titleBar.activeForeground#140b05
  • titleBar.border#e4dbd3
  • titleBar.inactiveBackground#f9f7f5
  • titleBar.inactiveForeground#aa8f7b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#aa8f7bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5c3317bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5c3317bold
storage.type, storage.modifier#5c3317bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#1464a0
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5c3317
string.regexp#1464a0
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6f7900bold
variable.other.constant, variable.other.enummember#6f7900bold
constant.character.escape#74523a
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#796f5eitalic
entity.name.type.parameter#796f5eitalic
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#140b05
variable.parameter#140b05italic
variable.language, variable.language.this, variable.language.self, variable.language.super#5c3317italic
variable.other.property, variable.other.object.property, meta.object-literal.key#140b05
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#5c3317bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#74523a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#aa8f7b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#796f5eitalic
support.type.property-name.css, support.type.vendored.property-name.css#796f5e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#6f7900
keyword.other.unit.css#38793a
support.type.property-name.json#796f5e
markup.heading, markup.heading entity.name, entity.name.section.markdown#5c3317bold
markup.bold#6f7900bold
markup.italic#796f5eitalic
markup.inline.raw, markup.raw#1464a0
markup.underline.link#786d74
markup.quote#aa8f7bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050