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#dee0e2
  • activityBar.border#abafb8
  • activityBar.foreground#1b368c
  • activityBar.inactiveForeground#3a476d
  • activityBarBadge.background#e6b328
  • activityBarBadge.foreground#f1f1f2
  • badge.background#1b368c
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#060c1f
  • breadcrumb.focusForeground#060c1f
  • breadcrumb.foreground#3a476d
  • button.background#1b368c
  • button.foreground#f1f1f2
  • button.hoverBackground#18317e
  • button.secondaryBackground#dee0e2
  • button.secondaryForeground#060c1f
  • descriptionForeground#3a476d
  • dropdown.background#f4f5f5
  • dropdown.border#abafb8
  • dropdown.foreground#060c1f
  • editor.background#f4f5f5
  • editor.findMatchBackground#b163a359
  • editor.findMatchHighlightBackground#b163a326
  • editor.foreground#060c1f
  • editor.inactiveSelectionBackground#1b368c1a
  • editor.lineHighlightBackground#1b368c14
  • editor.lineHighlightBorder#1b368c00
  • editor.selectionBackground#1b368c33
  • editor.wordHighlightBackground#1b368c26
  • editorBracketMatch.background#1b368c33
  • editorBracketMatch.border#1b368c80
  • editorCursor.foreground#1b368c
  • editorError.foreground#bf1932
  • editorGroup.border#abafb8
  • editorGroupHeader.tabsBackground#e9eaec
  • editorGroupHeader.tabsBorder#abafb8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#060c1f2e
  • editorIndentGuide.background#060c1f14
  • editorInfo.foreground#e6b328
  • editorLineNumber.activeForeground#060c1f
  • editorLineNumber.foreground#3a476d
  • editorRuler.foreground#060c1f14
  • editorSuggestWidget.selectedBackground#1b368c26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#060c1f1a
  • editorWidget.background#f4f5f5
  • editorWidget.border#abafb8
  • focusBorder#1b368c80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#3a476d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#3a476d
  • input.background#f4f5f5
  • input.border#abafb8
  • input.foreground#060c1f
  • input.placeholderForeground#3a476d
  • inputOption.activeBorder#1b368c
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e6b328
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#1b368c33
  • list.activeSelectionForeground#060c1f
  • list.focusBackground#1b368c26
  • list.highlightForeground#1b368c
  • list.hoverBackground#1b368c1a
  • list.inactiveSelectionBackground#1b368c1a
  • minimap.background#f4f5f5
  • minimap.findMatchHighlight#b163a380
  • minimap.selectionHighlight#1b368c4d
  • notificationLink.foreground#1b368c
  • notifications.background#f4f5f5
  • notifications.foreground#060c1f
  • panel.background#e9eaec
  • panel.border#abafb8
  • panelTitle.activeBorder#1b368c
  • panelTitle.activeForeground#060c1f
  • panelTitle.inactiveForeground#3a476d
  • peekView.border#1b368c
  • peekViewEditor.background#e9eaec
  • peekViewResult.background#dee0e2
  • peekViewTitle.background#e9eaec
  • progressBar.background#1b368c
  • scrollbar.shadow#03050e14
  • scrollbarSlider.activeBackground#060c1f4d
  • scrollbarSlider.background#060c1f1a
  • scrollbarSlider.hoverBackground#060c1f33
  • selection.background#1b368c33
  • sideBar.background#e9eaec
  • sideBar.border#abafb8
  • sideBar.foreground#060c1f
  • sideBarSectionHeader.background#1b368c1a
  • sideBarSectionHeader.foreground#060c1f
  • sideBarTitle.foreground#060c1f
  • statusBar.background#1b368c
  • statusBar.border#abafb8
  • statusBar.debuggingBackground#e6b328
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#dee0e2
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#172e77
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f4f5f5
  • tab.activeBorder#1b368c
  • tab.activeBorderTop#1b368c00
  • tab.activeForeground#060c1f
  • tab.border#abafb8
  • tab.inactiveBackground#e9eaec
  • tab.inactiveForeground#3a476d
  • terminal.ansiBlack#060c1f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#3a476d
  • 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#f4f5f5
  • terminal.ansiYellow#d4a017
  • terminal.background#e9eaec
  • terminal.foreground#060c1f
  • terminalCursor.foreground#1b368c
  • textLink.activeForeground#cc9f23
  • textLink.foreground#e6b328
  • titleBar.activeBackground#e9eaec
  • titleBar.activeForeground#060c1f
  • titleBar.border#abafb8
  • titleBar.inactiveBackground#e9eaec
  • titleBar.inactiveForeground#3a476d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3a476ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#1b368cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#1b368cbold
storage.type, storage.modifier#1b368cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#846617
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#1b368c
string.regexp#846617
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#96548a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#367472bold
variable.other.constant, variable.other.enummember#367472bold
constant.character.escape#3d549d
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#060c1f
variable.parameter#060c1fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#1b368citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#060c1f
entity.name.class, entity.name.type.class, support.class#007f2ebold italic
entity.other.inherited-class#007f2eitalic
entity.name.tag, punctuation.definition.tag#1b368cbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#3d549d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3a476d
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#007f2ebold
support.constant.property-value.css, support.constant.color.css#367472
keyword.other.unit.css#96548a
support.type.property-name.json#5e6f81
markup.heading, markup.heading entity.name, entity.name.section.markdown#1b368cbold
markup.bold#367472bold
markup.italic#5e6f81italic
markup.inline.raw, markup.raw#846617
markup.underline.link#7f6666
markup.quote#3a476ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050