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#002126
  • activityBar.border#002f37
  • activityBar.foreground#006e7f
  • activityBar.inactiveForeground#407789
  • activityBarBadge.background#ff6b54
  • activityBarBadge.foreground#f2f4f6
  • badge.background#006e7f
  • badge.foreground#f2f4f6
  • breadcrumb.activeSelectionForeground#cbd9de
  • breadcrumb.focusForeground#cbd9de
  • breadcrumb.foreground#407789
  • button.background#006e7f
  • button.foreground#f2f4f6
  • button.hoverBackground#1a7d8c
  • button.secondaryBackground#00272c
  • button.secondaryForeground#cbd9de
  • descriptionForeground#407789
  • dropdown.background#002126
  • dropdown.border#002f37
  • dropdown.foreground#cbd9de
  • editor.background#001c20
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#cbd9de
  • editor.inactiveSelectionBackground#006e7f26
  • editor.lineHighlightBackground#006e7f1a
  • editor.lineHighlightBorder#006e7f00
  • editor.selectionBackground#006e7f4d
  • editor.wordHighlightBackground#006e7f33
  • editorBracketMatch.background#006e7f40
  • editorBracketMatch.border#006e7f99
  • editorCursor.foreground#006e7f
  • editorError.foreground#dd4132
  • editorGroup.border#002f37
  • editorGroupHeader.tabsBackground#002126
  • editorGroupHeader.tabsBorder#002f37
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cbd9de33
  • editorIndentGuide.background#cbd9de14
  • editorInfo.foreground#ff6b54
  • editorLineNumber.activeForeground#cbd9de
  • editorLineNumber.foreground#407789
  • editorRuler.foreground#cbd9de14
  • editorSuggestWidget.selectedBackground#006e7f40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cbd9de1a
  • editorWidget.background#002126
  • editorWidget.border#002f37
  • focusBorder#006e7f99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#407789
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#407789
  • input.background#002126
  • input.border#002f37
  • input.foreground#cbd9de
  • input.placeholderForeground#407789
  • inputOption.activeBorder#006e7f
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ff6b54
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#006e7f4d
  • list.activeSelectionForeground#cbd9de
  • list.focusBackground#006e7f33
  • list.highlightForeground#006e7f
  • list.hoverBackground#006e7f26
  • list.inactiveSelectionBackground#006e7f26
  • minimap.background#001c20
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#006e7f66
  • notificationLink.foreground#006e7f
  • notifications.background#00272c
  • notifications.foreground#cbd9de
  • panel.background#002126
  • panel.border#002f37
  • panelTitle.activeBorder#006e7f
  • panelTitle.activeForeground#cbd9de
  • panelTitle.inactiveForeground#407789
  • peekView.border#006e7f
  • peekViewEditor.background#002126
  • peekViewResult.background#00272c
  • peekViewTitle.background#002126
  • progressBar.background#006e7f
  • scrollbar.shadow#000b0d45
  • scrollbarSlider.activeBackground#cbd9de59
  • scrollbarSlider.background#cbd9de1f
  • scrollbarSlider.hoverBackground#cbd9de40
  • selection.background#006e7f4d
  • sideBar.background#00272c
  • sideBar.border#002f37
  • sideBar.foreground#cbd9de
  • sideBarSectionHeader.background#006e7f26
  • sideBarSectionHeader.foreground#cbd9de
  • sideBarTitle.foreground#cbd9de
  • statusBar.background#00424c
  • statusBar.border#002f37
  • statusBar.debuggingBackground#ff6b54
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#66a8b2
  • statusBar.noFolderBackground#002126
  • statusBarItem.hoverBackground#006e7f4d
  • statusBarItem.remoteBackground#006e7f
  • statusBarItem.remoteForeground#f2f4f6
  • tab.activeBackground#001c20
  • tab.activeBorder#006e7f
  • tab.activeBorderTop#006e7f00
  • tab.activeForeground#cbd9de
  • tab.border#002f37
  • tab.inactiveBackground#002126
  • tab.inactiveForeground#407789
  • terminal.ansiBlack#001c20
  • terminal.ansiBlue#085d80
  • terminal.ansiBrightBlack#407789
  • 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#cbd9de
  • terminal.ansiYellow#efc050
  • terminal.background#002126
  • terminal.foreground#cbd9de
  • terminalCursor.foreground#006e7f
  • textLink.activeForeground#ff816e
  • textLink.foreground#ff6b54
  • titleBar.activeBackground#002126
  • titleBar.activeForeground#cbd9de
  • titleBar.border#002f37
  • titleBar.inactiveBackground#002126
  • titleBar.inactiveForeground#407789

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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