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#1C1612
  • activityBar.border#2E241C
  • activityBar.foreground#E8D8B5
  • activityBar.inactiveForeground#897860
  • activityBarBadge.background#E8A878
  • activityBarBadge.foreground#181210
  • badge.background#E8A878
  • badge.foreground#181210
  • breadcrumb.activeSelectionForeground#E8D8B5
  • breadcrumb.background#181210
  • breadcrumb.foreground#897860
  • breadcrumbPicker.background#1F1814
  • button.background#4A3820
  • button.foreground#E8D8B5
  • button.hoverBackground#2E241C
  • button.secondaryBackground#2E241C
  • button.secondaryForeground#E8D8B5
  • diffEditor.insertedTextBackground#9ACBA820
  • diffEditor.removedTextBackground#E0806820
  • dropdown.background#1F1814
  • dropdown.border#2E241C
  • dropdown.foreground#E8D8B5
  • editor.background#181210
  • editor.findMatchBackground#E8B08070
  • editor.findMatchHighlightBackground#E8B08030
  • editor.foreground#E8D8B5
  • editor.inactiveSelectionBackground#4A382040
  • editor.lineHighlightBackground#1F1814
  • editor.selectionBackground#4A382080
  • editor.selectionHighlightBackground#4A382080
  • editor.wordHighlightBackground#4A382040
  • editor.wordHighlightStrongBackground#4A382080
  • editorBracketMatch.background#4A382080
  • editorBracketMatch.border#897860
  • editorCursor.foreground#C8C078
  • editorError.foreground#E08068
  • editorGroup.border#2E241C
  • editorGroupHeader.tabsBackground#241C16
  • editorGroupHeader.tabsBorder#2E241C
  • editorGutter.background#181210
  • editorHint.foreground#C8C078
  • editorIndentGuide.activeBackground1#544A38
  • editorIndentGuide.background1#241C16
  • editorInfo.foreground#9ACBA8
  • editorLineNumber.activeForeground#C0AE88
  • editorLineNumber.foreground#544A38
  • editorOverviewRuler.border#2E241C
  • editorStickyScroll.background#241C16
  • editorStickyScrollHover.background#1F1814
  • editorWarning.foreground#E8A878
  • editorWhitespace.foreground#241C16
  • extensionButton.prominentBackground#4A3820
  • extensionButton.prominentForeground#E8D8B5
  • extensionButton.prominentHoverBackground#2E241C
  • focusBorder#E8A87880
  • gitDecoration.addedResourceForeground#9ACBA8
  • gitDecoration.conflictingResourceForeground#E8A878
  • gitDecoration.deletedResourceForeground#E08068
  • gitDecoration.ignoredResourceForeground#544A38
  • gitDecoration.modifiedResourceForeground#D4B878
  • gitDecoration.untrackedResourceForeground#C8C078
  • input.background#1F1814
  • input.border#2E241C
  • input.foreground#E8D8B5
  • input.placeholderForeground#544A38
  • inputValidation.errorBorder#E08068
  • inputValidation.warningBorder#E8A878
  • list.activeSelectionBackground#1C1612
  • list.activeSelectionForeground#E8D8B5
  • list.focusBackground#1C1612
  • list.focusForeground#E8D8B5
  • list.highlightForeground#E8A878
  • list.hoverBackground#1F1814
  • list.inactiveSelectionBackground#241C16
  • list.inactiveSelectionForeground#C0AE88
  • menu.background#1F1814
  • menu.border#2E241C
  • menu.foreground#E8D8B5
  • menu.selectionBackground#1C1612
  • menu.selectionForeground#E8D8B5
  • menu.separatorBackground#2E241C
  • menubar.selectionBackground#4A382040
  • menubar.selectionForeground#E8D8B5
  • notificationLink.foreground#E8A878
  • notifications.background#241C16
  • notifications.border#2E241C
  • notifications.foreground#E8D8B5
  • panel.background#241C16
  • panel.border#2E241C
  • panelTitle.activeBorder#E8A878
  • panelTitle.activeForeground#E8D8B5
  • panelTitle.inactiveForeground#897860
  • peekView.border#E8A878
  • peekViewEditor.background#1F1814
  • peekViewEditorGutter.background#1F1814
  • peekViewResult.background#241C16
  • peekViewResult.fileForeground#E8D8B5
  • peekViewResult.lineForeground#C0AE88
  • peekViewResult.selectionBackground#1C1612
  • peekViewResult.selectionForeground#E8D8B5
  • peekViewTitle.background#1C1612
  • peekViewTitleDescription.foreground#897860
  • peekViewTitleLabel.foreground#E8D8B5
  • quickInput.background#181210
  • quickInput.foreground#E8D8B5
  • quickInputList.focusBackground#1C1612
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#C0AE8880
  • scrollbarSlider.background#544A3860
  • scrollbarSlider.hoverBackground#89786070
  • sideBar.background#241C16
  • sideBar.border#2E241C
  • sideBar.foreground#C0AE88
  • sideBarSectionHeader.background#1C1612
  • sideBarSectionHeader.border#2E241C
  • sideBarSectionHeader.foreground#C0AE88
  • sideBarTitle.foreground#E8D8B5
  • statusBar.background#2E241C
  • statusBar.border#2E241C
  • statusBar.foreground#E8D8B5
  • statusBar.noFolderBackground#2E241C
  • statusBarItem.hoverBackground#FFFFFF15
  • statusBarItem.remoteBackground#2E241C
  • statusBarItem.remoteForeground#E8D8B5
  • symbolIcon.classForeground#C8C078
  • symbolIcon.constantForeground#E8B080
  • symbolIcon.functionForeground#9ACBA8
  • symbolIcon.keywordForeground#E8A878
  • symbolIcon.numberForeground#E8B080
  • symbolIcon.propertyForeground#C0A878
  • symbolIcon.stringForeground#D4B878
  • symbolIcon.variableForeground#E8D8B5
  • tab.activeBackground#181210
  • tab.activeBorderTop#E8A878
  • tab.activeForeground#E8D8B5
  • tab.border#2E241C
  • tab.inactiveBackground#241C16
  • tab.inactiveForeground#897860
  • tab.unfocusedActiveBackground#181210
  • tab.unfocusedActiveForeground#C0AE88
  • terminal.ansiBlack#1F1814
  • terminal.ansiBlue#9ACBA8
  • terminal.ansiBrightBlack#897860
  • terminal.ansiBrightBlue#9ACBA8
  • terminal.ansiBrightCyan#E8A878
  • terminal.ansiBrightGreen#C8C078
  • terminal.ansiBrightMagenta#E8A878
  • terminal.ansiBrightRed#E08068
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E8B080
  • terminal.ansiCyan#E8A878
  • terminal.ansiGreen#D4B878
  • terminal.ansiMagenta#E8A878
  • terminal.ansiRed#E08068
  • terminal.ansiWhite#E8D8B5
  • terminal.ansiYellow#E8B080
  • terminal.background#181210
  • terminal.foreground#E8D8B5
  • terminalCursor.foreground#C8C078
  • titleBar.activeBackground#1C1612
  • titleBar.activeForeground#E8D8B5
  • titleBar.border#2E241C
  • titleBar.inactiveBackground#241C16
  • titleBar.inactiveForeground#897860
  • tree.indentGuidesStroke#241C16
  • widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#897860italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, storage.modifier#E8A878bold
