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#09212e
  • activityBar.border#0f364a
  • activityBar.foreground#2c9fd9
  • activityBar.inactiveForeground#4d86a4
  • activityBarBadge.background#fe5000
  • activityBarBadge.foreground#f2f4f6
  • badge.background#2c9fd9
  • badge.foreground#071821
  • breadcrumb.activeSelectionForeground#cedde4
  • breadcrumb.focusForeground#cedde4
  • breadcrumb.foreground#4d86a4
  • button.background#2c9fd9
  • button.foreground#071821
  • button.hoverBackground#41a9dd
  • button.secondaryBackground#0b2938
  • button.secondaryForeground#cedde4
  • descriptionForeground#4d86a4
  • dropdown.background#09212e
  • dropdown.border#0f364a
  • dropdown.foreground#cedde4
  • editor.background#071923
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#cedde4
  • editor.inactiveSelectionBackground#2c9fd926
  • editor.lineHighlightBackground#2c9fd91a
  • editor.lineHighlightBorder#2c9fd900
  • editor.selectionBackground#2c9fd94d
  • editor.wordHighlightBackground#2c9fd933
  • editorBracketMatch.background#2c9fd940
  • editorBracketMatch.border#2c9fd999
  • editorCursor.foreground#2c9fd9
  • editorError.foreground#dd4132
  • editorGroup.border#0f364a
  • editorGroupHeader.tabsBackground#09212e
  • editorGroupHeader.tabsBorder#0f364a
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cedde433
  • editorIndentGuide.background#cedde414
  • editorInfo.foreground#fe5000
  • editorLineNumber.activeForeground#cedde4
  • editorLineNumber.foreground#4d86a4
  • editorRuler.foreground#cedde414
  • editorSuggestWidget.selectedBackground#2c9fd940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cedde41a
  • editorWidget.background#09212e
  • editorWidget.border#0f364a
  • focusBorder#2c9fd999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#4d86a4
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#4d86a4
  • input.background#09212e
  • input.border#0f364a
  • input.foreground#cedde4
  • input.placeholderForeground#4d86a4
  • inputOption.activeBorder#2c9fd9
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#fe5000
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#2c9fd94d
  • list.activeSelectionForeground#cedde4
  • list.focusBackground#2c9fd933
  • list.highlightForeground#2c9fd9
  • list.hoverBackground#2c9fd926
  • list.inactiveSelectionBackground#2c9fd926
  • minimap.background#071923
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#2c9fd966
  • notificationLink.foreground#2c9fd9
  • notifications.background#0b2938
  • notifications.foreground#cedde4
  • panel.background#09212e
  • panel.border#0f364a
  • panelTitle.activeBorder#2c9fd9
  • panelTitle.activeForeground#cedde4
  • panelTitle.inactiveForeground#4d86a4
  • peekView.border#2c9fd9
  • peekViewEditor.background#09212e
  • peekViewResult.background#0b2938
  • peekViewTitle.background#09212e
  • progressBar.background#2c9fd9
  • scrollbar.shadow#04101645
  • scrollbarSlider.activeBackground#cedde459
  • scrollbarSlider.background#cedde41f
  • scrollbarSlider.hoverBackground#cedde440
  • selection.background#2c9fd94d
  • sideBar.background#0b2938
  • sideBar.border#0f364a
  • sideBar.foreground#cedde4
  • sideBarSectionHeader.background#2c9fd926
  • sideBarSectionHeader.foreground#cedde4
  • sideBarTitle.foreground#cedde4
  • statusBar.background#1a5f82
  • statusBar.border#0f364a
  • statusBar.debuggingBackground#fe5000
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#80c5e8
  • statusBar.noFolderBackground#09212e
  • statusBarItem.hoverBackground#2c9fd94d
  • statusBarItem.remoteBackground#2c9fd9
  • statusBarItem.remoteForeground#071821
  • tab.activeBackground#071923
  • tab.activeBorder#2c9fd9
  • tab.activeBorderTop#2c9fd900
  • tab.activeForeground#cedde4
  • tab.border#0f364a
  • tab.inactiveBackground#09212e
  • tab.inactiveForeground#4d86a4
  • terminal.ansiBlack#071923
  • terminal.ansiBlue#1e76ad
  • terminal.ansiBrightBlack#4d86a4
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#cedde4
  • terminal.ansiYellow#efc050
  • terminal.background#09212e
  • terminal.foreground#cedde4
  • terminalCursor.foreground#2c9fd9
  • textLink.activeForeground#fe6a26
  • textLink.foreground#fe5000
  • titleBar.activeBackground#09212e
  • titleBar.activeForeground#cedde4
  • titleBar.border#0f364a
  • titleBar.inactiveBackground#09212e
  • titleBar.inactiveForeground#4d86a4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4d86a4italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#2c9fd9bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#2c9fd9bold
storage.type, storage.modifier#2c9fd9bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#fe5000
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#2c9fd9
string.regexp#fe5000
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#00b140bold
variable.other.constant, variable.other.enummember#00b140bold
constant.character.escape#4caddf
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#6586b3italic
entity.name.type.parameter#6586b3italic
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#cedde4
variable.parameter#cedde4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#2c9fd9italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cedde4
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#2c9fd9bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#4caddf
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4d86a4
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6586b3italic
support.type.property-name.css, support.type.vendored.property-name.css#6586b3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#00b140
keyword.other.unit.css#4e9a2f
support.type.property-name.json#6586b3
markup.heading, markup.heading entity.name, entity.name.section.markdown#2c9fd9bold
markup.bold#00b140bold
markup.italic#6586b3italic
markup.inline.raw, markup.raw#fe5000
markup.underline.link#e8d4e2
markup.quote#4d86a4italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme