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#361600
  • activityBar.border#572400
  • activityBar.foreground#ff6b00
  • activityBar.inactiveForeground#e8b085
  • activityBarBadge.background#1464a0
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ff6b00
  • badge.foreground#261000
  • breadcrumb.activeSelectionForeground#f8eae0
  • breadcrumb.focusForeground#f8eae0
  • breadcrumb.foreground#e8b085
  • button.background#ff6b00
  • button.foreground#261000
  • button.hoverBackground#ff7a1a
  • button.secondaryBackground#421c00
  • button.secondaryForeground#f8eae0
  • descriptionForeground#e8b085
  • dropdown.background#361600
  • dropdown.border#572400
  • dropdown.foreground#f8eae0
  • editor.background#291100
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#f8eae0
  • editor.inactiveSelectionBackground#ff6b0026
  • editor.lineHighlightBackground#ff6b001a
  • editor.lineHighlightBorder#ff6b0000
  • editor.selectionBackground#ff6b004d
  • editor.wordHighlightBackground#ff6b0033
  • editorBracketMatch.background#ff6b0040
  • editorBracketMatch.border#ff6b0099
  • editorCursor.foreground#ff6b00
  • editorError.foreground#dd4132
  • editorGroup.border#572400
  • editorGroupHeader.tabsBackground#361600
  • editorGroupHeader.tabsBorder#572400
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8eae033
  • editorIndentGuide.background#f8eae014
  • editorInfo.foreground#1464a0
  • editorLineNumber.activeForeground#f8eae0
  • editorLineNumber.foreground#e8b085
  • editorRuler.foreground#f8eae014
  • editorSuggestWidget.selectedBackground#ff6b0040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8eae01a
  • editorWidget.background#361600
  • editorWidget.border#572400
  • focusBorder#ff6b0099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8b085
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8b085
  • input.background#361600
  • input.border#572400
  • input.foreground#f8eae0
  • input.placeholderForeground#e8b085
  • inputOption.activeBorder#ff6b00
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#1464a0
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ff6b004d
  • list.activeSelectionForeground#f8eae0
  • list.focusBackground#ff6b0033
  • list.highlightForeground#ff6b00
  • list.hoverBackground#ff6b0026
  • list.inactiveSelectionBackground#ff6b0026
  • minimap.background#291100
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#ff6b0066
  • notificationLink.foreground#ff6b00
  • notifications.background#421c00
  • notifications.foreground#f8eae0
  • panel.background#361600
  • panel.border#572400
  • panelTitle.activeBorder#ff6b00
  • panelTitle.activeForeground#f8eae0
  • panelTitle.inactiveForeground#e8b085
  • peekView.border#ff6b00
  • peekViewEditor.background#361600
  • peekViewResult.background#421c00
  • peekViewTitle.background#361600
  • progressBar.background#ff6b00
  • scrollbar.shadow#190b0045
  • scrollbarSlider.activeBackground#f8eae059
  • scrollbarSlider.background#f8eae01f
  • scrollbarSlider.hoverBackground#f8eae040
  • selection.background#ff6b004d
  • sideBar.background#421c00
  • sideBar.border#572400
  • sideBar.foreground#f8eae0
  • sideBarSectionHeader.background#ff6b0026
  • sideBarSectionHeader.foreground#f8eae0
  • sideBarTitle.foreground#f8eae0
  • statusBar.background#994000
  • statusBar.border#572400
  • statusBar.debuggingBackground#1464a0
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffa666
  • statusBar.noFolderBackground#361600
  • statusBarItem.hoverBackground#ff6b004d
  • statusBarItem.remoteBackground#ff6b00
  • statusBarItem.remoteForeground#261000
  • tab.activeBackground#291100
  • tab.activeBorder#ff6b00
  • tab.activeBorderTop#ff6b0000
  • tab.activeForeground#f8eae0
  • tab.border#572400
  • tab.inactiveBackground#361600
  • tab.inactiveForeground#e8b085
  • terminal.ansiBlack#291100
  • terminal.ansiBlue#875c41
  • terminal.ansiBrightBlack#e8b085
  • 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#f8eae0
  • terminal.ansiYellow#efc050
  • terminal.background#361600
  • terminal.foreground#f8eae0
  • terminalCursor.foreground#ff6b00
  • textLink.activeForeground#377bae
  • textLink.foreground#1464a0
  • titleBar.activeBackground#361600
  • titleBar.activeForeground#f8eae0
  • titleBar.border#572400
  • titleBar.inactiveBackground#361600
  • titleBar.inactiveForeground#e8b085

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8b085italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ff6b00bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ff6b00bold
storage.type, storage.modifier#ff6b00bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4886b5
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ff6b00
string.regexp#4886b5
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e83e6cbold
variable.other.constant, variable.other.enummember#e83e6cbold
constant.character.escape#ff8126
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#e2583eitalic
entity.name.type.parameter#e2583eitalic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#f8eae0
variable.parameter#f8eae0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ff6b00italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8eae0
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#ff6b00bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ff8126
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8b085
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#e2583eitalic
support.type.property-name.css, support.type.vendored.property-name.css#e2583e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#e83e6c
keyword.other.unit.css#76ff7b
support.type.property-name.json#e2583e
markup.heading, markup.heading entity.name, entity.name.section.markdown#ff6b00bold
markup.bold#e83e6cbold
markup.italic#e2583eitalic
markup.inline.raw, markup.raw#4886b5
markup.underline.link#e8d4e2
markup.quote#e8b085italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme