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#0d0b09
  • activityBar.border#1a1612
  • activityBar.foreground#ffb74d
  • activityBar.inactiveForeground#8d6e42
  • activityBarBadge.background#ffb74d
  • activityBarBadge.foreground#0d0b09
  • badge.background#ffb74d
  • badge.foreground#0d0b09
  • breadcrumb.activeSelectionForeground#ffb74d
  • breadcrumb.background#0d0b09
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#8d6e42
  • breadcrumbPicker.background#080706
  • button.background#ffb74d
  • button.foreground#0d0b09
  • button.hoverBackground#ff9800
  • button.secondaryBackground#3d322a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4a3c2a
  • dropdown.background#1a1612
  • dropdown.border#3d322a
  • dropdown.foreground#ffffff
  • dropdown.listBackground#0d0b09
  • editor.background#0d0b09
  • editor.findMatchBackground#ffd70060
  • editor.findMatchBorder#ffd700
  • editor.findMatchHighlightBackground#ffd70040
  • editor.findRangeHighlightBackground#ffd70030
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#ffb74d25
  • editor.lineHighlightBackground#1a161220
  • editor.selectionBackground#ffb74d50
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#ffb74d30
  • editorBracketMatch.background#ffb74d40
  • editorBracketMatch.border#ffb74d
  • editorCursor.background#0d0b09
  • editorCursor.foreground#ffb74d
  • editorError.foreground#ff7f50
  • editorGroup.border#1a1612
  • editorGroupHeader.noTabsBackground#0d0b09
  • editorGroupHeader.tabsBackground#0d0b09
  • editorGutter.addedBackground#90ee90
  • editorGutter.background#0d0b09
  • editorGutter.deletedBackground#ff7f50
  • editorGutter.foldingControlForeground#8d6e42
  • editorGutter.modifiedBackground#ffd700
  • editorHint.foreground#90ee90
  • editorIndentGuide.activeBackground1#ffb74d
  • editorIndentGuide.background1#2d241f
  • editorInfo.foreground#87ceeb
  • editorLineNumber.activeForeground#ffb74d
  • editorLineNumber.foreground#8d6e42
  • editorOverviewRuler.addedForeground#90ee90
  • editorOverviewRuler.background#0d0b09
  • editorOverviewRuler.border#0d0b09
  • editorOverviewRuler.bracketMatchForeground#ffb74d
  • editorOverviewRuler.currentContentForeground#90ee90
  • editorOverviewRuler.deletedForeground#ff7f50
  • editorOverviewRuler.errorForeground#ff7f50
  • editorOverviewRuler.findMatchForeground#ffd70060
  • editorOverviewRuler.incomingContentForeground#87ceeb
  • editorOverviewRuler.infoForeground#87ceeb
  • editorOverviewRuler.modifiedForeground#ffd700
  • editorOverviewRuler.rangeHighlightForeground#ffb74d60
  • editorOverviewRuler.selectionHighlightForeground#ffb74d60
  • editorOverviewRuler.warningForeground#ffd700
  • editorOverviewRuler.wordHighlightForeground#8d6e4260
  • editorOverviewRuler.wordHighlightStrongForeground#b8956f60
  • editorRuler.foreground#2d241f
  • editorWarning.foreground#ffd700
  • editorWhitespace.foreground#3d322a
  • errorForeground#ff7f50
  • extensionButton.prominentBackground#ffb74d
  • extensionButton.prominentForeground#0d0b09
  • extensionButton.prominentHoverBackground#ff9800
  • focusBorder#ffb74d80
  • foreground#ffffff
  • icon.foreground#ffffff
  • input.background#1a1612
  • input.border#3d322a
  • input.foreground#ffffff
  • input.placeholderForeground#8d6e42
  • inputOption.activeBackground#ffb74d40
  • inputOption.activeBorder#ffb74d
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#ff7f5040
  • inputValidation.errorBorder#ff7f50
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#87ceeb40
  • inputValidation.infoBorder#87ceeb
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ffd70040
  • inputValidation.warningBorder#ffd700
  • inputValidation.warningForeground#0d0b09
  • list.activeSelectionBackground#ffb74d50
  • list.activeSelectionForeground#ffb74d
  • list.dropBackground#ffb74d40
  • list.errorForeground#ff7f50
  • list.focusBackground#ffb74d40
  • list.focusForeground#ffffff
  • list.focusOutline#ffb74d70
  • list.highlightForeground#ffb74d
  • list.hoverBackground#1a161260
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2d241f60
  • list.inactiveSelectionForeground#ffb74d
  • list.invalidItemForeground#ff7f50
  • list.warningForeground#ffd700
  • menu.background#1a1612
  • menu.border#3d322a
  • menu.foreground#ffffff
  • menu.selectionBackground#ffb74d
  • menu.selectionBorder#ffb74d
  • menu.selectionForeground#0d0b09
  • menu.separatorBackground#3d322a
  • menubar.selectionBackground#3d322a
  • menubar.selectionBorder#ffb74d
  • menubar.selectionForeground#ffffff
  • merge.border#8d6e42
  • merge.commonContentBackground#8d6e4230
  • merge.commonHeaderBackground#8d6e4260
  • merge.currentContentBackground#90ee9030
  • merge.currentHeaderBackground#90ee9060
  • merge.incomingContentBackground#87ceeb30
  • merge.incomingHeaderBackground#87ceeb60
  • minimap.background#0d0b09
  • minimap.errorHighlight#ff7f50
  • minimap.findMatchHighlight#ffd70060
  • minimap.selectionHighlight#ffb74d50
  • minimap.warningHighlight#ffd700
  • minimapSlider.activeBackground#5d4b3890
  • minimapSlider.background#3d322a60
  • minimapSlider.hoverBackground#4a3c2a80
  • notificationCenterHeader.background#1a1612
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#ffb74d
  • notifications.background#1a1612
  • notifications.border#3d322a
  • notifications.foreground#ffffff
  • panel.background#0d0b09
  • panel.border#1a1612
  • panelTitle.activeBorder#ffb74d
  • panelTitle.activeForeground#ffb74d
  • panelTitle.inactiveForeground#8d6e42
  • peekView.border#ffb74d
  • peekViewEditor.background#1a1612
  • peekViewEditor.matchHighlightBackground#ffd70060
  • peekViewEditorGutter.background#1a1612
  • peekViewResult.background#0d0b09
  • peekViewResult.matchHighlightBackground#ffd70060
  • peekViewResult.selectionBackground#ffb74d50
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0d0b09
  • peekViewTitleDescription.foreground#8d6e42
  • peekViewTitleLabel.foreground#ffffff
  • problemsErrorIcon.foreground#ff7f50
  • problemsInfoIcon.foreground#87ceeb
  • problemsWarningIcon.foreground#ffd700
  • progressBar.background#ffb74d
  • quickInput.background#080706
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#ffb74d50
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#0d0b09
  • sash.hoverBorder#ffb74d60
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#5d4b38
  • scrollbarSlider.background#3d322a90
  • scrollbarSlider.hoverBackground#4a3c2a
  • selection.background#ffb74d60
  • sideBar.background#0d0b09
  • sideBar.border#1a1612
  • sideBar.foreground#b8956f
  • sideBarSectionHeader.background#1a1612
  • sideBarSectionHeader.border#2d241f
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0d0b09
  • statusBar.border#1a1612
  • statusBar.debuggingBackground#ff7f50
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0d0b09
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#0d0b09
  • tab.activeBorder#ffb74d
  • tab.activeForeground#ffffff
  • tab.border#0d0b09
  • tab.hoverBackground#0d0b09
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0d0b09
  • tab.inactiveForeground#8d6e42
  • tab.lastPinnedBorder#0d0b09
  • tab.unfocusedActiveBackground#0d0b09
  • tab.unfocusedActiveForeground#e0d0b8
  • tab.unfocusedInactiveBackground#1a1612
  • tab.unfocusedInactiveForeground#8d6e42
  • terminal.ansiBlack#0d0b09
  • terminal.ansiBlue#87ceeb
  • terminal.ansiBrightBlack#4a3c2a
  • terminal.ansiBrightBlue#87ceeb
  • terminal.ansiBrightCyan#afeeee
  • terminal.ansiBrightGreen#98fb98
  • terminal.ansiBrightMagenta#deb887
  • terminal.ansiBrightRed#ff6347
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#40e0d0
  • terminal.ansiGreen#90ee90
  • terminal.ansiMagenta#dda0dd
  • terminal.ansiRed#ff7f50
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd700
  • terminal.background#0d0b09
  • terminal.foreground#ffffff
  • titleBar.activeBackground#0d0b09
  • titleBar.activeForegrounddefault
  • titleBar.border#1a1612
  • titleBar.inactiveBackground#0d0b09
  • titleBar.inactiveForeground#8d6e42
  • tree.indentGuidesStroke#3d322a
  • widget.shadow#000000a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e8660italic
variable, string constant.other.placeholder#ffffff
keyword, storage.type, storage.modifier#ff9500
keyword.control, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ffb74d
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff7043
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ffd54f
meta.block variable.other#ffcc80
support.other.variable, string.other.link#ffcc80
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffab40
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#a5d6a7
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffd54f
support.type#f5deb3
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#f5deb3
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff7043
variable.language#ff7043italic
entity.name.method.js#ffd54fitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#ffd54f
entity.other.attribute-name#ff9500italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffd54fitalic
entity.other.attribute-name.class#ffd54f
source.sass keyword.control#ffd54f
markup.inserted#a5d6a7
markup.deleted#ff7043
markup.changed#ff9500
string.regexp#ffb74d
constant.character.escape#ffb74d
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffd54fitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff7043italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff9500
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffd54f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffab40
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff7043
text.html.markdown, punctuation.definition.list_item.markdown#ffffff
text.html.markdown markup.inline.raw.markdown#ff9500
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9e8660
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a5d6a7
markup.italic#ffcc80italic
markup.bold, markup.bold string#ffcc80bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ffcc80bold
markup.underline#ffab40underline
markup.quote punctuation.definition.blockquote.markdown#9e8660
markup.quoteitalic
string.other.link.title.markdown#ffd54f
string.other.link.description.title.markdown#ff9500
constant.other.reference.link.markdown#ffd54f
markup.raw.block#ff9500
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#ffffff
variable.language.fenced.markdown#9e8660
meta.separator#9e8660bold
markup.table#ffffff