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#120F08
  • activityBar.border#1F1A12
  • activityBar.foreground#CFC4A8
  • activityBar.inactiveForeground#7E7460
  • activityBarBadge.background#D89060
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D89060
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#CFC4A8
  • breadcrumb.background#000000
  • breadcrumb.foreground#7E7460
  • breadcrumbPicker.background#0A0805
  • button.background#3A2E18
  • button.foreground#FFFFFF
  • button.hoverBackground#1F1A12
  • button.secondaryBackground#1F1A12
  • button.secondaryForeground#CFC4A8
  • diffEditor.insertedTextBackground#80B89A20
  • diffEditor.removedTextBackground#D26A5520
  • dropdown.background#0A0805
  • dropdown.border#1F1A12
  • dropdown.foreground#CFC4A8
  • editor.background#000000
  • editor.findMatchBackground#DDA06570
  • editor.findMatchHighlightBackground#DDA06530
  • editor.foreground#CFC4A8
  • editor.inactiveSelectionBackground#3A2E1840
  • editor.lineHighlightBackground#0C0A06
  • editor.selectionBackground#3A2E1880
  • editor.selectionHighlightBackground#3A2E1880
  • editor.wordHighlightBackground#3A2E1840
  • editor.wordHighlightStrongBackground#3A2E1880
  • editorBracketMatch.background#3A2E1880
  • editorBracketMatch.border#7E7460
  • editorCursor.foreground#A8B580
  • editorError.foreground#D26A55
  • editorGroup.border#1F1A12
  • editorGroupHeader.tabsBackground#181410
  • editorGroupHeader.tabsBorder#1F1A12
  • editorGutter.background#000000
  • editorHint.foreground#B5C078
  • editorIndentGuide.activeBackground1#4F4838
  • editorIndentGuide.background1#13100A
  • editorInfo.foreground#80B89A
  • editorLineNumber.activeForeground#AAA088
  • editorLineNumber.foreground#4F4838
  • editorOverviewRuler.border#1F1A12
  • editorStickyScroll.background#181410
  • editorStickyScrollHover.background#0C0A06
  • editorWarning.foreground#D89060
  • editorWhitespace.foreground#13100A
  • extensionButton.prominentBackground#3A2E18
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#1F1A12
  • focusBorder#D8906080
  • gitDecoration.addedResourceForeground#80B89A
  • gitDecoration.conflictingResourceForeground#D89060
  • gitDecoration.deletedResourceForeground#D26A55
  • gitDecoration.ignoredResourceForeground#4F4838
  • gitDecoration.modifiedResourceForeground#D4B068
  • gitDecoration.untrackedResourceForeground#B5C078
  • input.background#0A0805
  • input.border#1F1A12
  • input.foreground#CFC4A8
  • input.placeholderForeground#4F4838
  • inputValidation.errorBorder#D26A55
  • inputValidation.warningBorder#D89060
  • list.activeSelectionBackground#120F08
  • list.activeSelectionForeground#CFC4A8
  • list.focusBackground#120F08
  • list.focusForeground#CFC4A8
  • list.highlightForeground#D89060
  • list.hoverBackground#0C0A06
  • list.inactiveSelectionBackground#181410
  • list.inactiveSelectionForeground#AAA088
  • menu.background#0A0805
  • menu.border#1F1A12
  • menu.foreground#CFC4A8
  • menu.selectionBackground#120F08
  • menu.selectionForeground#CFC4A8
  • menu.separatorBackground#1F1A12
  • menubar.selectionBackground#3A2E1840
  • menubar.selectionForeground#CFC4A8
  • notificationLink.foreground#D89060
  • notifications.background#181410
  • notifications.border#1F1A12
  • notifications.foreground#CFC4A8
  • panel.background#181410
  • panel.border#1F1A12
  • panelTitle.activeBorder#D89060
  • panelTitle.activeForeground#CFC4A8
  • panelTitle.inactiveForeground#7E7460
  • peekView.border#D89060
  • peekViewEditor.background#0A0805
  • peekViewEditorGutter.background#0A0805
  • peekViewResult.background#181410
  • peekViewResult.fileForeground#CFC4A8
  • peekViewResult.lineForeground#AAA088
  • peekViewResult.selectionBackground#120F08
  • peekViewResult.selectionForeground#CFC4A8
  • peekViewTitle.background#120F08
  • peekViewTitleDescription.foreground#7E7460
  • peekViewTitleLabel.foreground#CFC4A8
  • quickInput.background#000000
  • quickInput.foreground#CFC4A8
  • quickInputList.focusBackground#120F08
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#AAA08880
  • scrollbarSlider.background#4F483860
  • scrollbarSlider.hoverBackground#7E746070
  • sideBar.background#181410
  • sideBar.border#1F1A12
  • sideBar.foreground#AAA088
  • sideBarSectionHeader.background#120F08
  • sideBarSectionHeader.border#1F1A12
  • sideBarSectionHeader.foreground#AAA088
  • sideBarTitle.foreground#CFC4A8
  • statusBar.background#1F1A12
  • statusBar.border#1F1A12
  • statusBar.foreground#CFC4A8
  • statusBar.noFolderBackground#1F1A12
  • statusBarItem.hoverBackground#FFFFFF15
  • statusBarItem.remoteBackground#1F1A12
  • statusBarItem.remoteForeground#CFC4A8
  • symbolIcon.classForeground#B5C078
  • symbolIcon.constantForeground#DDA065
  • symbolIcon.functionForeground#80B89A
  • symbolIcon.keywordForeground#D89060
  • symbolIcon.numberForeground#DDA065
  • symbolIcon.propertyForeground#B59868
  • symbolIcon.stringForeground#D4B068
  • symbolIcon.variableForeground#CFC4A8
  • tab.activeBackground#000000
  • tab.activeBorderTop#D89060
  • tab.activeForeground#CFC4A8
  • tab.border#1F1A12
  • tab.inactiveBackground#181410
  • tab.inactiveForeground#7E7460
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveForeground#AAA088
  • terminal.ansiBlack#CFC4A8
  • terminal.ansiBlue#80B89A
  • terminal.ansiBrightBlack#7E7460
  • terminal.ansiBrightBlue#80B89A
  • terminal.ansiBrightCyan#D89060
  • terminal.ansiBrightGreen#B5C078
  • terminal.ansiBrightMagenta#D89060
  • terminal.ansiBrightRed#D26A55
  • terminal.ansiBrightWhite#CFC4A8
  • terminal.ansiBrightYellow#DDA065
  • terminal.ansiCyan#D89060
  • terminal.ansiGreen#D4B068
  • terminal.ansiMagenta#D89060
  • terminal.ansiRed#D26A55
  • terminal.ansiWhite#7E7460
  • terminal.ansiYellow#DDA065
  • terminal.background#000000
  • terminal.foreground#CFC4A8
  • terminalCursor.foreground#A8B580
  • titleBar.activeBackground#120F08
  • titleBar.activeForeground#CFC4A8
  • titleBar.border#1F1A12
  • titleBar.inactiveBackground#181410
  • titleBar.inactiveForeground#7E7460
  • tree.indentGuidesStroke#13100A
  • widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E6858italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, storage.modifier#DDA065bold
