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#1E2827
  • activityBar.border#16201F
  • activityBar.foreground#EBE5CF
  • activityBar.inactiveForeground#817E72
  • activityBarBadge.background#D03D01
  • activityBarBadge.foreground#EBE5CF
  • badge.background#D03D01
  • badge.foreground#EBE5CF
  • button.background#D03D01
  • button.foreground#EBE5CF
  • button.hoverBackground#EE5B1F
  • button.secondaryBackground#3E4847
  • button.secondaryForeground#EBE5CF
  • button.secondaryHoverBackground#485251
  • descriptionForeground#AFA993
  • diffEditor.insertedLineBackground#BBA14A15
  • diffEditor.insertedTextBackground#BBA14A22
  • diffEditor.removedLineBackground#D03D0115
  • diffEditor.removedTextBackground#D03D0122
  • disabledForeground#817E72
  • dropdown.background#36403F
  • dropdown.border#3E4847
  • dropdown.foreground#EBE5CF
  • editor.background#26302F
  • editor.findMatchBackground#D03D0160
  • editor.findMatchHighlightBackground#BBA14A40
  • editor.foreground#EBE5CF
  • editor.inactiveSelectionBackground#3E484740
  • editor.lineHighlightBackground#36403F
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#D03D0140
  • editor.selectionHighlightBackground#BBA14A30
  • editor.wordHighlightBackground#BBA14A25
  • editor.wordHighlightStrongBackground#D03D0130
  • editorBracketMatch.background#BBA14A30
  • editorBracketMatch.border#BBA14A
  • editorCursor.foreground#D03D01
  • editorGroup.border#16201F
  • editorGroupHeader.tabsBackground#2E3837
  • editorGutter.addedBackground#BBA14A
  • editorGutter.background#26302F
  • editorGutter.deletedBackground#D03D01
  • editorGutter.modifiedBackground#D9BF68
  • editorHoverWidget.background#1E2827
  • editorHoverWidget.border#3E4847
  • editorIndentGuide.activeBackground1#BBA14A
  • editorIndentGuide.background1#3E4847
  • editorLineNumber.activeForeground#EBE5CF
  • editorLineNumber.foreground#817E72
  • editorRuler.foreground#3E4847
  • editorSuggestWidget.background#1E2827
  • editorSuggestWidget.border#3E4847
  • editorSuggestWidget.highlightForeground#D03D01
  • editorSuggestWidget.selectedBackground#36403F
  • editorWhitespace.foreground#3E4847
  • editorWidget.background#1E2827
  • editorWidget.border#3E4847
  • errorForeground#EE5B1F
  • focusBorder#D03D01
  • foreground#EBE5CF
  • gitDecoration.addedResourceForeground#BBA14A
  • gitDecoration.conflictingResourceForeground#EE5B1F
  • gitDecoration.deletedResourceForeground#D03D01
  • gitDecoration.ignoredResourceForeground#817E72
  • gitDecoration.modifiedResourceForeground#D9BF68
  • gitDecoration.untrackedResourceForeground#D9BF68
  • icon.foreground#AFA993
  • input.background#36403F
  • input.border#3E4847
  • input.foreground#EBE5CF
  • input.placeholderForeground#817E72
  • list.activeSelectionBackground#3E4847
  • list.activeSelectionForeground#EBE5CF
  • list.dropBackground#3E4847
  • list.focusBackground#3E4847
  • list.focusForeground#EBE5CF
  • list.highlightForeground#D03D01
  • list.hoverBackground#36403F
  • list.inactiveSelectionBackground#36403F
  • list.inactiveSelectionForeground#EBE5CF
  • minimap.background#26302F
  • minimap.selectionHighlight#B21F0080
  • notifications.background#1E2827
  • notifications.border#3E4847
  • notifications.foreground#EBE5CF
  • panel.background#1E2827
  • panel.border#16201F
  • panelTitle.activeBorder#D03D01
  • panelTitle.activeForeground#EBE5CF
  • panelTitle.inactiveForeground#817E72
  • peekView.border#D03D01
  • peekViewEditor.background#2E3837
  • peekViewResult.background#1E2827
  • peekViewTitle.background#1E2827
  • scrollbarSlider.activeBackground#D03D0180
  • scrollbarSlider.background#48525180
  • scrollbarSlider.hoverBackground#565F5FA0
  • sideBar.background#2E3837
  • sideBar.border#16201F
  • sideBar.foreground#EBE5CF
  • sideBarSectionHeader.background#2E3837
  • sideBarSectionHeader.foreground#EBE5CF
  • sideBarTitle.foreground#EBE5CF
  • statusBar.background#1E2827
  • statusBar.border#16201F
  • statusBar.debuggingBackground#B21F00
  • statusBar.debuggingForeground#EBE5CF
  • statusBar.foreground#AFA993
  • statusBar.noFolderBackground#1E2827
  • tab.activeBackground#26302F
  • tab.activeBorderTop#D03D01
  • tab.activeForeground#EBE5CF
  • tab.border#16201F
  • tab.inactiveBackground#2E3837
  • tab.inactiveForeground#817E72
  • tab.unfocusedActiveForeground#AFA993
  • terminal.ansiBlack#1E2827
  • terminal.ansiBlue#B21F00
  • terminal.ansiBrightBlack#485251
  • terminal.ansiBrightBlue#D03D01
  • terminal.ansiBrightCyan#647070
  • terminal.ansiBrightGreen#D9BF68
  • terminal.ansiBrightMagenta#9D832C
  • terminal.ansiBrightRed#EE5B1F
  • terminal.ansiBrightWhite#EBE5CF
  • terminal.ansiBrightYellow#E8D492
  • terminal.ansiCyan#56605F
  • terminal.ansiGreen#BBA14A
  • terminal.ansiMagenta#EE5B1F
  • terminal.ansiRed#D03D01
  • terminal.ansiWhite#AFA993
  • terminal.ansiYellow#D9BF68
  • terminal.background#26302F
  • terminal.foreground#EBE5CF
  • terminalCursor.foreground#D03D01
  • titleBar.activeBackground#1E2827
  • titleBar.activeForeground#EBE5CF
  • titleBar.border#16201F
  • titleBar.inactiveBackground#1E2827
  • titleBar.inactiveForeground#817E72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#BBA14Aitalic
