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#1e2526
  • activityBar.border#354144
  • activityBar.foreground#b0d7e1
  • activityBar.inactiveForeground#7597a6
  • activityBarBadge.background#f7a08b
  • activityBarBadge.foreground#f2f4f6
  • badge.background#b0d7e1
  • badge.foreground#1a2022
  • breadcrumb.activeSelectionForeground#d7e0e5
  • breadcrumb.focusForeground#d7e0e5
  • breadcrumb.foreground#7597a6
  • button.background#b0d7e1
  • button.foreground#1a2022
  • button.hoverBackground#b8dbe4
  • button.secondaryBackground#272f31
  • button.secondaryForeground#d7e0e5
  • descriptionForeground#7597a6
  • dropdown.background#1e2526
  • dropdown.border#354144
  • dropdown.foreground#d7e0e5
  • editor.background#151a1b
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#d7e0e5
  • editor.inactiveSelectionBackground#b0d7e126
  • editor.lineHighlightBackground#b0d7e11a
  • editor.lineHighlightBorder#b0d7e100
  • editor.selectionBackground#b0d7e14d
  • editor.wordHighlightBackground#b0d7e133
  • editorBracketMatch.background#b0d7e140
  • editorBracketMatch.border#b0d7e199
  • editorCursor.foreground#b0d7e1
  • editorError.foreground#dd4132
  • editorGroup.border#354144
  • editorGroupHeader.tabsBackground#1e2526
  • editorGroupHeader.tabsBorder#354144
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d7e0e533
  • editorIndentGuide.background#d7e0e514
  • editorInfo.foreground#f7a08b
  • editorLineNumber.activeForeground#d7e0e5
  • editorLineNumber.foreground#7597a6
  • editorRuler.foreground#d7e0e514
  • editorSuggestWidget.selectedBackground#b0d7e140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d7e0e51a
  • editorWidget.background#1e2526
  • editorWidget.border#354144
  • focusBorder#b0d7e199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#7597a6
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#7597a6
  • input.background#1e2526
  • input.border#354144
  • input.foreground#d7e0e5
  • input.placeholderForeground#7597a6
  • inputOption.activeBorder#b0d7e1
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#f7a08b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#b0d7e14d
  • list.activeSelectionForeground#d7e0e5
  • list.focusBackground#b0d7e133
  • list.highlightForeground#b0d7e1
  • list.hoverBackground#b0d7e126
  • list.inactiveSelectionBackground#b0d7e126
  • minimap.background#151a1b
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#b0d7e166
  • notificationLink.foreground#b0d7e1
  • notifications.background#272f31
  • notifications.foreground#d7e0e5
  • panel.background#1e2526
  • panel.border#354144
  • panelTitle.activeBorder#b0d7e1
  • panelTitle.activeForeground#d7e0e5
  • panelTitle.inactiveForeground#7597a6
  • peekView.border#b0d7e1
  • peekViewEditor.background#1e2526
  • peekViewResult.background#272f31
  • peekViewTitle.background#1e2526
  • progressBar.background#b0d7e1
  • scrollbar.shadow#12151645
  • scrollbarSlider.activeBackground#d7e0e559
  • scrollbarSlider.background#d7e0e51f
  • scrollbarSlider.hoverBackground#d7e0e540
  • selection.background#b0d7e14d
  • sideBar.background#272f31
  • sideBar.border#354144
  • sideBar.foreground#d7e0e5
  • sideBarSectionHeader.background#b0d7e126
  • sideBarSectionHeader.foreground#d7e0e5
  • sideBarTitle.foreground#d7e0e5
  • statusBar.background#6a8187
  • statusBar.border#354144
  • statusBar.debuggingBackground#f7a08b
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#d0e7ed
  • statusBar.noFolderBackground#1e2526
  • statusBarItem.hoverBackground#b0d7e14d
  • statusBarItem.remoteBackground#b0d7e1
  • statusBarItem.remoteForeground#1a2022
  • tab.activeBackground#151a1b
  • tab.activeBorder#b0d7e1
  • tab.activeBorderTop#b0d7e100
  • tab.activeForeground#d7e0e5
  • tab.border#354144
  • tab.inactiveBackground#1e2526
  • tab.inactiveForeground#7597a6
  • terminal.ansiBlack#151a1b
  • terminal.ansiBlue#6092b1
  • terminal.ansiBrightBlack#7597a6
  • 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#d7e0e5
  • terminal.ansiYellow#efc050
  • terminal.background#1e2526
  • terminal.foreground#d7e0e5
  • terminalCursor.foreground#b0d7e1
  • textLink.activeForeground#f8ae9c
  • textLink.foreground#f7a08b
  • titleBar.activeBackground#1e2526
  • titleBar.activeForeground#d7e0e5
  • titleBar.border#354144
  • titleBar.inactiveBackground#1e2526
  • titleBar.inactiveForeground#7597a6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7597a6italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b0d7e1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b0d7e1bold
storage.type, storage.modifier#b0d7e1bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#f7a08b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#b0d7e1
string.regexp#f7a08b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7d7eb8bold
variable.other.constant, variable.other.enummember#7d7eb8bold
constant.character.escape#bcdde6
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#6188acitalic
entity.name.type.parameter#6188acitalic
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#d7e0e5
variable.parameter#d7e0e5italic
variable.language, variable.language.this, variable.language.self, variable.language.super#b0d7e1italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d7e0e5
entity.name.class, entity.name.type.class, support.class#a474bfbold italic
entity.other.inherited-class#a474bfitalic
entity.name.tag, punctuation.definition.tag#b0d7e1bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#bcdde6
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7597a6
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6188acitalic
support.type.property-name.css, support.type.vendored.property-name.css#6188ac
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a474bfbold
support.constant.property-value.css, support.constant.color.css#7d7eb8
keyword.other.unit.css#4e9a2f
support.type.property-name.json#6188ac
markup.heading, markup.heading entity.name, entity.name.section.markdown#b0d7e1bold
markup.bold#7d7eb8bold
markup.italic#6188acitalic
markup.inline.raw, markup.raw#f7a08b
markup.underline.link#e8d4e2
markup.quote#7597a6italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme