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#2b1310
  • activityBar.border#4d211d
  • activityBar.foreground#ff6f61
  • activityBar.inactiveForeground#e8b1a2
  • activityBarBadge.background#00b5cc
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ff6f61
  • badge.foreground#26110f
  • breadcrumb.activeSelectionForeground#f8ebe6
  • breadcrumb.focusForeground#f8ebe6
  • breadcrumb.foreground#e8b1a2
  • button.background#ff6f61
  • button.foreground#26110f
  • button.hoverBackground#ff7d71
  • button.secondaryBackground#381815
  • button.secondaryForeground#f8ebe6
  • descriptionForeground#e8b1a2
  • dropdown.background#2b1310
  • dropdown.border#4d211d
  • dropdown.foreground#f8ebe6
  • editor.background#1f0d0c
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f8ebe6
  • editor.inactiveSelectionBackground#ff6f6126
  • editor.lineHighlightBackground#ff6f611a
  • editor.lineHighlightBorder#ff6f6100
  • editor.selectionBackground#ff6f614d
  • editor.wordHighlightBackground#ff6f6133
  • editorBracketMatch.background#ff6f6140
  • editorBracketMatch.border#ff6f6199
  • editorCursor.foreground#ff6f61
  • editorError.foreground#dd4132
  • editorGroup.border#4d211d
  • editorGroupHeader.tabsBackground#2b1310
  • editorGroupHeader.tabsBorder#4d211d
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8ebe633
  • editorIndentGuide.background#f8ebe614
  • editorInfo.foreground#00b5cc
  • editorLineNumber.activeForeground#f8ebe6
  • editorLineNumber.foreground#e8b1a2
  • editorRuler.foreground#f8ebe614
  • editorSuggestWidget.selectedBackground#ff6f6140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8ebe61a
  • editorWidget.background#2b1310
  • editorWidget.border#4d211d
  • focusBorder#ff6f6199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8b1a2
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8b1a2
  • input.background#2b1310
  • input.border#4d211d
  • input.foreground#f8ebe6
  • input.placeholderForeground#e8b1a2
  • inputOption.activeBorder#ff6f61
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b5cc
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ff6f614d
  • list.activeSelectionForeground#f8ebe6
  • list.focusBackground#ff6f6133
  • list.highlightForeground#ff6f61
  • list.hoverBackground#ff6f6126
  • list.inactiveSelectionBackground#ff6f6126
  • minimap.background#1f0d0c
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#ff6f6166
  • notificationLink.foreground#ff6f61
  • notifications.background#381815
  • notifications.foreground#f8ebe6
  • panel.background#2b1310
  • panel.border#4d211d
  • panelTitle.activeBorder#ff6f61
  • panelTitle.activeForeground#f8ebe6
  • panelTitle.inactiveForeground#e8b1a2
  • peekView.border#ff6f61
  • peekViewEditor.background#2b1310
  • peekViewResult.background#381815
  • peekViewTitle.background#2b1310
  • progressBar.background#ff6f61
  • scrollbar.shadow#190b0a45
  • scrollbarSlider.activeBackground#f8ebe659
  • scrollbarSlider.background#f8ebe61f
  • scrollbarSlider.hoverBackground#f8ebe640
  • selection.background#ff6f614d
  • sideBar.background#381815
  • sideBar.border#4d211d
  • sideBar.foreground#f8ebe6
  • sideBarSectionHeader.background#ff6f6126
  • sideBarSectionHeader.foreground#f8ebe6
  • sideBarTitle.foreground#f8ebe6
  • statusBar.background#99433a
  • statusBar.border#4d211d
  • statusBar.debuggingBackground#00b5cc
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffa9a0
  • statusBar.noFolderBackground#2b1310
  • statusBarItem.hoverBackground#ff6f614d
  • statusBarItem.remoteBackground#ff6f61
  • statusBarItem.remoteForeground#26110f
  • tab.activeBackground#1f0d0c
  • tab.activeBorder#ff6f61
  • tab.activeBorderTop#ff6f6100
  • tab.activeForeground#f8ebe6
  • tab.border#4d211d
  • tab.inactiveBackground#2b1310
  • tab.inactiveForeground#e8b1a2
  • terminal.ansiBlack#1f0d0c
  • terminal.ansiBlue#875e71
  • terminal.ansiBrightBlack#e8b1a2
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f8ebe6
  • terminal.ansiYellow#efc050
  • terminal.background#2b1310
  • terminal.foreground#f8ebe6
  • terminalCursor.foreground#ff6f61
  • textLink.activeForeground#26c0d4
  • textLink.foreground#00b5cc
  • titleBar.activeBackground#2b1310
  • titleBar.activeForeground#f8ebe6
  • titleBar.border#4d211d
  • titleBar.inactiveBackground#2b1310
  • titleBar.inactiveForeground#e8b1a2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8b1a2italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ff6f61bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ff6f61bold
storage.type, storage.modifier#ff6f61bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b5cc
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ff6f61
string.regexp#00b5cc
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9c68b9
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#95738abold
variable.other.constant, variable.other.enummember#95738abold
constant.character.escape#ff8579
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#bd6877italic
entity.name.type.parameter#bd6877italic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#f8ebe6
variable.parameter#f8ebe6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ff6f61italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8ebe6
entity.name.class, entity.name.type.class, support.class#78be20bold italic
entity.other.inherited-class#78be20italic
entity.name.tag, punctuation.definition.tag#ff6f61bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ff8579
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8b1a2
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#bd6877italic
support.type.property-name.css, support.type.vendored.property-name.css#bd6877
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#78be20bold
support.constant.property-value.css, support.constant.color.css#95738a
keyword.other.unit.css#9c68b9
support.type.property-name.json#bd6877
markup.heading, markup.heading entity.name, entity.name.section.markdown#ff6f61bold
markup.bold#95738abold
markup.italic#bd6877italic
markup.inline.raw, markup.raw#00b5cc
markup.underline.link#76ff7b
markup.quote#e8b1a2italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050