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#351100
  • activityBar.border#561b00
  • activityBar.foreground#fe5000
  • activityBar.inactiveForeground#e8a885
  • activityBarBadge.background#2c9fd9
  • activityBarBadge.foreground#fcfbfa
  • badge.background#fe5000
  • badge.foreground#260c00
  • breadcrumb.activeSelectionForeground#f8e8e0
  • breadcrumb.focusForeground#f8e8e0
  • breadcrumb.foreground#e8a885
  • button.background#fe5000
  • button.foreground#260c00
  • button.hoverBackground#fe621a
  • button.secondaryBackground#421500
  • button.secondaryForeground#f8e8e0
  • descriptionForeground#e8a885
  • dropdown.background#351100
  • dropdown.border#561b00
  • dropdown.foreground#f8e8e0
  • editor.background#290d00
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#f8e8e0
  • editor.inactiveSelectionBackground#fe500026
  • editor.lineHighlightBackground#fe50001a
  • editor.lineHighlightBorder#fe500000
  • editor.selectionBackground#fe50004d
  • editor.wordHighlightBackground#fe500033
  • editorBracketMatch.background#fe500040
  • editorBracketMatch.border#fe500099
  • editorCursor.foreground#fe5000
  • editorError.foreground#dd4132
  • editorGroup.border#561b00
  • editorGroupHeader.tabsBackground#351100
  • editorGroupHeader.tabsBorder#561b00
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8e8e033
  • editorIndentGuide.background#f8e8e014
  • editorInfo.foreground#2c9fd9
  • editorLineNumber.activeForeground#f8e8e0
  • editorLineNumber.foreground#e8a885
  • editorRuler.foreground#f8e8e014
  • editorSuggestWidget.selectedBackground#fe500040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8e8e01a
  • editorWidget.background#351100
  • editorWidget.border#561b00
  • focusBorder#fe500099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8a885
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8a885
  • input.background#351100
  • input.border#561b00
  • input.foreground#f8e8e0
  • input.placeholderForeground#e8a885
  • inputOption.activeBorder#fe5000
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#2c9fd9
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#fe50004d
  • list.activeSelectionForeground#f8e8e0
  • list.focusBackground#fe500033
  • list.highlightForeground#fe5000
  • list.hoverBackground#fe500026
  • list.inactiveSelectionBackground#fe500026
  • minimap.background#290d00
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#fe500066
  • notificationLink.foreground#fe5000
  • notifications.background#421500
  • notifications.foreground#f8e8e0
  • panel.background#351100
  • panel.border#561b00
  • panelTitle.activeBorder#fe5000
  • panelTitle.activeForeground#f8e8e0
  • panelTitle.inactiveForeground#e8a885
  • peekView.border#fe5000
  • peekViewEditor.background#351100
  • peekViewResult.background#421500
  • peekViewTitle.background#351100
  • progressBar.background#fe5000
  • scrollbar.shadow#19080045
  • scrollbarSlider.activeBackground#f8e8e059
  • scrollbarSlider.background#f8e8e01f
  • scrollbarSlider.hoverBackground#f8e8e040
  • selection.background#fe50004d
  • sideBar.background#421500
  • sideBar.border#561b00
  • sideBar.foreground#f8e8e0
  • sideBarSectionHeader.background#fe500026
  • sideBarSectionHeader.foreground#f8e8e0
  • sideBarTitle.foreground#f8e8e0
  • statusBar.background#983000
  • statusBar.border#561b00
  • statusBar.debuggingBackground#2c9fd9
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fe9666
  • statusBar.noFolderBackground#351100
  • statusBarItem.hoverBackground#fe50004d
  • statusBarItem.remoteBackground#fe5000
  • statusBarItem.remoteForeground#260c00
  • tab.activeBackground#290d00
  • tab.activeBorder#fe5000
  • tab.activeBorderTop#fe500000
  • tab.activeForeground#f8e8e0
  • tab.border#561b00
  • tab.inactiveBackground#351100
  • tab.inactiveForeground#e8a885
  • terminal.ansiBlack#290d00
  • terminal.ansiBlue#874e41
  • terminal.ansiBrightBlack#e8a885
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f8e8e0
  • terminal.ansiYellow#efc050
  • terminal.background#351100
  • terminal.foreground#f8e8e0
  • terminalCursor.foreground#fe5000
  • textLink.activeForeground#4caddf
  • textLink.foreground#2c9fd9
  • titleBar.activeBackground#351100
  • titleBar.activeForeground#f8e8e0
  • titleBar.border#561b00
  • titleBar.inactiveBackground#351100
  • titleBar.inactiveForeground#e8a885

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8a885italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#fe5000bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#fe5000bold
storage.type, storage.modifier#fe5000bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#2c9fd9
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#fe5000
string.regexp#2c9fd9
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#dd487ebold
variable.other.constant, variable.other.enummember#dd487ebold
constant.character.escape#fe6a26
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#b9a384italic
entity.name.type.parameter#b9a384italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#f8e8e0
variable.parameter#f8e8e0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#fe5000italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8e8e0
entity.name.class, entity.name.type.class, support.class#4e9a2fbold italic
entity.other.inherited-class#4e9a2fitalic
entity.name.tag, punctuation.definition.tag#fe5000bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#fe6a26
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8a885
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b9a384italic
support.type.property-name.css, support.type.vendored.property-name.css#b9a384
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4e9a2fbold
support.constant.property-value.css, support.constant.color.css#dd487e
keyword.other.unit.css#ad6ab3
support.type.property-name.json#b9a384
markup.heading, markup.heading entity.name, entity.name.section.markdown#fe5000bold
markup.bold#dd487ebold
markup.italic#b9a384italic
markup.inline.raw, markup.raw#2c9fd9
markup.underline.link#e8d4e2
markup.quote#e8a885italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050