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#ececec
  • activityBar.border#cecfd0
  • activityBar.foreground#767779
  • activityBar.inactiveForeground#939597
  • activityBarBadge.background#e69945
  • activityBarBadge.foreground#f6f7f7
  • badge.background#767779
  • badge.foreground#161617
  • breadcrumb.activeSelectionForeground#161617
  • breadcrumb.focusForeground#161617
  • breadcrumb.foreground#939597
  • button.background#767779
  • button.foreground#161617
  • button.hoverBackground#6a6b6d
  • button.secondaryBackground#ececec
  • button.secondaryForeground#161617
  • descriptionForeground#939597
  • dropdown.background#f9f9f9
  • dropdown.border#cecfd0
  • dropdown.foreground#161617
  • editor.background#f9f9f9
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#161617
  • editor.inactiveSelectionBackground#7677791a
  • editor.lineHighlightBackground#76777914
  • editor.lineHighlightBorder#76777900
  • editor.selectionBackground#76777933
  • editor.wordHighlightBackground#76777926
  • editorBracketMatch.background#76777933
  • editorBracketMatch.border#76777980
  • editorCursor.foreground#767779
  • editorError.foreground#bf1932
  • editorGroup.border#cecfd0
  • editorGroupHeader.tabsBackground#f2f2f3
  • editorGroupHeader.tabsBorder#cecfd0
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1616172e
  • editorIndentGuide.background#16161714
  • editorInfo.foreground#e69945
  • editorLineNumber.activeForeground#161617
  • editorLineNumber.foreground#939597
  • editorRuler.foreground#16161714
  • editorSuggestWidget.selectedBackground#76777926
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1616171a
  • editorWidget.background#f9f9f9
  • editorWidget.border#cecfd0
  • focusBorder#76777980
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#939597
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#939597
  • input.background#f9f9f9
  • input.border#cecfd0
  • input.foreground#161617
  • input.placeholderForeground#939597
  • inputOption.activeBorder#767779
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e69945
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#76777933
  • list.activeSelectionForeground#161617
  • list.focusBackground#76777926
  • list.highlightForeground#767779
  • list.hoverBackground#7677791a
  • list.inactiveSelectionBackground#7677791a
  • minimap.background#f9f9f9
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#7677794d
  • notificationLink.foreground#767779
  • notifications.background#f9f9f9
  • notifications.foreground#161617
  • panel.background#f2f2f3
  • panel.border#cecfd0
  • panelTitle.activeBorder#767779
  • panelTitle.activeForeground#161617
  • panelTitle.inactiveForeground#939597
  • peekView.border#767779
  • peekViewEditor.background#f2f2f3
  • peekViewResult.background#ececec
  • peekViewTitle.background#f2f2f3
  • progressBar.background#767779
  • scrollbar.shadow#0f0f0f14
  • scrollbarSlider.activeBackground#1616174d
  • scrollbarSlider.background#1616171a
  • scrollbarSlider.hoverBackground#16161733
  • selection.background#76777933
  • sideBar.background#f2f2f3
  • sideBar.border#cecfd0
  • sideBar.foreground#161617
  • sideBarSectionHeader.background#7677791a
  • sideBarSectionHeader.foreground#161617
  • sideBarTitle.foreground#161617
  • statusBar.background#767779
  • statusBar.border#cecfd0
  • statusBar.debuggingBackground#e69945
  • statusBar.debuggingForeground#f6f7f7
  • statusBar.foreground#161617
  • statusBar.noFolderBackground#ececec
  • statusBarItem.hoverBackground#f6f7f733
  • statusBarItem.remoteBackground#646567
  • statusBarItem.remoteForeground#161617
  • tab.activeBackground#f9f9f9
  • tab.activeBorder#767779
  • tab.activeBorderTop#76777900
  • tab.activeForeground#161617
  • tab.border#cecfd0
  • tab.inactiveBackground#f2f2f3
  • tab.inactiveForeground#939597
  • terminal.ansiBlack#161617
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#939597
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f6f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f9f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f2f2f3
  • terminal.foreground#161617
  • terminalCursor.foreground#767779
  • textLink.activeForeground#cc883e
  • textLink.foreground#e69945
  • titleBar.activeBackground#f2f2f3
  • titleBar.activeForeground#161617
  • titleBar.border#cecfd0
  • titleBar.inactiveBackground#f2f2f3
  • titleBar.inactiveForeground#939597

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#939597italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#696b6dbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#696b6dbold
storage.type, storage.modifier#696b6dbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#9b662f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#696b6d
string.regexp#9b662f
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#007d62bold
variable.other.constant, variable.other.enummember#007d62bold
constant.character.escape#6c6d6f
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#4f6f79italic
entity.name.type.parameter#4f6f79italic
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#161617
variable.parameter#161617italic
variable.language, variable.language.this, variable.language.self, variable.language.super#696b6ditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#161617
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#696b6dbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6c6d6f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#939597
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4f6f79italic
support.type.property-name.css, support.type.vendored.property-name.css#4f6f79
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#007d62
keyword.other.unit.css#38793a
support.type.property-name.json#4f6f79
markup.heading, markup.heading entity.name, entity.name.section.markdown#696b6dbold
markup.bold#007d62bold
markup.italic#4f6f79italic
markup.inline.raw, markup.raw#9b662f
markup.underline.link#786d74
markup.quote#939597italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050