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#080101
  • activityBar.border#130101
  • activityBar.foreground#FEFFC5
  • activityBar.inactiveForeground#6F5C4A
  • activityBarBadge.background#6F0404
  • activityBarBadge.foreground#FEFFC5
  • badge.background#6F0404
  • badge.foreground#FEFFC5
  • breadcrumb.activeSelectionForeground#BD2007
  • breadcrumb.focusForeground#FEFFC5
  • breadcrumb.foreground#6F5C4A
  • breadcrumbPicker.background#130101
  • button.background#6F0404
  • button.foreground#FEFFC5
  • button.hoverBackground#941205
  • button.secondaryBackground#130101
  • button.secondaryForeground#E8E2B8
  • button.secondaryHoverBackground#1D0101
  • diffEditor.diagonalFill#130101
  • diffEditor.insertedLineBackground#ACA18215
  • diffEditor.insertedTextBackground#ACA18222
  • diffEditor.removedLineBackground#BD200715
  • diffEditor.removedTextBackground#BD200722
  • disabledForeground#6F5C4A
  • dropdown.background#130101
  • dropdown.border#6F0404
  • dropdown.foreground#FEFFC5
  • dropdown.listBackground#130101
  • editor.background#080101
  • editor.findMatchBackground#BD200766
  • editor.findMatchBorder#BD2007
  • editor.findMatchHighlightBackground#ACA18244
  • editor.foreground#FEFFC5
  • editor.inactiveSelectionBackground#6F040433
  • editor.lineHighlightBackground#130101AA
  • editor.lineHighlightBorder#13010100
  • editor.rangeHighlightBackground#6F040422
  • editor.selectionBackground#6F040466
  • editor.selectionHighlightBackground#6F040433
  • editor.wordHighlightBackground#ACA18222
  • editor.wordHighlightStrongBackground#BD200733
  • editorBracketHighlight.foreground1#BD2007
  • editorBracketHighlight.foreground2#ACA182
  • editorBracketHighlight.foreground3#DC8F66
  • editorBracketHighlight.foreground4#8C8164
  • editorBracketHighlight.foreground5#E8E2B8
  • editorBracketHighlight.foreground6#6F0404
  • editorBracketMatch.background#6F040455
  • editorBracketMatch.border#BD2007
  • editorCodeLens.foreground#6F5C4A
  • editorCursor.background#080101
  • editorCursor.foreground#BD2007
  • editorError.foreground#FF3B1F
  • editorGroup.border#130101
  • editorGroupHeader.tabsBackground#080101
  • editorGroupHeader.tabsBorder#130101
  • editorGutter.addedBackground#ACA182
  • editorGutter.background#080101
  • editorGutter.deletedBackground#BD2007
  • editorGutter.modifiedBackground#DC8F66
  • editorHint.foreground#6F5C4A
  • editorIndentGuide.activeBackground1#6F0404
  • editorIndentGuide.background1#130101
  • editorInfo.foreground#ACA182
  • editorLineNumber.activeForeground#BD2007
  • editorLineNumber.foreground#5C4A3A
  • editorLink.activeForeground#DC8F66
  • editorOverviewRuler.border#080101
  • editorOverviewRuler.errorForeground#FF3B1F
  • editorOverviewRuler.findMatchForeground#BD200788
  • editorOverviewRuler.warningForeground#DC8F66
  • editorRuler.foreground#130101
  • editorWarning.foreground#DC8F66
  • editorWhitespace.foreground#130101
  • extensionButton.prominentBackground#6F0404
  • extensionButton.prominentHoverBackground#941205
  • focusBorder#BD2007
  • foreground#E8E2B8
  • gitDecoration.addedResourceForeground#ACA182
  • gitDecoration.conflictingResourceForeground#FF3B1F
  • gitDecoration.deletedResourceForeground#BD2007
  • gitDecoration.ignoredResourceForeground#6F5C4A
  • gitDecoration.modifiedResourceForeground#DC8F66
  • gitDecoration.untrackedResourceForeground#E8E2B8
  • input.background#130101
  • input.border#6F0404
  • input.foreground#FEFFC5
  • input.placeholderForeground#6F5C4A
  • inputOption.activeBackground#6F040466
  • inputOption.activeBorder#BD2007
  • inputValidation.errorBackground#941205
  • inputValidation.errorBorder#FF3B1F
  • list.activeSelectionBackground#6F040455
  • list.activeSelectionForeground#FEFFC5
  • list.dropBackground#6F040466
  • list.focusBackground#6F040455
  • list.focusForeground#FEFFC5
  • list.highlightForeground#BD2007
  • list.hoverBackground#130101AA
  • list.hoverForeground#FEFFC5
  • list.inactiveSelectionBackground#13010188
  • list.inactiveSelectionForeground#D5CBA0
  • listFilterWidget.background#130101
  • listFilterWidget.outline#BD2007
  • menu.background#130101
  • menu.border#080101
  • menu.foreground#E8E2B8
  • menu.selectionBackground#6F0404
  • menu.selectionForeground#FEFFC5
  • menu.separatorBackground#080101
  • menubar.selectionBackground#6F040466
  • menubar.selectionForeground#FEFFC5
  • minimap.background#080101
  • minimap.errorHighlight#FF3B1F
  • minimap.findMatchHighlight#BD200755
  • minimap.selectionHighlight#6F040455
  • minimap.warningHighlight#DC8F66
  • minimapSlider.activeBackground#6F040477
  • minimapSlider.background#6F040433
  • minimapSlider.hoverBackground#6F040455
  • notificationCenterHeader.background#130101
  • notifications.background#130101
  • notifications.border#080101
  • notifications.foreground#E8E2B8
  • notificationsErrorIcon.foreground#FF3B1F
  • notificationsInfoIcon.foreground#ACA182
  • notificationsWarningIcon.foreground#DC8F66
  • panel.background#080101
  • panel.border#130101
  • panelTitle.activeBorder#BD2007
  • panelTitle.activeForeground#FEFFC5
  • panelTitle.inactiveForeground#6F5C4A
  • peekView.border#BD2007
  • peekViewEditor.background#080101
  • peekViewEditor.matchHighlightBackground#BD200755
  • peekViewResult.background#130101
  • peekViewResult.selectionBackground#6F040455
  • peekViewTitle.background#130101
  • peekViewTitleDescription.foreground#ACA182
  • peekViewTitleLabel.foreground#FEFFC5
  • progressBar.background#BD2007
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#BD200788
  • scrollbarSlider.background#6F040455
  • scrollbarSlider.hoverBackground#6F040488
  • selection.background#6F040466
  • sideBar.background#080101
  • sideBar.border#130101
  • sideBar.foreground#D5CBA0
  • sideBarSectionHeader.background#130101AA
  • sideBarSectionHeader.border#130101
  • sideBarSectionHeader.foreground#E8E2B8
  • sideBarTitle.foreground#ACA182
  • statusBar.background#130101
  • statusBar.border#080101
  • statusBar.debuggingBackground#941205
  • statusBar.debuggingForeground#FEFFC5
  • statusBar.foreground#E8E2B8
  • statusBar.noFolderBackground#130101
  • statusBarItem.hoverBackground#6F040455
  • statusBarItem.prominentBackground#BD2007
  • statusBarItem.prominentHoverBackground#941205
  • statusBarItem.remoteBackground#6F0404
  • statusBarItem.remoteForeground#FEFFC5
  • tab.activeBackground#130101
  • tab.activeBorderTop#BD2007
  • tab.activeForeground#FEFFC5
  • tab.border#080101
  • tab.hoverBackground#130101AA
  • tab.inactiveBackground#080101
  • tab.inactiveForeground#6F5C4A
  • tab.unfocusedActiveBorderTop#6F0404
  • terminal.ansiBlack#080101
  • terminal.ansiBlue#8C8164
  • terminal.ansiBrightBlack#6F5C4A
  • terminal.ansiBrightBlue#A8967A
  • terminal.ansiBrightCyan#E8A87C
  • terminal.ansiBrightGreen#C9C29B
  • terminal.ansiBrightMagenta#C2401A
  • terminal.ansiBrightRed#FF3B1F
  • terminal.ansiBrightWhite#FEFFC5
  • terminal.ansiBrightYellow#F5F0C8
  • terminal.ansiCyan#DC8F66
  • terminal.ansiGreen#ACA182
  • terminal.ansiMagenta#941205
  • terminal.ansiRed#BD2007
  • terminal.ansiWhite#D5CBA0
  • terminal.ansiYellow#E8E2B8
  • terminal.background#080101
  • terminal.foreground#FEFFC5
  • terminalCursor.background#080101
  • terminalCursor.foreground#BD2007
  • titleBar.activeBackground#080101
  • titleBar.activeForeground#FEFFC5
  • titleBar.border#130101
  • titleBar.inactiveBackground#080101
  • titleBar.inactiveForeground#6F5C4A
  • tree.indentGuidesStroke#130101
  • welcomePage.background#080101
  • welcomePage.tileBackground#130101
  • widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ACA182italic
variable, string constant.other.placeholder#F2F1BB
constant.other.color#FEFFC5
invalid, invalid.illegal#FF3B1Funderline italic
keyword, storage.type, storage.modifier#CA4D2D
keyword.control, constant.other.color, punctuation, meta.tag, 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#ACA182
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D16340
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#DC8F66
meta.block variable.other#F2F1BB
support.other.variable, string.other.link#DC8F66
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#BE8561
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#E8E2B8
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#8C8164
support.type#8C8164
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#8C8164
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF3B1F
variable.language#D16340italic
entity.name.method.js#DC8F66italic
meta.class-method.js entity.name.function.js, variable.function.constructor#DC8F66
entity.other.attribute-name#CA4D2D
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#DC8F66italic
entity.other.attribute-name.class#DC8F66
source.sass keyword.control#CA4D2D
markup.inserted#ACA182
markup.deleted#CA4D2D
markup.changed#DC8F66
string.regexp#BE8561
constant.character.escape#BE8561
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#D16340italic
source.js constant.other.object.key.js string.unquoted.label.js#FF3B1Fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#CA4D2D
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8C8164
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#BE8561
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#FF3B1F
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DC8F66
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D16340
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 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#ACA182
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CA4D2D
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8E2B8
text.html.markdown, punctuation.definition.list_item.markdown#F2F1BB
text.html.markdown markup.inline.raw.markdown#DC8F66
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6F5C4A
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#BD2007bold
markup.italic#DC8F66italic
markup.bold, markup.bold string#DC8F66bold
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#DC8F66bold
markup.underline#BE8561underline
markup.quote punctuation.definition.blockquote.markdown#6F5C4A
markup.quote#ACA182italic
string.other.link.title.markdown#D16340
string.other.link.description.title.markdown#DC8F66
constant.other.reference.link.markdown#8C8164
markup.raw.block#DC8F66
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F2F1BB
variable.language.fenced.markdown#6F5C4A
meta.separator#6F5C4Abold
markup.table#F2F1BB