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#f8f7f6
  • activityBar.border#edebe8
  • activityBar.foreground#aca8a2
  • activityBar.inactiveForeground#d7d2cb
  • activityBarBadge.background#436495
  • activityBarBadge.foreground#fcfbfb
  • badge.background#aca8a2
  • badge.foreground#20201e
  • breadcrumb.activeSelectionForeground#20201e
  • breadcrumb.focusForeground#20201e
  • breadcrumb.foreground#d7d2cb
  • button.background#aca8a2
  • button.foreground#20201e
  • button.hoverBackground#9b9792
  • button.secondaryBackground#f8f7f6
  • button.secondaryForeground#20201e
  • descriptionForeground#d7d2cb
  • dropdown.background#fdfcfc
  • dropdown.border#edebe8
  • dropdown.foreground#20201e
  • editor.background#fdfcfc
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#20201e
  • editor.inactiveSelectionBackground#aca8a21a
  • editor.lineHighlightBackground#aca8a214
  • editor.lineHighlightBorder#aca8a200
  • editor.selectionBackground#aca8a233
  • editor.wordHighlightBackground#aca8a226
  • editorBracketMatch.background#aca8a233
  • editorBracketMatch.border#aca8a280
  • editorCursor.foreground#aca8a2
  • editorError.foreground#bf1932
  • editorGroup.border#edebe8
  • editorGroupHeader.tabsBackground#fafaf9
  • editorGroupHeader.tabsBorder#edebe8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#20201e2e
  • editorIndentGuide.background#20201e14
  • editorInfo.foreground#436495
  • editorLineNumber.activeForeground#20201e
  • editorLineNumber.foreground#d7d2cb
  • editorRuler.foreground#20201e14
  • editorSuggestWidget.selectedBackground#aca8a226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#20201e1a
  • editorWidget.background#fdfcfc
  • editorWidget.border#edebe8
  • focusBorder#aca8a280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#d7d2cb
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#d7d2cb
  • input.background#fdfcfc
  • input.border#edebe8
  • input.foreground#20201e
  • input.placeholderForeground#d7d2cb
  • inputOption.activeBorder#aca8a2
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#436495
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#aca8a233
  • list.activeSelectionForeground#20201e
  • list.focusBackground#aca8a226
  • list.highlightForeground#aca8a2
  • list.hoverBackground#aca8a21a
  • list.inactiveSelectionBackground#aca8a21a
  • minimap.background#fdfcfc
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#aca8a24d
  • notificationLink.foreground#aca8a2
  • notifications.background#fdfcfc
  • notifications.foreground#20201e
  • panel.background#fafaf9
  • panel.border#edebe8
  • panelTitle.activeBorder#aca8a2
  • panelTitle.activeForeground#20201e
  • panelTitle.inactiveForeground#d7d2cb
  • peekView.border#aca8a2
  • peekViewEditor.background#fafaf9
  • peekViewResult.background#f8f7f6
  • peekViewTitle.background#fafaf9
  • progressBar.background#aca8a2
  • scrollbar.shadow#15151414
  • scrollbarSlider.activeBackground#20201e4d
  • scrollbarSlider.background#20201e1a
  • scrollbarSlider.hoverBackground#20201e33
  • selection.background#aca8a233
  • sideBar.background#fafaf9
  • sideBar.border#edebe8
  • sideBar.foreground#20201e
  • sideBarSectionHeader.background#aca8a21a
  • sideBarSectionHeader.foreground#20201e
  • sideBarTitle.foreground#20201e
  • statusBar.background#aca8a2
  • statusBar.border#edebe8
  • statusBar.debuggingBackground#436495
  • statusBar.debuggingForeground#fcfbfb
  • statusBar.foreground#20201e
  • statusBar.noFolderBackground#f8f7f6
  • statusBarItem.hoverBackground#fcfbfb33
  • statusBarItem.remoteBackground#928f8a
  • statusBarItem.remoteForeground#20201e
  • tab.activeBackground#fdfcfc
  • tab.activeBorder#aca8a2
  • tab.activeBorderTop#aca8a200
  • tab.activeForeground#20201e
  • tab.border#edebe8
  • tab.inactiveBackground#fafaf9
  • tab.inactiveForeground#d7d2cb
  • terminal.ansiBlack#20201e
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#d7d2cb
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfb
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfcfc
  • terminal.ansiYellow#d4a017
  • terminal.background#fafaf9
  • terminal.foreground#20201e
  • terminalCursor.foreground#aca8a2
  • textLink.activeForeground#3b5984
  • textLink.foreground#436495
  • titleBar.activeBackground#fafaf9
  • titleBar.activeForeground#20201e
  • titleBar.border#edebe8
  • titleBar.inactiveBackground#fafaf9
  • titleBar.inactiveForeground#d7d2cb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#d7d2cbitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6f6d67bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6f6d67bold
storage.type, storage.modifier#6f6d67bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4a6fa5
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6f6d67
string.regexp#4a6fa5
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7c2029bold
variable.other.constant, variable.other.enummember#7c2029bold
constant.character.escape#706f6d
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#c63f00italic
entity.name.type.parameter#c63f00italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#20201e
variable.parameter#20201eitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#6f6d67italic
variable.other.property, variable.other.object.property, meta.object-literal.key#20201e
entity.name.class, entity.name.type.class, support.class#a35b96bold italic
entity.other.inherited-class#a35b96italic
entity.name.tag, punctuation.definition.tag#6f6d67bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#706f6d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#d7d2cb
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#c63f00italic
support.type.property-name.css, support.type.vendored.property-name.css#c63f00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a35b96bold
support.constant.property-value.css, support.constant.color.css#7c2029
keyword.other.unit.css#5c068c
support.type.property-name.json#c63f00
markup.heading, markup.heading entity.name, entity.name.section.markdown#6f6d67bold
markup.bold#7c2029bold
markup.italic#c63f00italic
markup.inline.raw, markup.raw#4a6fa5
markup.underline.link#38793a
markup.quote#d7d2cbitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme