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#dfe0e1
  • activityBar.border#afb2b4
  • activityBar.foreground#4e5358
  • activityBar.inactiveForeground#4e5358
  • activityBarBadge.background#e69945
  • activityBarBadge.foreground#f1f1f2
  • badge.background#4e5358
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#111213
  • breadcrumb.focusForeground#111213
  • breadcrumb.foreground#4e5358
  • button.background#4e5358
  • button.foreground#f1f1f2
  • button.hoverBackground#464b4f
  • button.secondaryBackground#dfe0e1
  • button.secondaryForeground#111213
  • descriptionForeground#4e5358
  • dropdown.background#f4f5f5
  • dropdown.border#afb2b4
  • dropdown.foreground#111213
  • editor.background#f4f5f5
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#111213
  • editor.inactiveSelectionBackground#4e53581a
  • editor.lineHighlightBackground#4e535814
  • editor.lineHighlightBorder#4e535800
  • editor.selectionBackground#4e535833
  • editor.wordHighlightBackground#4e535826
  • editorBracketMatch.background#4e535833
  • editorBracketMatch.border#4e535880
  • editorCursor.foreground#4e5358
  • editorError.foreground#bf1932
  • editorGroup.border#afb2b4
  • editorGroupHeader.tabsBackground#eaeaeb
  • editorGroupHeader.tabsBorder#afb2b4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1112132e
  • editorIndentGuide.background#11121314
  • editorInfo.foreground#e69945
  • editorLineNumber.activeForeground#111213
  • editorLineNumber.foreground#4e5358
  • editorRuler.foreground#11121314
  • editorSuggestWidget.selectedBackground#4e535826
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1112131a
  • editorWidget.background#f4f5f5
  • editorWidget.border#afb2b4
  • focusBorder#4e535880
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#4e5358
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#4e5358
  • input.background#f4f5f5
  • input.border#afb2b4
  • input.foreground#111213
  • input.placeholderForeground#4e5358
  • inputOption.activeBorder#4e5358
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e69945
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#4e535833
  • list.activeSelectionForeground#111213
  • list.focusBackground#4e535826
  • list.highlightForeground#4e5358
  • list.hoverBackground#4e53581a
  • list.inactiveSelectionBackground#4e53581a
  • minimap.background#f4f5f5
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#4e53584d
  • notificationLink.foreground#4e5358
  • notifications.background#f4f5f5
  • notifications.foreground#111213
  • panel.background#eaeaeb
  • panel.border#afb2b4
  • panelTitle.activeBorder#4e5358
  • panelTitle.activeForeground#111213
  • panelTitle.inactiveForeground#4e5358
  • peekView.border#4e5358
  • peekViewEditor.background#eaeaeb
  • peekViewResult.background#dfe0e1
  • peekViewTitle.background#eaeaeb
  • progressBar.background#4e5358
  • scrollbar.shadow#08080914
  • scrollbarSlider.activeBackground#1112134d
  • scrollbarSlider.background#1112131a
  • scrollbarSlider.hoverBackground#11121333
  • selection.background#4e535833
  • sideBar.background#eaeaeb
  • sideBar.border#afb2b4
  • sideBar.foreground#111213
  • sideBarSectionHeader.background#4e53581a
  • sideBarSectionHeader.foreground#111213
  • sideBarTitle.foreground#111213
  • statusBar.background#4e5358
  • statusBar.border#afb2b4
  • statusBar.debuggingBackground#e69945
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#dfe0e1
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#42474b
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f4f5f5
  • tab.activeBorder#4e5358
  • tab.activeBorderTop#4e535800
  • tab.activeForeground#111213
  • tab.border#afb2b4
  • tab.inactiveBackground#eaeaeb
  • tab.inactiveForeground#4e5358
  • terminal.ansiBlack#111213
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#4e5358
  • 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#eaeaeb
  • terminal.foreground#111213
  • terminalCursor.foreground#4e5358
  • textLink.activeForeground#cc883e
  • textLink.foreground#e69945
  • titleBar.activeBackground#eaeaeb
  • titleBar.activeForeground#111213
  • titleBar.border#afb2b4
  • titleBar.inactiveBackground#eaeaeb
  • titleBar.inactiveForeground#4e5358

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4e5358italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4e5358bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4e5358bold
storage.type, storage.modifier#4e5358bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#8f5e2b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4e5358
string.regexp#8f5e2b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#007d62bold
variable.other.constant, variable.other.enummember#007d62bold
constant.character.escape#696d71
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#4f6f79italic
entity.name.type.parameter#4f6f79italic
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#111213
variable.parameter#111213italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4e5358italic
variable.other.property, variable.other.object.property, meta.object-literal.key#111213
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#4e5358bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#696d71
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4e5358
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4f6f79italic
support.type.property-name.css, support.type.vendored.property-name.css#4f6f79
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#007d62
keyword.other.unit.css#38793a
support.type.property-name.json#4f6f79
markup.heading, markup.heading entity.name, entity.name.section.markdown#4e5358bold
markup.bold#007d62bold
markup.italic#4f6f79italic
markup.inline.raw, markup.raw#8f5e2b
markup.underline.link#786d74
markup.quote#4e5358italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050