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#e2e8eb
  • activityBar.border#b8c7cf
  • activityBar.foreground#628090
  • activityBar.inactiveForeground#688a9d
  • activityBarBadge.background#e6ab89
  • activityBarBadge.foreground#f2f4f6
  • badge.background#628090
  • badge.foreground#12181b
  • breadcrumb.activeSelectionForeground#12181b
  • breadcrumb.focusForeground#12181b
  • breadcrumb.foreground#688a9d
  • button.background#628090
  • button.foreground#12181b
  • button.hoverBackground#587382
  • button.secondaryBackground#e2e8eb
  • button.secondaryForeground#12181b
  • descriptionForeground#688a9d
  • dropdown.background#f5f7f8
  • dropdown.border#b8c7cf
  • dropdown.foreground#12181b
  • editor.background#f5f7f8
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#12181b
  • editor.inactiveSelectionBackground#6280901a
  • editor.lineHighlightBackground#62809014
  • editor.lineHighlightBorder#62809000
  • editor.selectionBackground#62809033
  • editor.wordHighlightBackground#62809026
  • editorBracketMatch.background#62809033
  • editorBracketMatch.border#62809080
  • editorCursor.foreground#628090
  • editorError.foreground#bf1932
  • editorGroup.border#b8c7cf
  • editorGroupHeader.tabsBackground#ecf0f2
  • editorGroupHeader.tabsBorder#b8c7cf
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#12181b2e
  • editorIndentGuide.background#12181b14
  • editorInfo.foreground#e6ab89
  • editorLineNumber.activeForeground#12181b
  • editorLineNumber.foreground#688a9d
  • editorRuler.foreground#12181b14
  • editorSuggestWidget.selectedBackground#62809026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#12181b1a
  • editorWidget.background#f5f7f8
  • editorWidget.border#b8c7cf
  • focusBorder#62809080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#688a9d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#688a9d
  • input.background#f5f7f8
  • input.border#b8c7cf
  • input.foreground#12181b
  • input.placeholderForeground#688a9d
  • inputOption.activeBorder#628090
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e6ab89
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#62809033
  • list.activeSelectionForeground#12181b
  • list.focusBackground#62809026
  • list.highlightForeground#628090
  • list.hoverBackground#6280901a
  • list.inactiveSelectionBackground#6280901a
  • minimap.background#f5f7f8
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#6280904d
  • notificationLink.foreground#628090
  • notifications.background#f5f7f8
  • notifications.foreground#12181b
  • panel.background#ecf0f2
  • panel.border#b8c7cf
  • panelTitle.activeBorder#628090
  • panelTitle.activeForeground#12181b
  • panelTitle.inactiveForeground#688a9d
  • peekView.border#628090
  • peekViewEditor.background#ecf0f2
  • peekViewResult.background#e2e8eb
  • peekViewTitle.background#ecf0f2
  • progressBar.background#628090
  • scrollbar.shadow#0c101214
  • scrollbarSlider.activeBackground#12181b4d
  • scrollbarSlider.background#12181b1a
  • scrollbarSlider.hoverBackground#12181b33
  • selection.background#62809033
  • sideBar.background#ecf0f2
  • sideBar.border#b8c7cf
  • sideBar.foreground#12181b
  • sideBarSectionHeader.background#6280901a
  • sideBarSectionHeader.foreground#12181b
  • sideBarTitle.foreground#12181b
  • statusBar.background#628090
  • statusBar.border#b8c7cf
  • statusBar.debuggingBackground#e6ab89
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#12181b
  • statusBar.noFolderBackground#e2e8eb
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#536d7a
  • statusBarItem.remoteForeground#12181b
  • tab.activeBackground#f5f7f8
  • tab.activeBorder#628090
  • tab.activeBorderTop#62809000
  • tab.activeForeground#12181b
  • tab.border#b8c7cf
  • tab.inactiveBackground#ecf0f2
  • tab.inactiveForeground#688a9d
  • terminal.ansiBlack#12181b
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#688a9d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f5f7f8
  • terminal.ansiYellow#d4a017
  • terminal.background#ecf0f2
  • terminal.foreground#12181b
  • terminalCursor.foreground#628090
  • textLink.activeForeground#cc987a
  • textLink.foreground#e6ab89
  • titleBar.activeBackground#ecf0f2
  • titleBar.activeForeground#12181b
  • titleBar.border#b8c7cf
  • titleBar.inactiveBackground#ecf0f2
  • titleBar.inactiveForeground#688a9d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#688a9ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#587282bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#587282bold
storage.type, storage.modifier#587282bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#84624e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#587282
string.regexp#84624e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#3d7925
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5f4b8bbold
variable.other.constant, variable.other.enummember#5f4b8bbold
constant.character.escape#5e727e
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#3c6aafitalic
entity.name.type.parameter#3c6aafitalic
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#12181b
variable.parameter#12181bitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#587282italic
variable.other.property, variable.other.object.property, meta.object-literal.key#12181b
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#587282bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#5e727e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#688a9d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#3c6aafitalic
support.type.property-name.css, support.type.vendored.property-name.css#3c6aaf
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#5f4b8b
keyword.other.unit.css#3d7925
support.type.property-name.json#3c6aaf
markup.heading, markup.heading entity.name, entity.name.section.markdown#587282bold
markup.bold#5f4b8bbold
markup.italic#3c6aafitalic
markup.inline.raw, markup.raw#84624e
markup.underline.link#786d74
markup.quote#688a9ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050