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#040302
  • activityBar.border#1F1A12
  • activityBar.foreground#CFC4A8
  • activityBar.inactiveForeground#7E7460
  • activityBarBadge.background#C86038
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C86038
  • 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
  • charts.blue#6FA0B8
  • charts.foreground#CFC4A8
  • charts.green#80B89A
  • charts.lines#7E7460
  • charts.orange#D89060
  • charts.purple#B59868
  • charts.red#D26A55
  • charts.yellow#D4B068
  • chat.slashCommandBackground#1F1A12
  • chat.slashCommandForeground#3FC8AE
  • descriptionForeground#9A9078
  • 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#3FC8AE
  • editorError.foreground#D26A55
  • editorGroup.border#1F1A12
  • editorGroupHeader.tabsBackground#060503
  • editorGroupHeader.tabsBorder#1F1A12
  • editorGutter.background#000000
  • editorHint.foreground#B5C078
  • editorIndentGuide.activeBackground1#4F4838
  • editorIndentGuide.background1#13100A
  • editorInfo.foreground#3FC8AE
  • editorLineNumber.activeForeground#AAA088
  • editorLineNumber.foreground#4F4838
  • editorOverviewRuler.border#1F1A12
  • editorStickyScroll.background#060503
  • editorStickyScrollHover.background#0C0A06
  • editorWarning.foreground#D89060
  • editorWhitespace.foreground#13100A
  • errorForeground#D26A55
  • extensionButton.prominentBackground#3A2E18
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#1F1A12
  • focusBorder#C8603880
  • foreground#CFC4A8
  • 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
  • inputOption.activeBorder#C86038
  • inputValidation.errorBorder#D26A55
  • inputValidation.warningBorder#D89060
  • list.activeSelectionBackground#120F08
  • list.activeSelectionForeground#CFC4A8
  • list.focusBackground#120F08
  • list.focusForeground#CFC4A8
  • list.highlightForeground#C86038
  • list.hoverBackground#0C0A06
  • list.inactiveSelectionBackground#060503
  • 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#3FC8AE
  • notifications.background#060503
  • notifications.border#1F1A12
  • notifications.foreground#CFC4A8
  • panel.background#060503
  • panel.border#1F1A12
  • panelTitle.activeBorder#C86038
  • panelTitle.activeForeground#CFC4A8
  • panelTitle.inactiveForeground#7E7460
  • peekView.border#C86038
  • peekViewEditor.background#0A0805
  • peekViewEditorGutter.background#0A0805
  • peekViewResult.background#060503
  • peekViewResult.fileForeground#CFC4A8
  • peekViewResult.lineForeground#AAA088
  • peekViewResult.selectionBackground#120F08
  • peekViewResult.selectionForeground#CFC4A8
  • peekViewTitle.background#120F08
  • peekViewTitleDescription.foreground#7E7460
  • peekViewTitleLabel.foreground#CFC4A8
  • progressBar.background#C86038
  • quickInput.background#000000
  • quickInput.foreground#CFC4A8
  • quickInputList.focusBackground#120F08
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#AAA08880
  • scrollbarSlider.background#4F483860
  • scrollbarSlider.hoverBackground#7E746070
  • sideBar.background#060503
  • sideBar.border#1F1A12
  • sideBar.foreground#AAA088
  • sideBarActivityBarTop.border#1F1A12
  • 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#E8A230
  • symbolIcon.constantForeground#EDE2C6
  • symbolIcon.functionForeground#3FC8AE
  • symbolIcon.keywordForeground#C86038
  • symbolIcon.numberForeground#EDE2C6
  • symbolIcon.propertyForeground#B59868
  • symbolIcon.stringForeground#A8B478
  • symbolIcon.variableForeground#CFC4A8
  • tab.activeBackground#000000
  • tab.activeBorderTop#C86038
  • tab.activeForeground#CFC4A8
  • tab.border#1F1A12
  • tab.inactiveBackground#060503
  • tab.inactiveForeground#7E7460
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveForeground#AAA088
  • terminal.ansiBlack#4F4838
  • terminal.ansiBlue#6FA0B8
  • terminal.ansiBrightBlack#7E7460
  • terminal.ansiBrightBlue#8FB8CC
  • terminal.ansiBrightCyan#9AD2D2
  • terminal.ansiBrightGreen#9ACBA8
  • terminal.ansiBrightMagenta#E4A092
  • terminal.ansiBrightRed#E07A60
  • terminal.ansiBrightWhite#EDE2C6
  • terminal.ansiBrightYellow#E0BC78
  • terminal.ansiCyan#80C0C0
  • terminal.ansiGreen#80B89A
  • terminal.ansiMagenta#D88A78
  • terminal.ansiRed#D26A55
  • terminal.ansiWhite#AAA088
  • terminal.ansiYellow#D4B068
  • terminal.background#000000
  • terminal.foreground#CFC4A8
  • terminalCursor.foreground#A8B580
  • textLink.activeForeground#62D8BE
  • textLink.foreground#3FC8AE
  • titleBar.activeBackground#040302
  • titleBar.activeForeground#CFC4A8
  • titleBar.border#1F1A12
  • titleBar.inactiveBackground#060503
  • 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#C86038bold
storage.type#C86038
string, string.quoted, string.template#A8B478
constant.character.escape, string.regexp#B8C488
punctuation.definition.template-expression, punctuation.section.embedded#B8C488
constant.numeric, constant.language.numeric#EDE2C6
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#EDE2C6italic
constant.other#EDE2C6
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#3FC8AE
meta.decorator, punctuation.decorator, entity.name.function.decorator#3FC8AEitalic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#E8A230
entity.name.type.interface#E8A230italic
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#FF8814italic
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#E8A230
entity.other.attribute-name, meta.tag.attributes#C9A86A
support.type.property-name.css, entity.name.tag.css, support.constant.property-value.css#3FC8AE
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E8A230
constant.numeric.css, keyword.other.unit.css#EDE2C6
markup.heading, entity.name.section.markdown#C86038bold
markup.bold#EDE2C6bold
markup.italic#AAA088italic
markup.underline.link, string.other.link#3FC8AE
markup.inline.raw, markup.fenced_code.block#C9A86A
markup.quote#7E7460italic
variable.parameter.function.language.python#FF8814italic
support.function.builtin.python#3FC8AE
support.type.property-name.json#3FC8AE
entity.name.tag.yaml#3FC8AE
invalid, invalid.illegal#D26A55underline
invalid.deprecated#DDA065strikethrough