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#faf4f2
  • activityBar.border#f3e0d9
  • activityBar.foreground#cc594e
  • activityBar.inactiveForeground#eba799
  • activityBarBadge.background#00a3b8
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc594e
  • badge.foreground#26110f
  • breadcrumb.activeSelectionForeground#26110f
  • breadcrumb.focusForeground#26110f
  • breadcrumb.foreground#eba799
  • button.background#cc594e
  • button.foreground#26110f
  • button.hoverBackground#b85046
  • button.secondaryBackground#faf4f2
  • button.secondaryForeground#26110f
  • descriptionForeground#eba799
  • dropdown.background#fdfbfb
  • dropdown.border#f3e0d9
  • dropdown.foreground#26110f
  • editor.background#fdfbfb
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#26110f
  • editor.inactiveSelectionBackground#cc594e1a
  • editor.lineHighlightBackground#cc594e14
  • editor.lineHighlightBorder#cc594e00
  • editor.selectionBackground#cc594e33
  • editor.wordHighlightBackground#cc594e26
  • editorBracketMatch.background#cc594e33
  • editorBracketMatch.border#cc594e80
  • editorCursor.foreground#cc594e
  • editorError.foreground#bf1932
  • editorGroup.border#f3e0d9
  • editorGroupHeader.tabsBackground#fbf8f6
  • editorGroupHeader.tabsBorder#f3e0d9
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#26110f2e
  • editorIndentGuide.background#26110f14
  • editorInfo.foreground#00a3b8
  • editorLineNumber.activeForeground#26110f
  • editorLineNumber.foreground#eba799
  • editorRuler.foreground#26110f14
  • editorSuggestWidget.selectedBackground#cc594e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#26110f1a
  • editorWidget.background#fdfbfb
  • editorWidget.border#f3e0d9
  • focusBorder#cc594e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#eba799
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#eba799
  • input.background#fdfbfb
  • input.border#f3e0d9
  • input.foreground#26110f
  • input.placeholderForeground#eba799
  • inputOption.activeBorder#cc594e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a3b8
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc594e33
  • list.activeSelectionForeground#26110f
  • list.focusBackground#cc594e26
  • list.highlightForeground#cc594e
  • list.hoverBackground#cc594e1a
  • list.inactiveSelectionBackground#cc594e1a
  • minimap.background#fdfbfb
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#cc594e4d
  • notificationLink.foreground#cc594e
  • notifications.background#fdfbfb
  • notifications.foreground#26110f
  • panel.background#fbf8f6
  • panel.border#f3e0d9
  • panelTitle.activeBorder#cc594e
  • panelTitle.activeForeground#26110f
  • panelTitle.inactiveForeground#eba799
  • peekView.border#cc594e
  • peekViewEditor.background#fbf8f6
  • peekViewResult.background#faf4f2
  • peekViewTitle.background#fbf8f6
  • progressBar.background#cc594e
  • scrollbar.shadow#190b0a14
  • scrollbarSlider.activeBackground#26110f4d
  • scrollbarSlider.background#26110f1a
  • scrollbarSlider.hoverBackground#26110f33
  • selection.background#cc594e33
  • sideBar.background#fbf8f6
  • sideBar.border#f3e0d9
  • sideBar.foreground#26110f
  • sideBarSectionHeader.background#cc594e1a
  • sideBarSectionHeader.foreground#26110f
  • sideBarTitle.foreground#26110f
  • statusBar.background#cc594e
  • statusBar.border#f3e0d9
  • statusBar.debuggingBackground#00a3b8
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#26110f
  • statusBar.noFolderBackground#faf4f2
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad4c42
  • statusBarItem.remoteForeground#26110f
  • tab.activeBackground#fdfbfb
  • tab.activeBorder#cc594e
  • tab.activeBorderTop#cc594e00
  • tab.activeForeground#26110f
  • tab.border#f3e0d9
  • tab.inactiveBackground#fbf8f6
  • tab.inactiveForeground#eba799
  • terminal.ansiBlack#26110f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#eba799
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfbfb
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf8f6
  • terminal.foreground#26110f
  • terminalCursor.foreground#cc594e
  • textLink.activeForeground#0091a3
  • textLink.foreground#00a3b8
  • titleBar.activeBackground#fbf8f6
  • titleBar.activeForeground#26110f
  • titleBar.border#f3e0d9
  • titleBar.inactiveBackground#fbf8f6
  • titleBar.inactiveForeground#eba799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#eba799italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b74f45bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b74f45bold
storage.type, storage.modifier#b74f45bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007986
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#b74f45
string.regexp#007986
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5e2b4ebold
variable.other.constant, variable.other.enummember#5e2b4ebold
constant.character.escape#a8574f
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#9b1b30italic
entity.name.type.parameter#9b1b30italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#26110f
variable.parameter#26110fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#b74f45italic
variable.other.property, variable.other.object.property, meta.object-literal.key#26110f
entity.name.class, entity.name.type.class, support.class#4f7d15bold italic
entity.other.inherited-class#4f7d15italic
entity.name.tag, punctuation.definition.tag#b74f45bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a8574f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#eba799
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9b1b30italic
support.type.property-name.css, support.type.vendored.property-name.css#9b1b30
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4f7d15bold
support.constant.property-value.css, support.constant.color.css#5e2b4e
keyword.other.unit.css#5c068c
support.type.property-name.json#9b1b30
markup.heading, markup.heading entity.name, entity.name.section.markdown#b74f45bold
markup.bold#5e2b4ebold
markup.italic#9b1b30italic
markup.inline.raw, markup.raw#007986
markup.underline.link#38793a
markup.quote#eba799italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050