storage.type#DDA065
string, string.quoted, string.template#B5C078
constant.character.escape, string.regexp#C8CE92
punctuation.definition.template-expression, punctuation.section.embedded#C8CE92
constant.numeric, constant.language.numeric#D4B068
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#B5C078italic
constant.other#B5C078
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#80B89A
meta.decorator, punctuation.decorator, entity.name.function.decorator#80B89Aitalic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#D26A55
entity.name.type.interface#D26A55italic
meta.type.annotation, support.type, entity.name.type.alias#C9A86A
variable, variable.other, variable.other.readwrite#CFC4A8
variable.parameter#C2A878italic
variable.other.property, support.variable.property, meta.object-literal.key#C5BCA0
variable.language.self, variable.language.this, variable.language.super#DDA065italic
entity.name.module, entity.name.namespace, variable.other.module#C9A86A
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#B0A484
punctuation, meta.brace, punctuation.separator, punctuation.terminator#7E7460
entity.name.tag, meta.tag#D26A55
entity.other.attribute-name, meta.tag.attributes#C9A86A
support.type.property-name.css, entity.name.tag.css, support.constant.property-value.css#80B89A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D26A55
constant.numeric.css, keyword.other.unit.css#D4B068
markup.heading, entity.name.section.markdown#DDA065bold
markup.bold#EDE2C6bold
markup.italic#AAA088italic
markup.underline.link, string.other.link#80B89A
markup.inline.raw, markup.fenced_code.block#C9A86A
markup.quote#7E7460italic
variable.parameter.function.language.python#DDA065italic
support.function.builtin.python#80B89A
support.type.property-name.json#80B89A
entity.name.tag.yaml#80B89A
invalid, invalid.illegal#D26A55underline
invalid.deprecated#DDA065strikethrough