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#2a1c13
  • activityBar.border#4a3121
  • activityBar.foreground#f5a26f
  • activityBar.inactiveForeground#e5c0a6
  • activityBarBadge.background#5b7b8d
  • activityBarBadge.foreground#fcfbfa
  • badge.background#f5a26f
  • badge.foreground#251811
  • breadcrumb.activeSelectionForeground#f7eee7
  • breadcrumb.focusForeground#f7eee7
  • breadcrumb.foreground#e5c0a6
  • button.background#f5a26f
  • button.foreground#251811
  • button.hoverBackground#f6ab7d
  • button.secondaryBackground#362418
  • button.secondaryForeground#f7eee7
  • descriptionForeground#e5c0a6
  • dropdown.background#2a1c13
  • dropdown.border#4a3121
  • dropdown.foreground#f7eee7
  • editor.background#1d130d
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#f7eee7
  • editor.inactiveSelectionBackground#f5a26f26
  • editor.lineHighlightBackground#f5a26f1a
  • editor.lineHighlightBorder#f5a26f00
  • editor.selectionBackground#f5a26f4d
  • editor.wordHighlightBackground#f5a26f33
  • editorBracketMatch.background#f5a26f40
  • editorBracketMatch.border#f5a26f99
  • editorCursor.foreground#f5a26f
  • editorError.foreground#dd4132
  • editorGroup.border#4a3121
  • editorGroupHeader.tabsBackground#2a1c13
  • editorGroupHeader.tabsBorder#4a3121
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f7eee733
  • editorIndentGuide.background#f7eee714
  • editorInfo.foreground#5b7b8d
  • editorLineNumber.activeForeground#f7eee7
  • editorLineNumber.foreground#e5c0a6
  • editorRuler.foreground#f7eee714
  • editorSuggestWidget.selectedBackground#f5a26f40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f7eee71a
  • editorWidget.background#2a1c13
  • editorWidget.border#4a3121
  • focusBorder#f5a26f99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e5c0a6
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e5c0a6
  • input.background#2a1c13
  • input.border#4a3121
  • input.foreground#f7eee7
  • input.placeholderForeground#e5c0a6
  • inputOption.activeBorder#f5a26f
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5b7b8d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f5a26f4d
  • list.activeSelectionForeground#f7eee7
  • list.focusBackground#f5a26f33
  • list.highlightForeground#f5a26f
  • list.hoverBackground#f5a26f26
  • list.inactiveSelectionBackground#f5a26f26
  • minimap.background#1d130d
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#f5a26f66
  • notificationLink.foreground#f5a26f
  • notifications.background#362418
  • notifications.foreground#f7eee7
  • panel.background#2a1c13
  • panel.border#4a3121
  • panelTitle.activeBorder#f5a26f
  • panelTitle.activeForeground#f7eee7
  • panelTitle.inactiveForeground#e5c0a6
  • peekView.border#f5a26f
  • peekViewEditor.background#2a1c13
  • peekViewResult.background#362418
  • peekViewTitle.background#2a1c13
  • progressBar.background#f5a26f
  • scrollbar.shadow#18100b45
  • scrollbarSlider.activeBackground#f7eee759
  • scrollbarSlider.background#f7eee71f
  • scrollbarSlider.hoverBackground#f7eee740
  • selection.background#f5a26f4d
  • sideBar.background#362418
  • sideBar.border#4a3121
  • sideBar.foreground#f7eee7
  • sideBarSectionHeader.background#f5a26f26
  • sideBarSectionHeader.foreground#f7eee7
  • sideBarTitle.foreground#f7eee7
  • statusBar.background#936143
  • statusBar.border#4a3121
  • statusBar.debuggingBackground#5b7b8d
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#f9c7a9
  • statusBar.noFolderBackground#2a1c13
  • statusBarItem.hoverBackground#f5a26f4d
  • statusBarItem.remoteBackground#f5a26f
  • statusBarItem.remoteForeground#251811
  • tab.activeBackground#1d130d
  • tab.activeBorder#f5a26f
  • tab.activeBorderTop#f5a26f00
  • tab.activeForeground#f7eee7
  • tab.border#4a3121
  • tab.inactiveBackground#2a1c13
  • tab.inactiveForeground#e5c0a6
  • terminal.ansiBlack#1d130d
  • terminal.ansiBlue#827778
  • terminal.ansiBrightBlack#e5c0a6
  • 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#f7eee7
  • terminal.ansiYellow#efc050
  • terminal.background#2a1c13
  • terminal.foreground#f7eee7
  • terminalCursor.foreground#f5a26f
  • textLink.activeForeground#748f9e
  • textLink.foreground#5b7b8d
  • titleBar.activeBackground#2a1c13
  • titleBar.activeForeground#f7eee7
  • titleBar.border#4a3121
  • titleBar.inactiveBackground#2a1c13
  • titleBar.inactiveForeground#e5c0a6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e5c0a6italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f5a26fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f5a26fbold
storage.type, storage.modifier#f5a26fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#688696
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f5a26f
string.regexp#688696
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f5b5c8bold
variable.other.constant, variable.other.enummember#f5b5c8bold
constant.character.escape#f7b085
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#ff8272italic
entity.name.type.parameter#ff8272italic
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#f7eee7
variable.parameter#f7eee7italic
variable.language, variable.language.this, variable.language.self, variable.language.super#f5a26fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f7eee7
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#f5a26fbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f7b085
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e5c0a6
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ff8272italic
support.type.property-name.css, support.type.vendored.property-name.css#ff8272
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#f5b5c8
keyword.other.unit.css#76ff7b
support.type.property-name.json#ff8272
markup.heading, markup.heading entity.name, entity.name.section.markdown#f5a26fbold
markup.bold#f5b5c8bold
markup.italic#ff8272italic
markup.inline.raw, markup.raw#688696
markup.underline.link#e8d4e2
markup.quote#e5c0a6italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme