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#e8dfe2
  • activityBar.border#c7afb7
  • activityBar.foreground#955251
  • activityBar.inactiveForeground#874f5b
  • activityBarBadge.background#4b9e9d
  • activityBarBadge.foreground#f5f1f2
  • badge.background#955251
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#211212
  • breadcrumb.focusForeground#211212
  • breadcrumb.foreground#874f5b
  • button.background#955251
  • button.foreground#f5f1f2
  • button.hoverBackground#864a49
  • button.secondaryBackground#e8dfe2
  • button.secondaryForeground#211212
  • descriptionForeground#874f5b
  • dropdown.background#f7f4f5
  • dropdown.border#c7afb7
  • dropdown.foreground#211212
  • editor.background#f7f4f5
  • editor.findMatchBackground#88b04b59
  • editor.findMatchHighlightBackground#88b04b26
  • editor.foreground#211212
  • editor.inactiveSelectionBackground#9552511a
  • editor.lineHighlightBackground#95525114
  • editor.lineHighlightBorder#95525100
  • editor.selectionBackground#95525133
  • editor.wordHighlightBackground#95525126
  • editorBracketMatch.background#95525133
  • editorBracketMatch.border#95525180
  • editorCursor.foreground#955251
  • editorError.foreground#bf1932
  • editorGroup.border#c7afb7
  • editorGroupHeader.tabsBackground#f0eaec
  • editorGroupHeader.tabsBorder#c7afb7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2112122e
  • editorIndentGuide.background#21121214
  • editorInfo.foreground#4b9e9d
  • editorLineNumber.activeForeground#211212
  • editorLineNumber.foreground#874f5b
  • editorRuler.foreground#21121214
  • editorSuggestWidget.selectedBackground#95525126
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2112121a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c7afb7
  • focusBorder#95525180
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#874f5b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#874f5b
  • input.background#f7f4f5
  • input.border#c7afb7
  • input.foreground#211212
  • input.placeholderForeground#874f5b
  • inputOption.activeBorder#955251
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#4b9e9d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#95525133
  • list.activeSelectionForeground#211212
  • list.focusBackground#95525126
  • list.highlightForeground#955251
  • list.hoverBackground#9552511a
  • list.inactiveSelectionBackground#9552511a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#88b04b80
  • minimap.selectionHighlight#9552514d
  • notificationLink.foreground#955251
  • notifications.background#f7f4f5
  • notifications.foreground#211212
  • panel.background#f0eaec
  • panel.border#c7afb7
  • panelTitle.activeBorder#955251
  • panelTitle.activeForeground#211212
  • panelTitle.inactiveForeground#874f5b
  • peekView.border#955251
  • peekViewEditor.background#f0eaec
  • peekViewResult.background#e8dfe2
  • peekViewTitle.background#f0eaec
  • progressBar.background#955251
  • scrollbar.shadow#0f080814
  • scrollbarSlider.activeBackground#2112124d
  • scrollbarSlider.background#2112121a
  • scrollbarSlider.hoverBackground#21121233
  • selection.background#95525133
  • sideBar.background#f0eaec
  • sideBar.border#c7afb7
  • sideBar.foreground#211212
  • sideBarSectionHeader.background#9552511a
  • sideBarSectionHeader.foreground#211212
  • sideBarTitle.foreground#211212
  • statusBar.background#955251
  • statusBar.border#c7afb7
  • statusBar.debuggingBackground#4b9e9d
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dfe2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#7f4645
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#955251
  • tab.activeBorderTop#95525100
  • tab.activeForeground#211212
  • tab.border#c7afb7
  • tab.inactiveBackground#f0eaec
  • tab.inactiveForeground#874f5b
  • terminal.ansiBlack#211212
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#874f5b
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f7f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f0eaec
  • terminal.foreground#211212
  • terminalCursor.foreground#955251
  • textLink.activeForeground#428d8b
  • textLink.foreground#4b9e9d
  • titleBar.activeBackground#f0eaec
  • titleBar.activeForeground#211212
  • titleBar.border#c7afb7
  • titleBar.inactiveBackground#f0eaec
  • titleBar.inactiveForeground#874f5b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#874f5bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#955251bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#955251bold
storage.type, storage.modifier#955251bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#367472
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#955251
string.regexp#367472
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5a7431
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#846c2dbold
variable.other.constant, variable.other.enummember#846c2dbold
constant.character.escape#8c5b5a
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#b8435fitalic
entity.name.type.parameter#b8435fitalic
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#211212
variable.parameter#211212italic
variable.language, variable.language.this, variable.language.self, variable.language.super#955251italic
variable.other.property, variable.other.object.property, meta.object-literal.key#211212
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#955251bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8c5b5a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#874f5b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b8435fitalic
support.type.property-name.css, support.type.vendored.property-name.css#b8435f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c068cbold
support.constant.property-value.css, support.constant.color.css#846c2d
keyword.other.unit.css#5a7431
support.type.property-name.json#b8435f
markup.heading, markup.heading entity.name, entity.name.section.markdown#955251bold
markup.bold#846c2dbold
markup.italic#b8435fitalic
markup.inline.raw, markup.raw#367472
markup.underline.link#786d74
markup.quote#874f5bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050