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#e0e0e2
  • activityBar.border#b1b1b8
  • activityBar.foreground#5f4b8b
  • activityBar.inactiveForeground#55506c
  • activityBarBadge.background#88c200
  • activityBarBadge.foreground#f1f1f2
  • badge.background#5f4b8b
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#15101f
  • breadcrumb.focusForeground#15101f
  • breadcrumb.foreground#55506c
  • button.background#5f4b8b
  • button.foreground#f1f1f2
  • button.hoverBackground#56447d
  • button.secondaryBackground#e0e0e2
  • button.secondaryForeground#15101f
  • descriptionForeground#55506c
  • dropdown.background#f5f5f5
  • dropdown.border#b1b1b8
  • dropdown.foreground#15101f
  • editor.background#f5f5f5
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#15101f
  • editor.inactiveSelectionBackground#5f4b8b1a
  • editor.lineHighlightBackground#5f4b8b14
  • editor.lineHighlightBorder#5f4b8b00
  • editor.selectionBackground#5f4b8b33
  • editor.wordHighlightBackground#5f4b8b26
  • editorBracketMatch.background#5f4b8b33
  • editorBracketMatch.border#5f4b8b80
  • editorCursor.foreground#5f4b8b
  • editorError.foreground#bf1932
  • editorGroup.border#b1b1b8
  • editorGroupHeader.tabsBackground#eaeaec
  • editorGroupHeader.tabsBorder#b1b1b8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#15101f2e
  • editorIndentGuide.background#15101f14
  • editorInfo.foreground#88c200
  • editorLineNumber.activeForeground#15101f
  • editorLineNumber.foreground#55506c
  • editorRuler.foreground#15101f14
  • editorSuggestWidget.selectedBackground#5f4b8b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#15101f1a
  • editorWidget.background#f5f5f5
  • editorWidget.border#b1b1b8
  • focusBorder#5f4b8b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#55506c
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#55506c
  • input.background#f5f5f5
  • input.border#b1b1b8
  • input.foreground#15101f
  • input.placeholderForeground#55506c
  • inputOption.activeBorder#5f4b8b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#88c200
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5f4b8b33
  • list.activeSelectionForeground#15101f
  • list.focusBackground#5f4b8b26
  • list.highlightForeground#5f4b8b
  • list.hoverBackground#5f4b8b1a
  • list.inactiveSelectionBackground#5f4b8b1a
  • minimap.background#f5f5f5
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#5f4b8b4d
  • notificationLink.foreground#5f4b8b
  • notifications.background#f5f5f5
  • notifications.foreground#15101f
  • panel.background#eaeaec
  • panel.border#b1b1b8
  • panelTitle.activeBorder#5f4b8b
  • panelTitle.activeForeground#15101f
  • panelTitle.inactiveForeground#55506c
  • peekView.border#5f4b8b
  • peekViewEditor.background#eaeaec
  • peekViewResult.background#e0e0e2
  • peekViewTitle.background#eaeaec
  • progressBar.background#5f4b8b
  • scrollbar.shadow#09070e14
  • scrollbarSlider.activeBackground#15101f4d
  • scrollbarSlider.background#15101f1a
  • scrollbarSlider.hoverBackground#15101f33
  • selection.background#5f4b8b33
  • sideBar.background#eaeaec
  • sideBar.border#b1b1b8
  • sideBar.foreground#15101f
  • sideBarSectionHeader.background#5f4b8b1a
  • sideBarSectionHeader.foreground#15101f
  • sideBarTitle.foreground#15101f
  • statusBar.background#5f4b8b
  • statusBar.border#b1b1b8
  • statusBar.debuggingBackground#88c200
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#e0e0e2
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#514076
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f5f5f5
  • tab.activeBorder#5f4b8b
  • tab.activeBorderTop#5f4b8b00
  • tab.activeForeground#15101f
  • tab.border#b1b1b8
  • tab.inactiveBackground#eaeaec
  • tab.inactiveForeground#55506c
  • terminal.ansiBlack#15101f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#55506c
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#d4a017
  • terminal.background#eaeaec
  • terminal.foreground#15101f
  • terminalCursor.foreground#5f4b8b
  • textLink.activeForeground#79ac00
  • textLink.foreground#88c200
  • titleBar.activeBackground#eaeaec
  • titleBar.activeForeground#15101f
  • titleBar.border#b1b1b8
  • titleBar.inactiveBackground#eaeaec
  • titleBar.inactiveForeground#55506c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#55506citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5f4b8bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5f4b8bbold
storage.type, storage.modifier#5f4b8bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#557900
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5f4b8b
string.regexp#557900
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#003da5bold
variable.other.constant, variable.other.enummember#003da5bold
constant.character.escape#77669c
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#6667abitalic
entity.name.type.parameter#6667abitalic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#15101f
variable.parameter#15101fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#5f4b8bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#15101f
entity.name.class, entity.name.type.class, support.class#367472bold italic
entity.other.inherited-class#367472italic
entity.name.tag, punctuation.definition.tag#5f4b8bbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#77669c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#55506c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6667abitalic
support.type.property-name.css, support.type.vendored.property-name.css#6667ab
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#367472bold
support.constant.property-value.css, support.constant.color.css#003da5
keyword.other.unit.css#007f2e
support.type.property-name.json#6667ab
markup.heading, markup.heading entity.name, entity.name.section.markdown#5f4b8bbold
markup.bold#003da5bold
markup.italic#6667abitalic
markup.inline.raw, markup.raw#557900
markup.underline.link#7f6666
markup.quote#55506citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050