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#112525
  • activityBar.border#1c3c3b
  • activityBar.foreground#53b0ae
  • activityBar.inactiveForeground#85a3a2
  • activityBarBadge.background#f3aeb0
  • activityBarBadge.foreground#f7f7f7
  • badge.background#53b0ae
  • badge.foreground#0c1a1a
  • breadcrumb.activeSelectionForeground#dee5e5
  • breadcrumb.focusForeground#dee5e5
  • breadcrumb.foreground#85a3a2
  • button.background#53b0ae
  • button.foreground#0c1a1a
  • button.hoverBackground#64b8b6
  • button.secondaryBackground#162e2d
  • button.secondaryForeground#dee5e5
  • descriptionForeground#85a3a2
  • dropdown.background#112525
  • dropdown.border#1c3c3b
  • dropdown.foreground#dee5e5
  • editor.background#0d1c1c
  • editor.findMatchBackground#78be2066
  • editor.findMatchHighlightBackground#78be2033
  • editor.foreground#dee5e5
  • editor.inactiveSelectionBackground#53b0ae26
  • editor.lineHighlightBackground#53b0ae1a
  • editor.lineHighlightBorder#53b0ae00
  • editor.selectionBackground#53b0ae4d
  • editor.wordHighlightBackground#53b0ae33
  • editorBracketMatch.background#53b0ae40
  • editorBracketMatch.border#53b0ae99
  • editorCursor.foreground#53b0ae
  • editorError.foreground#dd4132
  • editorGroup.border#1c3c3b
  • editorGroupHeader.tabsBackground#112525
  • editorGroupHeader.tabsBorder#1c3c3b
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dee5e533
  • editorIndentGuide.background#dee5e514
  • editorInfo.foreground#f3aeb0
  • editorLineNumber.activeForeground#dee5e5
  • editorLineNumber.foreground#85a3a2
  • editorRuler.foreground#dee5e514
  • editorSuggestWidget.selectedBackground#53b0ae40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dee5e51a
  • editorWidget.background#112525
  • editorWidget.border#1c3c3b
  • focusBorder#53b0ae99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#85a3a2
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#85a3a2
  • input.background#112525
  • input.border#1c3c3b
  • input.foreground#dee5e5
  • input.placeholderForeground#85a3a2
  • inputOption.activeBorder#53b0ae
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#f3aeb0
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#53b0ae4d
  • list.activeSelectionForeground#dee5e5
  • list.focusBackground#53b0ae33
  • list.highlightForeground#53b0ae
  • list.hoverBackground#53b0ae26
  • list.inactiveSelectionBackground#53b0ae26
  • minimap.background#0d1c1c
  • minimap.findMatchHighlight#78be2099
  • minimap.selectionHighlight#53b0ae66
  • notificationLink.foreground#53b0ae
  • notifications.background#162e2d
  • notifications.foreground#dee5e5
  • panel.background#112525
  • panel.border#1c3c3b
  • panelTitle.activeBorder#53b0ae
  • panelTitle.activeForeground#dee5e5
  • panelTitle.inactiveForeground#85a3a2
  • peekView.border#53b0ae
  • peekViewEditor.background#112525
  • peekViewResult.background#162e2d
  • peekViewTitle.background#112525
  • progressBar.background#53b0ae
  • scrollbar.shadow#08121145
  • scrollbarSlider.activeBackground#dee5e559
  • scrollbarSlider.background#dee5e51f
  • scrollbarSlider.hoverBackground#dee5e540
  • selection.background#53b0ae4d
  • sideBar.background#162e2d
  • sideBar.border#1c3c3b
  • sideBar.foreground#dee5e5
  • sideBarSectionHeader.background#53b0ae26
  • sideBarSectionHeader.foreground#dee5e5
  • sideBarTitle.foreground#dee5e5
  • statusBar.background#326a68
  • statusBar.border#1c3c3b
  • statusBar.debuggingBackground#f3aeb0
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#98d0ce
  • statusBar.noFolderBackground#112525
  • statusBarItem.hoverBackground#53b0ae4d
  • statusBarItem.remoteBackground#53b0ae
  • statusBarItem.remoteForeground#0c1a1a
  • tab.activeBackground#0d1c1c
  • tab.activeBorder#53b0ae
  • tab.activeBorderTop#53b0ae00
  • tab.activeForeground#dee5e5
  • tab.border#1c3c3b
  • tab.inactiveBackground#112525
  • tab.inactiveForeground#85a3a2
  • terminal.ansiBlack#0d1c1c
  • terminal.ansiBlue#317e98
  • terminal.ansiBrightBlack#85a3a2
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#dee5e5
  • terminal.ansiYellow#efc050
  • terminal.background#112525
  • terminal.foreground#dee5e5
  • terminalCursor.foreground#53b0ae
  • textLink.activeForeground#f5babc
  • textLink.foreground#f3aeb0
  • titleBar.activeBackground#112525
  • titleBar.activeForeground#dee5e5
  • titleBar.border#1c3c3b
  • titleBar.inactiveBackground#112525
  • titleBar.inactiveForeground#85a3a2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#85a3a2italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#53b0aebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#53b0aebold
storage.type, storage.modifier#53b0aebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#f3aeb0
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#53b0ae
string.regexp#f3aeb0
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#78be20
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#92a8d1bold
variable.other.constant, variable.other.enummember#92a8d1bold
constant.character.escape#6dbcba
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#99d6eaitalic
entity.name.type.parameter#99d6eaitalic
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#dee5e5
variable.parameter#dee5e5italic
variable.language, variable.language.this, variable.language.self, variable.language.super#53b0aeitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#dee5e5
entity.name.class, entity.name.type.class, support.class#8d7dacbold italic
entity.other.inherited-class#8d7dacitalic
entity.name.tag, punctuation.definition.tag#53b0aebold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6dbcba
punctuation, punctuation.separator, punctuation.terminator, meta.brace#85a3a2
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#99d6eaitalic
support.type.property-name.css, support.type.vendored.property-name.css#99d6ea
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8d7dacbold
support.constant.property-value.css, support.constant.color.css#92a8d1
keyword.other.unit.css#78be20
support.type.property-name.json#99d6ea
markup.heading, markup.heading entity.name, entity.name.section.markdown#53b0aebold
markup.bold#92a8d1bold
markup.italic#99d6eaitalic
markup.inline.raw, markup.raw#f3aeb0
markup.underline.link#e8d4e2
markup.quote#85a3a2italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme