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#2f120d
  • activityBar.border#4d1e15
  • activityBar.foreground#e2583e
  • activityBar.inactiveForeground#dfaa98
  • activityBarBadge.background#006e7f
  • activityBarBadge.foreground#fcfbfa
  • badge.background#e2583e
  • badge.foreground#220d09
  • breadcrumb.activeSelectionForeground#f6e9e4
  • breadcrumb.focusForeground#f6e9e4
  • breadcrumb.foreground#dfaa98
  • button.background#e2583e
  • button.foreground#220d09
  • button.hoverBackground#e56951
  • button.secondaryBackground#3b1710
  • button.secondaryForeground#f6e9e4
  • descriptionForeground#dfaa98
  • dropdown.background#2f120d
  • dropdown.border#4d1e15
  • dropdown.foreground#f6e9e4
  • editor.background#240e0a
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#f6e9e4
  • editor.inactiveSelectionBackground#e2583e26
  • editor.lineHighlightBackground#e2583e1a
  • editor.lineHighlightBorder#e2583e00
  • editor.selectionBackground#e2583e4d
  • editor.wordHighlightBackground#e2583e33
  • editorBracketMatch.background#e2583e40
  • editorBracketMatch.border#e2583e99
  • editorCursor.foreground#e2583e
  • editorError.foreground#dd4132
  • editorGroup.border#4d1e15
  • editorGroupHeader.tabsBackground#2f120d
  • editorGroupHeader.tabsBorder#4d1e15
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f6e9e433
  • editorIndentGuide.background#f6e9e414
  • editorInfo.foreground#006e7f
  • editorLineNumber.activeForeground#f6e9e4
  • editorLineNumber.foreground#dfaa98
  • editorRuler.foreground#f6e9e414
  • editorSuggestWidget.selectedBackground#e2583e40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f6e9e41a
  • editorWidget.background#2f120d
  • editorWidget.border#4d1e15
  • focusBorder#e2583e99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#dfaa98
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#dfaa98
  • input.background#2f120d
  • input.border#4d1e15
  • input.foreground#f6e9e4
  • input.placeholderForeground#dfaa98
  • inputOption.activeBorder#e2583e
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#006e7f
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#e2583e4d
  • list.activeSelectionForeground#f6e9e4
  • list.focusBackground#e2583e33
  • list.highlightForeground#e2583e
  • list.hoverBackground#e2583e26
  • list.inactiveSelectionBackground#e2583e26
  • minimap.background#240e0a
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#e2583e66
  • notificationLink.foreground#e2583e
  • notifications.background#3b1710
  • notifications.foreground#f6e9e4
  • panel.background#2f120d
  • panel.border#4d1e15
  • panelTitle.activeBorder#e2583e
  • panelTitle.activeForeground#f6e9e4
  • panelTitle.inactiveForeground#dfaa98
  • peekView.border#e2583e
  • peekViewEditor.background#2f120d
  • peekViewResult.background#3b1710
  • peekViewTitle.background#2f120d
  • progressBar.background#e2583e
  • scrollbar.shadow#17090645
  • scrollbarSlider.activeBackground#f6e9e459
  • scrollbarSlider.background#f6e9e41f
  • scrollbarSlider.hoverBackground#f6e9e440
  • selection.background#e2583e4d
  • sideBar.background#3b1710
  • sideBar.border#4d1e15
  • sideBar.foreground#f6e9e4
  • sideBarSectionHeader.background#e2583e26
  • sideBarSectionHeader.foreground#f6e9e4
  • sideBarTitle.foreground#f6e9e4
  • statusBar.background#883525
  • statusBar.border#4d1e15
  • statusBar.debuggingBackground#006e7f
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ee9b8b
  • statusBar.noFolderBackground#2f120d
  • statusBarItem.hoverBackground#e2583e4d
  • statusBarItem.remoteBackground#e2583e
  • statusBarItem.remoteForeground#220d09
  • tab.activeBackground#240e0a
  • tab.activeBorder#e2583e
  • tab.activeBorderTop#e2583e00
  • tab.activeForeground#f6e9e4
  • tab.border#4d1e15
  • tab.inactiveBackground#2f120d
  • tab.inactiveForeground#dfaa98
  • terminal.ansiBlack#240e0a
  • terminal.ansiBlue#795260
  • terminal.ansiBrightBlack#dfaa98
  • 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#f6e9e4
  • terminal.ansiYellow#efc050
  • terminal.background#2f120d
  • terminal.foreground#f6e9e4
  • terminalCursor.foreground#e2583e
  • textLink.activeForeground#268492
  • textLink.foreground#006e7f
  • titleBar.activeBackground#2f120d
  • titleBar.activeForeground#f6e9e4
  • titleBar.border#4d1e15
  • titleBar.inactiveBackground#2f120d
  • titleBar.inactiveForeground#dfaa98

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#dfaa98italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e2583ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e2583ebold
storage.type, storage.modifier#e2583ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#388f9b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#e2583e
string.regexp#388f9b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ff3ca0bold
variable.other.constant, variable.other.enummember#ff3ca0bold
constant.character.escape#e6715b
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#b0787citalic
entity.name.type.parameter#b0787citalic
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#f6e9e4
variable.parameter#f6e9e4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#e2583eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f6e9e4
entity.name.class, entity.name.type.class, support.class#a474bfbold italic
entity.other.inherited-class#a474bfitalic
entity.name.tag, punctuation.definition.tag#e2583ebold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#e6715b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#dfaa98
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b0787citalic
support.type.property-name.css, support.type.vendored.property-name.css#b0787c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a474bfbold
support.constant.property-value.css, support.constant.color.css#ff3ca0
keyword.other.unit.css#7d7eb8
support.type.property-name.json#b0787c
markup.heading, markup.heading entity.name, entity.name.section.markdown#e2583ebold
markup.bold#ff3ca0bold
markup.italic#b0787citalic
markup.inline.raw, markup.raw#388f9b
markup.underline.link#76ff7b
markup.quote#dfaa98italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050