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#2e0e0a
  • activityBar.border#4b1611
  • activityBar.foreground#dd4132
  • activityBar.inactiveForeground#dea394
  • activityBarBadge.background#00b5cc
  • activityBarBadge.foreground#fcfbfa
  • badge.background#dd4132
  • badge.foreground#210a08
  • breadcrumb.activeSelectionForeground#f6e7e3
  • breadcrumb.focusForeground#f6e7e3
  • breadcrumb.foreground#dea394
  • button.background#dd4132
  • button.foreground#210a08
  • button.hoverBackground#e05447
  • button.secondaryBackground#39110d
  • button.secondaryForeground#f6e7e3
  • descriptionForeground#dea394
  • dropdown.background#2e0e0a
  • dropdown.border#4b1611
  • dropdown.foreground#f6e7e3
  • editor.background#230a08
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f6e7e3
  • editor.inactiveSelectionBackground#dd413226
  • editor.lineHighlightBackground#dd41321a
  • editor.lineHighlightBorder#dd413200
  • editor.selectionBackground#dd41324d
  • editor.wordHighlightBackground#dd413233
  • editorBracketMatch.background#dd413240
  • editorBracketMatch.border#dd413299
  • editorCursor.foreground#dd4132
  • editorError.foreground#dd4132
  • editorGroup.border#4b1611
  • editorGroupHeader.tabsBackground#2e0e0a
  • editorGroupHeader.tabsBorder#4b1611
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f6e7e333
  • editorIndentGuide.background#f6e7e314
  • editorInfo.foreground#00b5cc
  • editorLineNumber.activeForeground#f6e7e3
  • editorLineNumber.foreground#dea394
  • editorRuler.foreground#f6e7e314
  • editorSuggestWidget.selectedBackground#dd413240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f6e7e31a
  • editorWidget.background#2e0e0a
  • editorWidget.border#4b1611
  • focusBorder#dd413299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#dea394
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#dea394
  • input.background#2e0e0a
  • input.border#4b1611
  • input.foreground#f6e7e3
  • input.placeholderForeground#dea394
  • inputOption.activeBorder#dd4132
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b5cc
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#dd41324d
  • list.activeSelectionForeground#f6e7e3
  • list.focusBackground#dd413233
  • list.highlightForeground#dd4132
  • list.hoverBackground#dd413226
  • list.inactiveSelectionBackground#dd413226
  • minimap.background#230a08
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#dd413266
  • notificationLink.foreground#dd4132
  • notifications.background#39110d
  • notifications.foreground#f6e7e3
  • panel.background#2e0e0a
  • panel.border#4b1611
  • panelTitle.activeBorder#dd4132
  • panelTitle.activeForeground#f6e7e3
  • panelTitle.inactiveForeground#dea394
  • peekView.border#dd4132
  • peekViewEditor.background#2e0e0a
  • peekViewResult.background#39110d
  • peekViewTitle.background#2e0e0a
  • progressBar.background#dd4132
  • scrollbar.shadow#16060545
  • scrollbarSlider.activeBackground#f6e7e359
  • scrollbarSlider.background#f6e7e31f
  • scrollbarSlider.hoverBackground#f6e7e340
  • selection.background#dd41324d
  • sideBar.background#39110d
  • sideBar.border#4b1611
  • sideBar.foreground#f6e7e3
  • sideBarSectionHeader.background#dd413226
  • sideBarSectionHeader.foreground#f6e7e3
  • sideBarTitle.foreground#f6e7e3
  • statusBar.background#85271e
  • statusBar.border#4b1611
  • statusBar.debuggingBackground#00b5cc
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#eb8d84
  • statusBar.noFolderBackground#2e0e0a
  • statusBarItem.hoverBackground#dd41324d
  • statusBarItem.remoteBackground#dd4132
  • statusBarItem.remoteForeground#210a08
  • tab.activeBackground#230a08
  • tab.activeBorder#dd4132
  • tab.activeBorderTop#dd413200
  • tab.activeForeground#f6e7e3
  • tab.border#4b1611
  • tab.inactiveBackground#2e0e0a
  • tab.inactiveForeground#dea394
  • terminal.ansiBlack#230a08
  • terminal.ansiBlue#76475a
  • terminal.ansiBrightBlack#dea394
  • 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#f6e7e3
  • terminal.ansiYellow#efc050
  • terminal.background#2e0e0a
  • terminal.foreground#f6e7e3
  • terminalCursor.foreground#dd4132
  • textLink.activeForeground#26c0d4
  • textLink.foreground#00b5cc
  • titleBar.activeBackground#2e0e0a
  • titleBar.activeForeground#f6e7e3
  • titleBar.border#4b1611
  • titleBar.inactiveBackground#2e0e0a
  • titleBar.inactiveForeground#dea394

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#dea394italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e05042bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e05042bold
storage.type, storage.modifier#e05042bold
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#e05042
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#e25e51
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#f6e7e3
variable.parameter#f6e7e3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#e05042italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f6e7e3
entity.name.class, entity.name.type.class, support.class#78be20bold italic
entity.other.inherited-class#78be20italic
entity.name.tag, punctuation.definition.tag#e05042bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#e25e51
punctuation, punctuation.separator, punctuation.terminator, meta.brace#dea394
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#e05042bold
markup.bold#95738abold
markup.italic#bd6877italic
markup.inline.raw, markup.raw#00b5cc
markup.underline.link#76ff7b
markup.quote#dea394italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050