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#a8b0bb
  • activityBar.foreground#003da5
  • activityBar.inactiveForeground#2f4a77
  • activityBarBadge.background#d19d46
  • activityBarBadge.foreground#f1f1f2
  • badge.background#003da5
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#000d24
  • breadcrumb.focusForeground#000d24
  • breadcrumb.foreground#2f4a77
  • button.background#003da5
  • button.foreground#f1f1f2
  • button.hoverBackground#003795
  • button.secondaryBackground#dee0e2
  • button.secondaryForeground#000d24
  • descriptionForeground#2f4a77
  • dropdown.background#f4f5f5
  • dropdown.border#a8b0bb
  • dropdown.foreground#000d24
  • editor.background#f4f5f5
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#000d24
  • editor.inactiveSelectionBackground#003da51a
  • editor.lineHighlightBackground#003da514
  • editor.lineHighlightBorder#003da500
  • editor.selectionBackground#003da533
  • editor.wordHighlightBackground#003da526
  • editorBracketMatch.background#003da533
  • editorBracketMatch.border#003da580
  • editorCursor.foreground#003da5
  • editorError.foreground#bf1932
  • editorGroup.border#a8b0bb
  • editorGroupHeader.tabsBackground#e9eaec
  • editorGroupHeader.tabsBorder#a8b0bb
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#000d242e
  • editorIndentGuide.background#000d2414
  • editorInfo.foreground#d19d46
  • editorLineNumber.activeForeground#000d24
  • editorLineNumber.foreground#2f4a77
  • editorRuler.foreground#000d2414
  • editorSuggestWidget.selectedBackground#003da526
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#000d241a
  • editorWidget.background#f4f5f5
  • editorWidget.border#a8b0bb
  • focusBorder#003da580
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#2f4a77
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#2f4a77
  • input.background#f4f5f5
  • input.border#a8b0bb
  • input.foreground#000d24
  • input.placeholderForeground#2f4a77
  • inputOption.activeBorder#003da5
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#d19d46
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#003da533
  • list.activeSelectionForeground#000d24
  • list.focusBackground#003da526
  • list.highlightForeground#003da5
  • list.hoverBackground#003da51a
  • list.inactiveSelectionBackground#003da51a
  • minimap.background#f4f5f5
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#003da54d
  • notificationLink.foreground#003da5
  • notifications.background#f4f5f5
  • notifications.foreground#000d24
  • panel.background#e9eaec
  • panel.border#a8b0bb
  • panelTitle.activeBorder#003da5
  • panelTitle.activeForeground#000d24
  • panelTitle.inactiveForeground#2f4a77
  • peekView.border#003da5
  • peekViewEditor.background#e9eaec
  • peekViewResult.background#dee0e2
  • peekViewTitle.background#e9eaec
  • progressBar.background#003da5
  • scrollbar.shadow#00061014
  • scrollbarSlider.activeBackground#000d244d
  • scrollbarSlider.background#000d241a
  • scrollbarSlider.hoverBackground#000d2433
  • selection.background#003da533
  • sideBar.background#e9eaec
  • sideBar.border#a8b0bb
  • sideBar.foreground#000d24
  • sideBarSectionHeader.background#003da51a
  • sideBarSectionHeader.foreground#000d24
  • sideBarTitle.foreground#000d24
  • statusBar.background#003da5
  • statusBar.border#a8b0bb
  • statusBar.debuggingBackground#d19d46
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#dee0e2
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#00348c
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f4f5f5
  • tab.activeBorder#003da5
  • tab.activeBorderTop#003da500
  • tab.activeForeground#000d24
  • tab.border#a8b0bb
  • tab.inactiveBackground#e9eaec
  • tab.inactiveForeground#2f4a77
  • terminal.ansiBlack#000d24
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#2f4a77
  • 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#000d24
  • terminalCursor.foreground#003da5
  • textLink.activeForeground#ba8b3e
  • textLink.foreground#d19d46
  • titleBar.activeBackground#e9eaec
  • titleBar.activeForeground#000d24
  • titleBar.border#a8b0bb
  • titleBar.inactiveBackground#e9eaec
  • titleBar.inactiveForeground#2f4a77

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#2f4a77italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#003da5bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#003da5bold
storage.type, storage.modifier#003da5bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#8d6930
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#003da5
string.regexp#8d6930
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5f4b8bbold
variable.other.constant, variable.other.enummember#5f4b8bbold
constant.character.escape#265ab3
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#547182italic
entity.name.type.parameter#547182italic
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#000d24
variable.parameter#000d24italic
variable.language, variable.language.this, variable.language.self, variable.language.super#003da5italic
variable.other.property, variable.other.object.property, meta.object-literal.key#000d24
entity.name.class, entity.name.type.class, support.class#96548abold italic
entity.other.inherited-class#96548aitalic
entity.name.tag, punctuation.definition.tag#003da5bold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#265ab3
punctuation, punctuation.separator, punctuation.terminator, meta.brace#2f4a77
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#547182italic
support.type.property-name.css, support.type.vendored.property-name.css#547182
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#96548abold
support.constant.property-value.css, support.constant.color.css#5f4b8b
keyword.other.unit.css#38793a
support.type.property-name.json#547182
markup.heading, markup.heading entity.name, entity.name.section.markdown#003da5bold
markup.bold#5f4b8bbold
markup.italic#547182italic
markup.inline.raw, markup.raw#8d6930
markup.underline.link#7f6666
markup.quote#2f4a77italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050