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#faf4f0
  • activityBar.border#f3e0d1
  • activityBar.foreground#cc5600
  • activityBar.inactiveForeground#eba672
  • activityBarBadge.background#125a90
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc5600
  • badge.foreground#381800
  • breadcrumb.activeSelectionForeground#381800
  • breadcrumb.focusForeground#381800
  • breadcrumb.foreground#eba672
  • button.background#cc5600
  • button.foreground#381800
  • button.hoverBackground#b84d00
  • button.secondaryBackground#faf4f0
  • button.secondaryForeground#381800
  • descriptionForeground#eba672
  • dropdown.background#fdfbfa
  • dropdown.border#f3e0d1
  • dropdown.foreground#381800
  • editor.background#fdfbfa
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#381800
  • editor.inactiveSelectionBackground#cc56001a
  • editor.lineHighlightBackground#cc560014
  • editor.lineHighlightBorder#cc560000
  • editor.selectionBackground#cc560033
  • editor.wordHighlightBackground#cc560026
  • editorBracketMatch.background#cc560033
  • editorBracketMatch.border#cc560080
  • editorCursor.foreground#cc5600
  • editorError.foreground#bf1932
  • editorGroup.border#f3e0d1
  • editorGroupHeader.tabsBackground#fbf8f5
  • editorGroupHeader.tabsBorder#f3e0d1
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#3818002e
  • editorIndentGuide.background#38180014
  • editorInfo.foreground#125a90
  • editorLineNumber.activeForeground#381800
  • editorLineNumber.foreground#eba672
  • editorRuler.foreground#38180014
  • editorSuggestWidget.selectedBackground#cc560026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#3818001a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f3e0d1
  • focusBorder#cc560080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#eba672
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#eba672
  • input.background#fdfbfa
  • input.border#f3e0d1
  • input.foreground#381800
  • input.placeholderForeground#eba672
  • inputOption.activeBorder#cc5600
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#125a90
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc560033
  • list.activeSelectionForeground#381800
  • list.focusBackground#cc560026
  • list.highlightForeground#cc5600
  • list.hoverBackground#cc56001a
  • list.inactiveSelectionBackground#cc56001a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#cc56004d
  • notificationLink.foreground#cc5600
  • notifications.background#fdfbfa
  • notifications.foreground#381800
  • panel.background#fbf8f5
  • panel.border#f3e0d1
  • panelTitle.activeBorder#cc5600
  • panelTitle.activeForeground#381800
  • panelTitle.inactiveForeground#eba672
  • peekView.border#cc5600
  • peekViewEditor.background#fbf8f5
  • peekViewResult.background#faf4f0
  • peekViewTitle.background#fbf8f5
  • progressBar.background#cc5600
  • scrollbar.shadow#190b0014
  • scrollbarSlider.activeBackground#3818004d
  • scrollbarSlider.background#3818001a
  • scrollbarSlider.hoverBackground#38180033
  • selection.background#cc560033
  • sideBar.background#fbf8f5
  • sideBar.border#f3e0d1
  • sideBar.foreground#381800
  • sideBarSectionHeader.background#cc56001a
  • sideBarSectionHeader.foreground#381800
  • sideBarTitle.foreground#381800
  • statusBar.background#cc5600
  • statusBar.border#f3e0d1
  • statusBar.debuggingBackground#125a90
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#381800
  • statusBar.noFolderBackground#faf4f0
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad4900
  • statusBarItem.remoteForeground#381800
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#cc5600
  • tab.activeBorderTop#cc560000
  • tab.activeForeground#381800
  • tab.border#f3e0d1
  • tab.inactiveBackground#fbf8f5
  • tab.inactiveForeground#eba672
  • terminal.ansiBlack#381800
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#eba672
  • 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#fdfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf8f5
  • terminal.foreground#381800
  • terminalCursor.foreground#cc5600
  • textLink.activeForeground#105080
  • textLink.foreground#125a90
  • titleBar.activeBackground#fbf8f5
  • titleBar.activeForeground#381800
  • titleBar.border#f3e0d1
  • titleBar.inactiveBackground#fbf8f5
  • titleBar.inactiveForeground#eba672

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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