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#faf5f2
  • activityBar.border#f3e2db
  • activityBar.foreground#cc685b
  • activityBar.inactiveForeground#ebafa0
  • activityBarBadge.background#00a3b8
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc685b
  • badge.foreground#261411
  • breadcrumb.activeSelectionForeground#261411
  • breadcrumb.focusForeground#261411
  • breadcrumb.foreground#ebafa0
  • button.background#cc685b
  • button.foreground#261411
  • button.hoverBackground#b85e52
  • button.secondaryBackground#faf5f2
  • button.secondaryForeground#261411
  • descriptionForeground#ebafa0
  • dropdown.background#fdfcfb
  • dropdown.border#f3e2db
  • dropdown.foreground#261411
  • editor.background#fdfcfb
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#261411
  • editor.inactiveSelectionBackground#cc685b1a
  • editor.lineHighlightBackground#cc685b14
  • editor.lineHighlightBorder#cc685b00
  • editor.selectionBackground#cc685b33
  • editor.wordHighlightBackground#cc685b26
  • editorBracketMatch.background#cc685b33
  • editorBracketMatch.border#cc685b80
  • editorCursor.foreground#cc685b
  • editorError.foreground#bf1932
  • editorGroup.border#f3e2db
  • editorGroupHeader.tabsBackground#fbf8f6
  • editorGroupHeader.tabsBorder#f3e2db
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2614112e
  • editorIndentGuide.background#26141114
  • editorInfo.foreground#00a3b8
  • editorLineNumber.activeForeground#261411
  • editorLineNumber.foreground#ebafa0
  • editorRuler.foreground#26141114
  • editorSuggestWidget.selectedBackground#cc685b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2614111a
  • editorWidget.background#fdfcfb
  • editorWidget.border#f3e2db
  • focusBorder#cc685b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ebafa0
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ebafa0
  • input.background#fdfcfb
  • input.border#f3e2db
  • input.foreground#261411
  • input.placeholderForeground#ebafa0
  • inputOption.activeBorder#cc685b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a3b8
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc685b33
  • list.activeSelectionForeground#261411
  • list.focusBackground#cc685b26
  • list.highlightForeground#cc685b
  • list.hoverBackground#cc685b1a
  • list.inactiveSelectionBackground#cc685b1a
  • minimap.background#fdfcfb
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#cc685b4d
  • notificationLink.foreground#cc685b
  • notifications.background#fdfcfb
  • notifications.foreground#261411
  • panel.background#fbf8f6
  • panel.border#f3e2db
  • panelTitle.activeBorder#cc685b
  • panelTitle.activeForeground#261411
  • panelTitle.inactiveForeground#ebafa0
  • peekView.border#cc685b
  • peekViewEditor.background#fbf8f6
  • peekViewResult.background#faf5f2
  • peekViewTitle.background#fbf8f6
  • progressBar.background#cc685b
  • scrollbar.shadow#190d0b14
  • scrollbarSlider.activeBackground#2614114d
  • scrollbarSlider.background#2614111a
  • scrollbarSlider.hoverBackground#26141133
  • selection.background#cc685b33
  • sideBar.background#fbf8f6
  • sideBar.border#f3e2db
  • sideBar.foreground#261411
  • sideBarSectionHeader.background#cc685b1a
  • sideBarSectionHeader.foreground#261411
  • sideBarTitle.foreground#261411
  • statusBar.background#cc685b
  • statusBar.border#f3e2db
  • statusBar.debuggingBackground#00a3b8
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#261411
  • statusBar.noFolderBackground#faf5f2
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad584d
  • statusBarItem.remoteForeground#261411
  • tab.activeBackground#fdfcfb
  • tab.activeBorder#cc685b
  • tab.activeBorderTop#cc685b00
  • tab.activeForeground#261411
  • tab.border#f3e2db
  • tab.inactiveBackground#fbf8f6
  • tab.inactiveForeground#ebafa0
  • terminal.ansiBlack#261411
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ebafa0
  • 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#fdfcfb
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf8f6
  • terminal.foreground#261411
  • terminalCursor.foreground#cc685b
  • textLink.activeForeground#0091a3
  • textLink.foreground#00a3b8
  • titleBar.activeBackground#fbf8f6
  • titleBar.activeForeground#261411
  • titleBar.border#f3e2db
  • titleBar.inactiveBackground#fbf8f6
  • titleBar.inactiveForeground#ebafa0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ebafa0italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a8564bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a8564bbold
storage.type, storage.modifier#a8564bbold
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#a8564b
string.regexp#007986
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#428328
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7d7228bold
variable.other.constant, variable.other.enummember#7d7228bold
constant.character.escape#9b5a52
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#8f6a55italic
entity.name.type.parameter#8f6a55italic
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#261411
variable.parameter#261411italic
variable.language, variable.language.this, variable.language.self, variable.language.super#a8564bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#261411
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#a8564bbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9b5a52
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ebafa0
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8f6a55italic
support.type.property-name.css, support.type.vendored.property-name.css#8f6a55
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c068cbold
support.constant.property-value.css, support.constant.color.css#7d7228
keyword.other.unit.css#428328
support.type.property-name.json#8f6a55
markup.heading, markup.heading entity.name, entity.name.section.markdown#a8564bbold
markup.bold#7d7228bold
markup.italic#8f6a55italic
markup.inline.raw, markup.raw#007986
markup.underline.link#786d74
markup.quote#ebafa0italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050