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#2a1b18
  • activityBar.border#4a302a
  • activityBar.foreground#f7a08b
  • activityBar.inactiveForeground#e5c0af
  • activityBarBadge.background#00b4e1
  • activityBarBadge.foreground#fcfbfa
  • badge.background#f7a08b
  • badge.foreground#251815
  • breadcrumb.activeSelectionForeground#f7eee9
  • breadcrumb.focusForeground#f7eee9
  • breadcrumb.foreground#e5c0af
  • button.background#f7a08b
  • button.foreground#251815
  • button.hoverBackground#f8aa97
  • button.secondaryBackground#36231f
  • button.secondaryForeground#f7eee9
  • descriptionForeground#e5c0af
  • dropdown.background#2a1b18
  • dropdown.border#4a302a
  • dropdown.foreground#f7eee9
  • editor.background#1e1311
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f7eee9
  • editor.inactiveSelectionBackground#f7a08b26
  • editor.lineHighlightBackground#f7a08b1a
  • editor.lineHighlightBorder#f7a08b00
  • editor.selectionBackground#f7a08b4d
  • editor.wordHighlightBackground#f7a08b33
  • editorBracketMatch.background#f7a08b40
  • editorBracketMatch.border#f7a08b99
  • editorCursor.foreground#f7a08b
  • editorError.foreground#dd4132
  • editorGroup.border#4a302a
  • editorGroupHeader.tabsBackground#2a1b18
  • editorGroupHeader.tabsBorder#4a302a
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f7eee933
  • editorIndentGuide.background#f7eee914
  • editorInfo.foreground#00b4e1
  • editorLineNumber.activeForeground#f7eee9
  • editorLineNumber.foreground#e5c0af
  • editorRuler.foreground#f7eee914
  • editorSuggestWidget.selectedBackground#f7a08b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f7eee91a
  • editorWidget.background#2a1b18
  • editorWidget.border#4a302a
  • focusBorder#f7a08b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e5c0af
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e5c0af
  • input.background#2a1b18
  • input.border#4a302a
  • input.foreground#f7eee9
  • input.placeholderForeground#e5c0af
  • inputOption.activeBorder#f7a08b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b4e1
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f7a08b4d
  • list.activeSelectionForeground#f7eee9
  • list.focusBackground#f7a08b33
  • list.highlightForeground#f7a08b
  • list.hoverBackground#f7a08b26
  • list.inactiveSelectionBackground#f7a08b26
  • minimap.background#1e1311
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#f7a08b66
  • notificationLink.foreground#f7a08b
  • notifications.background#36231f
  • notifications.foreground#f7eee9
  • panel.background#2a1b18
  • panel.border#4a302a
  • panelTitle.activeBorder#f7a08b
  • panelTitle.activeForeground#f7eee9
  • panelTitle.inactiveForeground#e5c0af
  • peekView.border#f7a08b
  • peekViewEditor.background#2a1b18
  • peekViewResult.background#36231f
  • peekViewTitle.background#2a1b18
  • progressBar.background#f7a08b
  • scrollbar.shadow#19100e45
  • scrollbarSlider.activeBackground#f7eee959
  • scrollbarSlider.background#f7eee91f
  • scrollbarSlider.hoverBackground#f7eee940
  • selection.background#f7a08b4d
  • sideBar.background#36231f
  • sideBar.border#4a302a
  • sideBar.foreground#f7eee9
  • sideBarSectionHeader.background#f7a08b26
  • sideBarSectionHeader.foreground#f7eee9
  • sideBarTitle.foreground#f7eee9
  • statusBar.background#946053
  • statusBar.border#4a302a
  • statusBar.debuggingBackground#00b4e1
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fac6b9
  • statusBar.noFolderBackground#2a1b18
  • statusBarItem.hoverBackground#f7a08b4d
  • statusBarItem.remoteBackground#f7a08b
  • statusBarItem.remoteForeground#251815
  • tab.activeBackground#1e1311
  • tab.activeBorder#f7a08b
  • tab.activeBorderTop#f7a08b00
  • tab.activeForeground#f7eee9
  • tab.border#4a302a
  • tab.inactiveBackground#2a1b18
  • tab.inactiveForeground#e5c0af
  • terminal.ansiBlack#1e1311
  • terminal.ansiBlue#837686
  • terminal.ansiBrightBlack#e5c0af
  • 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#f7eee9
  • terminal.ansiYellow#efc050
  • terminal.background#2a1b18
  • terminal.foreground#f7eee9
  • terminalCursor.foreground#f7a08b
  • textLink.activeForeground#26bfe6
  • textLink.foreground#00b4e1
  • titleBar.activeBackground#2a1b18
  • titleBar.activeForeground#f7eee9
  • titleBar.border#4a302a
  • titleBar.inactiveBackground#2a1b18
  • titleBar.inactiveForeground#e5c0af

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e5c0afitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f7a08bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f7a08bbold
storage.type, storage.modifier#f7a08bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b4e1
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f7a08b
string.regexp#00b4e1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f5df4dbold
variable.other.constant, variable.other.enummember#f5df4dbold
constant.character.escape#f8ae9c
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#decdbeitalic
entity.name.type.parameter#decdbeitalic
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#f7eee9
variable.parameter#f7eee9italic
variable.language, variable.language.this, variable.language.self, variable.language.super#f7a08bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f7eee9
entity.name.class, entity.name.type.class, support.class#4e9a2fbold italic
entity.other.inherited-class#4e9a2fitalic
entity.name.tag, punctuation.definition.tag#f7a08bbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f8ae9c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e5c0af
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#decdbeitalic
support.type.property-name.css, support.type.vendored.property-name.css#decdbe
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4e9a2fbold
support.constant.property-value.css, support.constant.color.css#f5df4d
keyword.other.unit.css#a474bf
support.type.property-name.json#decdbe
markup.heading, markup.heading entity.name, entity.name.section.markdown#f7a08bbold
markup.bold#f5df4dbold
markup.italic#decdbeitalic
markup.inline.raw, markup.raw#00b4e1
markup.underline.link#e8d4e2
markup.quote#e5c0afitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme