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#0F0E00
  • activityBar.border#08070060
  • activityBar.foreground#8C8149
  • activityBarBadge.background#E61717
  • activityBarBadge.foreground#080700
  • badge.background#08070030
  • badge.foreground#575103
  • breadcrumb.activeSelectionForeground#575103
  • breadcrumb.background#080700
  • breadcrumb.focusForeground#8C8149
  • breadcrumb.foreground#BFA730
  • breadcrumbPicker.background#080700
  • button.background#57510350
  • contrastBorder#57510340
  • debugToolBar.background#080700
  • diffEditor.insertedTextBackground#D9BD9C15
  • diffEditor.removedTextBackground#D9A49120
  • dropdown.background#080700
  • dropdown.border#D9BC9A10
  • editor.background#080700
  • editor.findMatchBackground#080700
  • editor.findMatchBorder#575103
  • editor.findMatchHighlightBackground#57510393
  • editor.findMatchHighlightBorder#D9BC9A30
  • editor.foreground#8C8149
  • editor.lineHighlightBackground#08070050
  • editor.selectionBackground#e6171788
  • editor.selectionHighlightBackground#E6171788
  • editor.selectionHighlightBorder#E61717
  • editorBracketMatch.background#080700
  • editorBracketMatch.border#F2DCC27f
  • editorCursor.foreground#F2DCC2
  • editorError.foreground#D9A49170
  • editorGroup.border#08070030
  • editorGroupHeader.tabsBackground#080700
  • editorGutter.addedBackground#1aff0060
  • editorGutter.deletedBackground#e617179c
  • editorGutter.modifiedBackground#171ae6a8
  • editorHoverWidget.background#080700
  • editorHoverWidget.border#E61717
  • editorHoverWidget.statusBarBackground#fff
  • editorIndentGuide.activeBackground#384001
  • editorIndentGuide.background#38400170
  • editorInfo.foreground#FFFFFF70
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#575103c0
  • editorLink.activeForeground#8C8149
  • editorMarkerNavigation.background#8C814905
  • editorOverviewRuler.border#080700
  • editorOverviewRuler.errorForeground#D9A49140
  • editorOverviewRuler.findMatchForeground#575103
  • editorOverviewRuler.infoForeground#FFFFFF40
  • editorOverviewRuler.warningForeground#F2DCC270
  • editorRuler.foreground#384001
  • editorSuggestWidget.background#080700
  • editorSuggestWidget.border#D9BC9A10
  • editorSuggestWidget.foreground#8C8149
  • editorSuggestWidget.highlightForeground#F2DCC2
  • editorSuggestWidget.selectedBackground#57510320
  • editorWarning.foreground#D9BD9C
  • editorWhitespace.foreground#8C814940
  • editorWidget.background#000
  • editorWidget.border#F2DCC2
  • editorWidget.foreground#fff
  • editorWidget.resizeBorder#575103
  • extensionButton.prominentBackground#D9BD9C90
  • extensionButton.prominentHoverBackground#E61717
  • focusBorder#D9BC9A00
  • gitDecoration.conflictingResourceForeground#F2DCC2
  • gitDecoration.deletedResourceForeground#D9A491
  • gitDecoration.ignoredResourceForeground#575103
  • gitDecoration.modifiedResourceForeground#BFA730
  • gitDecoration.untrackedResourceForeground#FFFFFF
  • input.background#1E2601
  • input.border#D9BC9A10
  • input.foreground#8C8149
  • input.placeholderForeground#8C814960
  • inputOption.activeBackground#8C814930
  • inputOption.activeBorder#8C814930
  • inputValidation.errorBorder#D9A49150
  • inputValidation.infoBorder#FFFFFF50
  • inputValidation.warningBorder#F2DCC250
  • list.activeSelectionBackground#080700
  • list.activeSelectionForeground#BFA730
  • list.focusBackground#1E2601
  • list.focusForeground#FFFFFF
  • list.highlightForeground#575103
  • list.hoverBackground#E61717
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#08070030
  • list.inactiveSelectionForeground#575103
  • list.warningForeground#F2DCC2
  • listFilterWidget.background#08070030
  • listFilterWidget.noMatchesOutline#08070030
  • listFilterWidget.outline#08070030
  • menu.background#080700f8
  • menu.border#57510350
  • menu.foreground#8C8149
  • menu.selectionBackground#1E2601
  • menu.selectionBorder#08070030
  • menu.selectionForeground#8C8149
  • menu.separatorBackground#8C8149
  • menubar.selectionBackground#1E2601
  • menubar.selectionBorder#57510350
  • menubar.selectionForeground#8C8149
  • minimap.background#080700
  • minimapGutter.addedBackground#D9A491
  • minimapGutter.deletedBackground#F2DCC2
  • minimapGutter.modifiedBackground#D9BD9C
  • minimapSlider.activeBackground#D9BD9Cb0
  • minimapSlider.background#D9BD9C80
  • minimapSlider.hoverBackground#D9BD9Ca0
  • notificationLink.foreground#575103
  • notifications.background#080700
  • notifications.foreground#8C8149
  • panel.background#080700
  • panel.border#08070060
  • panelTitle.activeBorder#575103
  • panelTitle.activeForeground#D9BC9A
  • panelTitle.inactiveForeground#8C8149
  • peekView.border#08070030
  • peekViewEditor.background#8C814905
  • peekViewEditor.matchHighlightBackground#57510350
  • peekViewEditorGutter.background#8C814905
  • peekViewResult.background#8C814905
  • peekViewResult.matchHighlightBackground#57510350
  • peekViewResult.selectionBackground#57510370
  • peekViewTitle.background#8C814905
  • peekViewTitleDescription.foreground#8C814960
  • pickerGroup.foreground#575103
  • progressBar.background#575103
  • quickInputList.focusBackground#38400186
  • quickInputTitle.background#ff0000
  • scrollbar.shadow#08070000
  • scrollbarSlider.activeBackground#575103cc
  • scrollbarSlider.background#575103bb
  • scrollbarSlider.hoverBackground#E61717ee
  • selection.background#575103
  • settings.checkboxBackground#080700
  • settings.checkboxForeground#8C8149
  • settings.dropdownBackground#080700
  • settings.dropdownForeground#8C8149
  • settings.headerForeground#575103
  • settings.modifiedItemIndicator#575103
  • settings.numberInputBackground#080700
  • settings.numberInputForeground#8C8149
  • settings.textInputBackground#080700
  • settings.textInputForeground#8C8149
  • sideBar.background#171502
  • sideBar.border#57510350
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#080700
  • sideBarSectionHeader.border#08070060
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#8C8149
  • statusBar.background#8C8149
  • statusBar.border#08070060
  • statusBar.debuggingBackground#F2DCC2
  • statusBar.debuggingForeground#D9BC9A
  • statusBar.foreground#1E2601
  • statusBar.noFolderBackground#080700
  • statusBarItem.hoverBackground#cebd6a
  • statusBarItem.remoteBackground#575103
  • statusBarItem.remoteForeground#080700
  • tab.activeBackground#57510350
  • tab.activeBorder#575103
  • tab.activeForeground#D9BC9A
  • tab.activeModifiedBorder#575103
  • tab.border#080700
  • tab.inactiveBackground#57510320
  • tab.inactiveForeground#8C8149af
  • tab.unfocusedActiveBackground#57510340
  • tab.unfocusedActiveBorder#575103
  • tab.unfocusedActiveForeground#8C8149
  • tab.unfocusedInactiveBackground#57510310
  • tab.unfocusedInactiveForeground#8C81497f
  • terminal.ansiBlack#080700
  • terminal.ansiBlue#FFFFFF
  • terminal.ansiBrightBlack#575103
  • terminal.ansiBrightBlue#FFFFFF
  • terminal.ansiBrightCyan#E4F971
  • terminal.ansiBrightGreen#D9BD9C
  • terminal.ansiBrightMagenta#F2DCC2
  • terminal.ansiBrightRed#D9A491
  • terminal.ansiBrightWhite#D9BC9A
  • terminal.ansiBrightYellow#F2DCC2
  • terminal.ansiCyan#E4F971
  • terminal.ansiGreen#D9BD9C
  • terminal.ansiMagenta#F2DCC2
  • terminal.ansiRed#D9A491
  • terminal.ansiWhite#D9BC9A
  • terminal.ansiYellow#F2DCC2
  • terminalCursor.background#080700
  • terminalCursor.foreground#F2DCC2
  • textLink.activeForeground#8C8149
  • textLink.foreground#575103
  • titleBar.activeBackground#080700
  • titleBar.activeForeground#8C8149
  • titleBar.border#08070060
  • titleBar.inactiveBackground#080700
  • titleBar.inactiveForeground#575103
  • tree.indentGuidesStroke#384001
  • widget.shadow#08070030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#F2DCC2
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#D9BD9C
constant.other.php#F2DCC2
constant.other.color#D9BC9A
invalid, invalid.illegal#D9A491
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#BFA730
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#8C8149
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#8C8149
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#F2DCC2
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#BFA730
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#FFFFFF
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#E4F971
support.other.variable, string.other.link, markup.table#8C8149
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#F2DCC2
variable.parameter.function.language.special, variable.parameter#D9A491
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#D9BD9C
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#F2DCC2
support.type#B2CCD6
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#BFA730
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#D9A491
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFFFFFitalic
entity.other.attribute-name, support.function#F2DCC2
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#8C8149
source.scss keyword.control#F2DCC2
markup.inserted#D9BD9C
markup.deleted#D9A491
markup.changed#F2DCC2
string.regexp#E4F971
constant.character.escape#E4F971
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#8C8149italic
support.type.property-name.json#8C8149
text.html.markdown, punctuation.definition.list_item.markdown#8C8149
text.html.markdown markup.inline.raw.markdown#F2DCC2
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#57510350
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#BFA730bold
markup.underline#FFFFFFunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#57510350
markup.quoteitalic
string.other.link.description.title.markdown#F2DCC2
constant.other.reference.link.markdown#F2DCC2
markup.raw.block#F2DCC2
punctuation.definition.raw.markdown, punctuation.definition.markdown#E4F971
variable.language.fenced.markdown#575103
meta.separator#A7A8AFbold
token.info-token#575103
token.warn-token#F2DCC2
token.error-token#FF293B
token.debug-token#E4F971