storage.type#E8A878
string, string.quoted, string.template#D4B878
constant.character.escape, string.regexp#C8C078
punctuation.definition.template-expression, punctuation.section.embedded#C8C078
constant.numeric, constant.language.numeric#E8B080
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#C8C078italic
constant.other#C8C078
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#9ACBA8
meta.decorator, punctuation.decorator, entity.name.function.decorator#9ACBA8italic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#E08068
entity.name.type.interface#E08068italic
meta.type.annotation, support.type, entity.name.type.alias#D4B878
variable, variable.other, variable.other.readwrite#E8D8B5
variable.parameter#C8B488italic
variable.other.property, support.variable.property, meta.object-literal.key#DCCBA4
variable.language.self, variable.language.this, variable.language.super#E8A878italic
entity.name.module, entity.name.namespace, variable.other.module#D4B878
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#C0AE88
punctuation, meta.brace, punctuation.separator, punctuation.terminator#897860
entity.name.tag, meta.tag#E08068
entity.other.attribute-name, meta.tag.attributes#D4B878
support.type.property-name.css, entity.name.tag.css, support.constant.property-value.css#9ACBA8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E08068
constant.numeric.css, keyword.other.unit.css#E8B080
markup.heading, entity.name.section.markdown#E8A878bold
markup.bold#F4E8C8bold
markup.italic#C0AE88italic
markup.underline.link, string.other.link#9ACBA8
markup.inline.raw, markup.fenced_code.block#C8C078
markup.quote#897860italic
variable.parameter.function.language.python#E8A878italic
support.function.builtin.python#9ACBA8
support.type.property-name.json#9ACBA8
entity.name.tag.yaml#9ACBA8
invalid, invalid.illegal#E08068underline
invalid.deprecated#E8A878strikethrough