variable, string constant.other.placeholder#EBE5CF
constant.other.color#EBE5CF
invalid, invalid.illegal#D03D01bold underline
keyword, storage.type, storage.modifier#D03D01
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#AFA993
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D03D01
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#D9BF68
meta.block variable.other#EBE5CF
support.other.variable, string.other.link#EBE5CF
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#EE5B1F
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#D9BF68
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#BBA14A
support.type#AFA993
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#AFA993
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EE5B1F
variable.language#D03D01italic
entity.name.method.js#D9BF68italic
meta.class-method.js entity.name.function.js, variable.function.constructor#D9BF68
entity.other.attribute-name#BBA14A
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#BBA14Aitalic
entity.other.attribute-name.class#BBA14A
source.sass keyword.control#D03D01
markup.inserted#BBA14A
markup.deleted#D03D01
markup.changed#D9BF68
string.regexp#D9BF68
constant.character.escape#EE5B1F
*url*, *link*, *uri*#AFA993underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#D03D01italic
source.js constant.other.object.key.js string.unquoted.label.js#EE5B1Fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#D03D01
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BBA14A
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#D9BF68
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#EE5B1F
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#EBE5CF
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#D03D01
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#BBA14A
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#D9BF68
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#EE5B1F
text.html.markdown, punctuation.definition.list_item.markdown#EBE5CF
text.html.markdown markup.inline.raw.markdown#D9BF68
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#817E72
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#D03D01bold
markup.italic#EBE5CFitalic
markup.bold, markup.bold string#EBE5CFbold
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#EBE5CFbold
markup.underline#D9BF68underline
markup.quote punctuation.definition.blockquote.markdown#817E72
markup.quote#AFA993italic
string.other.link.title.markdown#D9BF68
string.other.link.description.title.markdown#BBA14A
constant.other.reference.link.markdown#D03D01
markup.raw.block#D9BF68
markup.raw.block.fenced.markdown#817E72
punctuation.definition.fenced.markdown#817E72
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EBE5CF
variable.language.fenced.markdown#AFA993
meta.separator#817E72bold
markup.table#EBE5CF
BeauxCodes: DarkRetro by BeauxCodes - VS Code Theme