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#dedfe1
  • activityBar.border#abaeb6
  • activityBar.foreground#1b2a6b
  • activityBar.inactiveForeground#3a4360
  • activityBarBadge.background#ddc945
  • activityBarBadge.foreground#f1f1f2
  • badge.background#1b2a6b
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#060918
  • breadcrumb.focusForeground#060918
  • breadcrumb.foreground#3a4360
  • button.background#1b2a6b
  • button.foreground#f1f1f2
  • button.hoverBackground#182660
  • button.secondaryBackground#dedfe1
  • button.secondaryForeground#060918
  • descriptionForeground#3a4360
  • dropdown.background#f4f4f5
  • dropdown.border#abaeb6
  • dropdown.foreground#060918
  • editor.background#f4f4f5
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#060918
  • editor.inactiveSelectionBackground#1b2a6b1a
  • editor.lineHighlightBackground#1b2a6b14
  • editor.lineHighlightBorder#1b2a6b00
  • editor.selectionBackground#1b2a6b33
  • editor.wordHighlightBackground#1b2a6b26
  • editorBracketMatch.background#1b2a6b33
  • editorBracketMatch.border#1b2a6b80
  • editorCursor.foreground#1b2a6b
  • editorError.foreground#bf1932
  • editorGroup.border#abaeb6
  • editorGroupHeader.tabsBackground#e9eaeb
  • editorGroupHeader.tabsBorder#abaeb6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0609182e
  • editorIndentGuide.background#06091814
  • editorInfo.foreground#ddc945
  • editorLineNumber.activeForeground#060918
  • editorLineNumber.foreground#3a4360
  • editorRuler.foreground#06091814
  • editorSuggestWidget.selectedBackground#1b2a6b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0609181a
  • editorWidget.background#f4f4f5
  • editorWidget.border#abaeb6
  • focusBorder#1b2a6b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#3a4360
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#3a4360
  • input.background#f4f4f5
  • input.border#abaeb6
  • input.foreground#060918
  • input.placeholderForeground#3a4360
  • inputOption.activeBorder#1b2a6b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#ddc945
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#1b2a6b33
  • list.activeSelectionForeground#060918
  • list.focusBackground#1b2a6b26
  • list.highlightForeground#1b2a6b
  • list.hoverBackground#1b2a6b1a
  • list.inactiveSelectionBackground#1b2a6b1a
  • minimap.background#f4f4f5
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#1b2a6b4d
  • notificationLink.foreground#1b2a6b
  • notifications.background#f4f4f5
  • notifications.foreground#060918
  • panel.background#e9eaeb
  • panel.border#abaeb6
  • panelTitle.activeBorder#1b2a6b
  • panelTitle.activeForeground#060918
  • panelTitle.inactiveForeground#3a4360
  • peekView.border#1b2a6b
  • peekViewEditor.background#e9eaeb
  • peekViewResult.background#dedfe1
  • peekViewTitle.background#e9eaeb
  • progressBar.background#1b2a6b
  • scrollbar.shadow#03040b14
  • scrollbarSlider.activeBackground#0609184d
  • scrollbarSlider.background#0609181a
  • scrollbarSlider.hoverBackground#06091833
  • selection.background#1b2a6b33
  • sideBar.background#e9eaeb
  • sideBar.border#abaeb6
  • sideBar.foreground#060918
  • sideBarSectionHeader.background#1b2a6b1a
  • sideBarSectionHeader.foreground#060918
  • sideBarTitle.foreground#060918
  • statusBar.background#1b2a6b
  • statusBar.border#abaeb6
  • statusBar.debuggingBackground#ddc945
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#dedfe1
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#17245b
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f4f4f5
  • tab.activeBorder#1b2a6b
  • tab.activeBorderTop#1b2a6b00
  • tab.activeForeground#060918
  • tab.border#abaeb6
  • tab.inactiveBackground#e9eaeb
  • tab.inactiveForeground#3a4360
  • terminal.ansiBlack#060918
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#3a4360
  • 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#f4f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#e9eaeb
  • terminal.foreground#060918
  • terminalCursor.foreground#1b2a6b
  • textLink.activeForeground#c4b23e
  • textLink.foreground#ddc945
  • titleBar.activeBackground#e9eaeb
  • titleBar.activeForeground#060918
  • titleBar.border#abaeb6
  • titleBar.inactiveBackground#e9eaeb
  • titleBar.inactiveForeground#3a4360

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3a4360italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#1b2a6bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#1b2a6bbold
storage.type, storage.modifier#1b2a6bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#736925
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#1b2a6b
string.regexp#736925
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#006e7fbold
variable.other.constant, variable.other.enummember#006e7fbold
constant.character.escape#3d4a81
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#5e6f81italic
entity.name.type.parameter#5e6f81italic
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#060918
variable.parameter#060918italic
variable.language, variable.language.this, variable.language.self, variable.language.super#1b2a6bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#060918
entity.name.class, entity.name.type.class, support.class#96548abold italic
entity.other.inherited-class#96548aitalic
entity.name.tag, punctuation.definition.tag#1b2a6bbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#3d4a81
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3a4360
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5e6f81italic
support.type.property-name.css, support.type.vendored.property-name.css#5e6f81
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#96548abold
support.constant.property-value.css, support.constant.color.css#006e7f
keyword.other.unit.css#007f2e
support.type.property-name.json#5e6f81
markup.heading, markup.heading entity.name, entity.name.section.markdown#1b2a6bbold
markup.bold#006e7fbold
markup.italic#5e6f81italic
markup.inline.raw, markup.raw#736925
markup.underline.link#7f6666
markup.quote#3a4360italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050