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#eceeee
  • activityBar.border#cbd5d4
  • activityBar.foreground#428d8b
  • activityBar.inactiveForeground#7ea5a4
  • activityBarBadge.background#db9d9e
  • activityBarBadge.foreground#f7f7f7
  • badge.background#428d8b
  • badge.foreground#0c1a1a
  • breadcrumb.activeSelectionForeground#0c1a1a
  • breadcrumb.focusForeground#0c1a1a
  • breadcrumb.foreground#7ea5a4
  • button.background#428d8b
  • button.foreground#0c1a1a
  • button.hoverBackground#3b7f7d
  • button.secondaryBackground#eceeee
  • button.secondaryForeground#0c1a1a
  • descriptionForeground#7ea5a4
  • dropdown.background#f9f9f9
  • dropdown.border#cbd5d4
  • dropdown.foreground#0c1a1a
  • editor.background#f9f9f9
  • editor.findMatchBackground#78be2059
  • editor.findMatchHighlightBackground#78be2026
  • editor.foreground#0c1a1a
  • editor.inactiveSelectionBackground#428d8b1a
  • editor.lineHighlightBackground#428d8b14
  • editor.lineHighlightBorder#428d8b00
  • editor.selectionBackground#428d8b33
  • editor.wordHighlightBackground#428d8b26
  • editorBracketMatch.background#428d8b33
  • editorBracketMatch.border#428d8b80
  • editorCursor.foreground#428d8b
  • editorError.foreground#bf1932
  • editorGroup.border#cbd5d4
  • editorGroupHeader.tabsBackground#f2f4f3
  • editorGroupHeader.tabsBorder#cbd5d4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0c1a1a2e
  • editorIndentGuide.background#0c1a1a14
  • editorInfo.foreground#db9d9e
  • editorLineNumber.activeForeground#0c1a1a
  • editorLineNumber.foreground#7ea5a4
  • editorRuler.foreground#0c1a1a14
  • editorSuggestWidget.selectedBackground#428d8b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0c1a1a1a
  • editorWidget.background#f9f9f9
  • editorWidget.border#cbd5d4
  • focusBorder#428d8b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#7ea5a4
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#7ea5a4
  • input.background#f9f9f9
  • input.border#cbd5d4
  • input.foreground#0c1a1a
  • input.placeholderForeground#7ea5a4
  • inputOption.activeBorder#428d8b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#db9d9e
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#428d8b33
  • list.activeSelectionForeground#0c1a1a
  • list.focusBackground#428d8b26
  • list.highlightForeground#428d8b
  • list.hoverBackground#428d8b1a
  • list.inactiveSelectionBackground#428d8b1a
  • minimap.background#f9f9f9
  • minimap.findMatchHighlight#78be2080
  • minimap.selectionHighlight#428d8b4d
  • notificationLink.foreground#428d8b
  • notifications.background#f9f9f9
  • notifications.foreground#0c1a1a
  • panel.background#f2f4f3
  • panel.border#cbd5d4
  • panelTitle.activeBorder#428d8b
  • panelTitle.activeForeground#0c1a1a
  • panelTitle.inactiveForeground#7ea5a4
  • peekView.border#428d8b
  • peekViewEditor.background#f2f4f3
  • peekViewResult.background#eceeee
  • peekViewTitle.background#f2f4f3
  • progressBar.background#428d8b
  • scrollbar.shadow#08121114
  • scrollbarSlider.activeBackground#0c1a1a4d
  • scrollbarSlider.background#0c1a1a1a
  • scrollbarSlider.hoverBackground#0c1a1a33
  • selection.background#428d8b33
  • sideBar.background#f2f4f3
  • sideBar.border#cbd5d4
  • sideBar.foreground#0c1a1a
  • sideBarSectionHeader.background#428d8b1a
  • sideBarSectionHeader.foreground#0c1a1a
  • sideBarTitle.foreground#0c1a1a
  • statusBar.background#428d8b
  • statusBar.border#cbd5d4
  • statusBar.debuggingBackground#db9d9e
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#0c1a1a
  • statusBar.noFolderBackground#eceeee
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#387876
  • statusBarItem.remoteForeground#0c1a1a
  • tab.activeBackground#f9f9f9
  • tab.activeBorder#428d8b
  • tab.activeBorderTop#428d8b00
  • tab.activeForeground#0c1a1a
  • tab.border#cbd5d4
  • tab.inactiveBackground#f2f4f3
  • tab.inactiveForeground#7ea5a4
  • terminal.ansiBlack#0c1a1a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#7ea5a4
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f9f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f2f4f3
  • terminal.foreground#0c1a1a
  • terminalCursor.foreground#428d8b
  • textLink.activeForeground#c28b8d
  • textLink.foreground#db9d9e
  • titleBar.activeBackground#f2f4f3
  • titleBar.activeForeground#0c1a1a
  • titleBar.border#cbd5d4
  • titleBar.inactiveBackground#f2f4f3
  • titleBar.inactiveForeground#7ea5a4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7ea5a4italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#367472bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#367472bold
storage.type, storage.modifier#367472bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#886162
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#367472
string.regexp#886162
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4f7d15
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#606f8abold
variable.other.constant, variable.other.enummember#606f8abold
constant.character.escape#487b79
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#4f6f79italic
entity.name.type.parameter#4f6f79italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#0c1a1a
variable.parameter#0c1a1aitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#367472italic
variable.other.property, variable.other.object.property, meta.object-literal.key#0c1a1a
entity.name.class, entity.name.type.class, support.class#5f4b8bbold italic
entity.other.inherited-class#5f4b8bitalic
entity.name.tag, punctuation.definition.tag#367472bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#487b79
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7ea5a4
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4f6f79italic
support.type.property-name.css, support.type.vendored.property-name.css#4f6f79
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5f4b8bbold
support.constant.property-value.css, support.constant.color.css#606f8a
keyword.other.unit.css#4f7d15
support.type.property-name.json#4f6f79
markup.heading, markup.heading entity.name, entity.name.section.markdown#367472bold
markup.bold#606f8abold
markup.italic#4f6f79italic
markup.inline.raw, markup.raw#886162
markup.underline.link#786d74
markup.quote#7ea5a4italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme