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#ebedec
  • activityBar.border#c8cfce
  • activityBar.foreground#2e6f6b
  • activityBar.inactiveForeground#6f8b89
  • activityBarBadge.background#442627
  • activityBarBadge.foreground#f7f7f7
  • badge.background#2e6f6b
  • badge.foreground#f7f7f7
  • breadcrumb.activeSelectionForeground#0a1818
  • breadcrumb.focusForeground#0a1818
  • breadcrumb.foreground#6f8b89
  • button.background#2e6f6b
  • button.foreground#f7f7f7
  • button.hoverBackground#296460
  • button.secondaryBackground#ebedec
  • button.secondaryForeground#0a1818
  • descriptionForeground#6f8b89
  • dropdown.background#f8f9f9
  • dropdown.border#c8cfce
  • dropdown.foreground#0a1818
  • editor.background#f8f9f9
  • editor.findMatchBackground#78be2059
  • editor.findMatchHighlightBackground#78be2026
  • editor.foreground#0a1818
  • editor.inactiveSelectionBackground#2e6f6b1a
  • editor.lineHighlightBackground#2e6f6b14
  • editor.lineHighlightBorder#2e6f6b00
  • editor.selectionBackground#2e6f6b33
  • editor.wordHighlightBackground#2e6f6b26
  • editorBracketMatch.background#2e6f6b33
  • editorBracketMatch.border#2e6f6b80
  • editorCursor.foreground#2e6f6b
  • editorError.foreground#bf1932
  • editorGroup.border#c8cfce
  • editorGroupHeader.tabsBackground#f2f3f3
  • editorGroupHeader.tabsBorder#c8cfce
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0a18182e
  • editorIndentGuide.background#0a181814
  • editorInfo.foreground#442627
  • editorLineNumber.activeForeground#0a1818
  • editorLineNumber.foreground#6f8b89
  • editorRuler.foreground#0a181814
  • editorSuggestWidget.selectedBackground#2e6f6b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0a18181a
  • editorWidget.background#f8f9f9
  • editorWidget.border#c8cfce
  • focusBorder#2e6f6b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#6f8b89
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#6f8b89
  • input.background#f8f9f9
  • input.border#c8cfce
  • input.foreground#0a1818
  • input.placeholderForeground#6f8b89
  • inputOption.activeBorder#2e6f6b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#442627
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#2e6f6b33
  • list.activeSelectionForeground#0a1818
  • list.focusBackground#2e6f6b26
  • list.highlightForeground#2e6f6b
  • list.hoverBackground#2e6f6b1a
  • list.inactiveSelectionBackground#2e6f6b1a
  • minimap.background#f8f9f9
  • minimap.findMatchHighlight#78be2080
  • minimap.selectionHighlight#2e6f6b4d
  • notificationLink.foreground#2e6f6b
  • notifications.background#f8f9f9
  • notifications.foreground#0a1818
  • panel.background#f2f3f3
  • panel.border#c8cfce
  • panelTitle.activeBorder#2e6f6b
  • panelTitle.activeForeground#0a1818
  • panelTitle.inactiveForeground#6f8b89
  • peekView.border#2e6f6b
  • peekViewEditor.background#f2f3f3
  • peekViewResult.background#ebedec
  • peekViewTitle.background#f2f3f3
  • progressBar.background#2e6f6b
  • scrollbar.shadow#050b0b14
  • scrollbarSlider.activeBackground#0a18184d
  • scrollbarSlider.background#0a18181a
  • scrollbarSlider.hoverBackground#0a181833
  • selection.background#2e6f6b33
  • sideBar.background#f2f3f3
  • sideBar.border#c8cfce
  • sideBar.foreground#0a1818
  • sideBarSectionHeader.background#2e6f6b1a
  • sideBarSectionHeader.foreground#0a1818
  • sideBarTitle.foreground#0a1818
  • statusBar.background#2e6f6b
  • statusBar.border#c8cfce
  • statusBar.debuggingBackground#442627
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#f7f7f7
  • statusBar.noFolderBackground#ebedec
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#275e5b
  • statusBarItem.remoteForeground#f7f7f7
  • tab.activeBackground#f8f9f9
  • tab.activeBorder#2e6f6b
  • tab.activeBorderTop#2e6f6b00
  • tab.activeForeground#0a1818
  • tab.border#c8cfce
  • tab.inactiveBackground#f2f3f3
  • tab.inactiveForeground#6f8b89
  • terminal.ansiBlack#0a1818
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#6f8b89
  • 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#f8f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f2f3f3
  • terminal.foreground#0a1818
  • terminalCursor.foreground#2e6f6b
  • textLink.activeForeground#3d2222
  • textLink.foreground#442627
  • titleBar.activeBackground#f2f3f3
  • titleBar.activeForeground#0a1818
  • titleBar.border#c8cfce
  • titleBar.inactiveBackground#f2f3f3
  • titleBar.inactiveForeground#6f8b89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6f8b89italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#2e6f6bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#2e6f6bbold
storage.type, storage.modifier#2e6f6bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4c2a2b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#2e6f6b
string.regexp#4c2a2b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4f7d15
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#003da5bold
variable.other.constant, variable.other.enummember#003da5bold
constant.character.escape#477a77
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#007894italic
entity.name.type.parameter#007894italic
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#0a1818
variable.parameter#0a1818italic
variable.language, variable.language.this, variable.language.self, variable.language.super#2e6f6bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#0a1818
entity.name.class, entity.name.type.class, support.class#5f4b8bbold italic
entity.other.inherited-class#5f4b8bitalic
entity.name.tag, punctuation.definition.tag#2e6f6bbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#477a77
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6f8b89
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#007894italic
support.type.property-name.css, support.type.vendored.property-name.css#007894
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5f4b8bbold
support.constant.property-value.css, support.constant.color.css#003da5
keyword.other.unit.css#4f7d15
support.type.property-name.json#007894
markup.heading, markup.heading entity.name, entity.name.section.markdown#2e6f6bbold
markup.bold#003da5bold
markup.italic#007894italic
markup.inline.raw, markup.raw#4c2a2b
markup.underline.link#786d74
markup.quote#6f8b89italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050