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#2e1118
  • activityBar.border#4a1b26
  • activityBar.foreground#d94f70
  • activityBar.inactiveForeground#994e66
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#d94f70
  • badge.foreground#210c11
  • breadcrumb.activeSelectionForeground#e1cdd4
  • breadcrumb.focusForeground#e1cdd4
  • breadcrumb.foreground#994e66
  • button.background#d94f70
  • button.foreground#210c11
  • button.hoverBackground#dd617e
  • button.secondaryBackground#38151d
  • button.secondaryForeground#e1cdd4
  • descriptionForeground#994e66
  • dropdown.background#2e1118
  • dropdown.border#4a1b26
  • dropdown.foreground#e1cdd4
  • editor.background#230d12
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#e1cdd4
  • editor.inactiveSelectionBackground#d94f7026
  • editor.lineHighlightBackground#d94f701a
  • editor.lineHighlightBorder#d94f7000
  • editor.selectionBackground#d94f704d
  • editor.wordHighlightBackground#d94f7033
  • editorBracketMatch.background#d94f7040
  • editorBracketMatch.border#d94f7099
  • editorCursor.foreground#d94f70
  • editorError.foreground#dd4132
  • editorGroup.border#4a1b26
  • editorGroupHeader.tabsBackground#2e1118
  • editorGroupHeader.tabsBorder#4a1b26
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e1cdd433
  • editorIndentGuide.background#e1cdd414
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#e1cdd4
  • editorLineNumber.foreground#994e66
  • editorRuler.foreground#e1cdd414
  • editorSuggestWidget.selectedBackground#d94f7040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e1cdd41a
  • editorWidget.background#2e1118
  • editorWidget.border#4a1b26
  • focusBorder#d94f7099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#994e66
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#994e66
  • input.background#2e1118
  • input.border#4a1b26
  • input.foreground#e1cdd4
  • input.placeholderForeground#994e66
  • inputOption.activeBorder#d94f70
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#d94f704d
  • list.activeSelectionForeground#e1cdd4
  • list.focusBackground#d94f7033
  • list.highlightForeground#d94f70
  • list.hoverBackground#d94f7026
  • list.inactiveSelectionBackground#d94f7026
  • minimap.background#230d12
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#d94f7066
  • notificationLink.foreground#d94f70
  • notifications.background#38151d
  • notifications.foreground#e1cdd4
  • panel.background#2e1118
  • panel.border#4a1b26
  • panelTitle.activeBorder#d94f70
  • panelTitle.activeForeground#e1cdd4
  • panelTitle.inactiveForeground#994e66
  • peekView.border#d94f70
  • peekViewEditor.background#2e1118
  • peekViewResult.background#38151d
  • peekViewTitle.background#2e1118
  • progressBar.background#d94f70
  • scrollbar.shadow#16080b45
  • scrollbarSlider.activeBackground#e1cdd459
  • scrollbarSlider.background#e1cdd41f
  • scrollbarSlider.hoverBackground#e1cdd440
  • selection.background#d94f704d
  • sideBar.background#38151d
  • sideBar.border#4a1b26
  • sideBar.foreground#e1cdd4
  • sideBarSectionHeader.background#d94f7026
  • sideBarSectionHeader.foreground#e1cdd4
  • sideBarTitle.foreground#e1cdd4
  • statusBar.background#822f43
  • statusBar.border#4a1b26
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#e895a9
  • statusBar.noFolderBackground#2e1118
  • statusBarItem.hoverBackground#d94f704d
  • statusBarItem.remoteBackground#d94f70
  • statusBarItem.remoteForeground#210c11
  • tab.activeBackground#230d12
  • tab.activeBorder#d94f70
  • tab.activeBorderTop#d94f7000
  • tab.activeForeground#e1cdd4
  • tab.border#4a1b26
  • tab.inactiveBackground#2e1118
  • tab.inactiveForeground#994e66
  • terminal.ansiBlack#230d12
  • terminal.ansiBlue#744e79
  • terminal.ansiBrightBlack#994e66
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e1cdd4
  • terminal.ansiYellow#efc050
  • terminal.background#2e1118
  • terminal.foreground#e1cdd4
  • terminalCursor.foreground#d94f70
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#2e1118
  • titleBar.activeForeground#e1cdd4
  • titleBar.border#4a1b26
  • titleBar.inactiveBackground#2e1118
  • titleBar.inactiveForeground#994e66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#994e66italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d94f70bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d94f70bold
storage.type, storage.modifier#d94f70bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d94f70
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a3af86
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#decdbebold
variable.other.constant, variable.other.enummember#decdbebold
constant.character.escape#df6985
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#ac7978italic
entity.name.type.parameter#ac7978italic
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#e1cdd4
variable.parameter#e1cdd4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#d94f70italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e1cdd4
entity.name.class, entity.name.type.class, support.class#996fd1bold italic
entity.other.inherited-class#996fd1italic
entity.name.tag, punctuation.definition.tag#d94f70bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#df6985
punctuation, punctuation.separator, punctuation.terminator, meta.brace#994e66
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ac7978italic
support.type.property-name.css, support.type.vendored.property-name.css#ac7978
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#996fd1bold
support.constant.property-value.css, support.constant.color.css#decdbe
keyword.other.unit.css#a3af86
support.type.property-name.json#ac7978
markup.heading, markup.heading entity.name, entity.name.section.markdown#d94f70bold
markup.bold#decdbebold
markup.italic#ac7978italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#76ff7b
markup.quote#994e66italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme