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.activeBackground#4A3416
  • activityBar.background#3D1E1B
  • activityBar.foreground#819500
  • activityBar.inactiveForeground#7D6665
  • activityBarBadge.background#819500
  • activityBarBadge.foreground#3C1C1C
  • badge.background#819500
  • badge.foreground#3C1C1C
  • breadcrumb.activeSelectionForeground#A6A498
  • breadcrumb.background#472A28
  • breadcrumb.focusForeground#A6A498
  • breadcrumb.foreground#7D6665
  • button.background#819500
  • button.foreground#3C1C1C
  • button.secondaryBackground#3D1E1B
  • button.secondaryForeground#A6A498
  • dropdown.background#472A28
  • dropdown.foreground#A6A498
  • editor.background#3C1C1C
  • editor.foreground#A6A498
  • editor.lineHighlightBackground#4A2726
  • editor.lineHighlightBorder#4A2726
  • editor.selectionBackground#4A2726
  • editor.snippetFinalTabstopHighlightBackground#3C1C1C
  • editor.snippetTabstopHighlightBackground#3C1C1C
  • editor.snippetTabstopHighlightBorder#7D6665
  • editorBracketHighlight.foreground1#A6A498
  • editorCodeLens.foreground#7D6665
  • editorCursor.foreground#819500
  • editorGroupHeader.tabsBackground#3D1E1B
  • editorHoverWidget.background#3D1E1B
  • editorHoverWidget.border#7D6665
  • editorIndentGuide.background1#7D6665
  • editorLineNumber.foreground#7D6665
  • editorLink.activeForeground#819500
  • editorRuler.foreground#3A626F33
  • editorSuggestWidget.background#3D1E1B
  • editorSuggestWidget.focusHighlightForeground#819500
  • editorSuggestWidget.foreground#A6A498
  • editorSuggestWidget.highlightForeground#819500
  • editorSuggestWidget.selectedBackground#3D1E1B
  • editorSuggestWidget.selectedIconForeground#819500
  • editorWhitespace.foreground#3A626F33
  • editorWidget.background#3D1E1B
  • focusBorder#819500
  • foreground#A6A498
  • gitDecoration.ignoredResourceForeground#7D6665
  • icon.foreground#819500
  • input.background#472A28
  • input.foreground#A6A498
  • input.placeholderForeground#7D6665
  • keybindingLabel.background#3C1C1C
  • keybindingLabel.foreground#A6A498
  • list.activeSelectionBackground#4A2726
  • list.activeSelectionForeground#A6A498
  • list.dropBackground#4A2726
  • list.focusBackground#4A2726
  • list.highlightForeground#819500
  • list.hoverBackground#4A2726
  • list.inactiveSelectionBackground#5C4541
  • menu.background#3D1E1B
  • menu.foreground#A6A498
  • menu.selectionBackground#4A2726
  • menu.separatorBackground#4A3416
  • menubar.selectionBackground#4A2726
  • notificationLink.foreground#819500
  • notifications.background#3D1E1B
  • panel.background#472A28
  • panelTitle.activeForeground#A6A498
  • panelTitle.inactiveForeground#7D6665
  • peekView.border#4A2726
  • peekViewEditor.background#3C1C1C
  • peekViewResult.fileForeground#A6A498
  • peekViewResult.lineForeground#A6A498
  • peekViewResult.selectionBackground#4A2726
  • peekViewResult.selectionForeground#A6A498
  • peekViewTitleDescription.foreground#7D6665
  • peekViewTitleLabel.foreground#A6A498
  • pickerGroup.border#3D1E1B
  • pickerGroup.foreground#819500
  • progressBar.background#819500
  • scrollbarSlider.activeBackground#5C4541
  • scrollbarSlider.background#4A3416
  • settings.checkboxForeground#A6A498
  • settings.dropdownForeground#A6A498
  • settings.headerForeground#A6A498
  • settings.numberInputForeground#A6A498
  • settings.textInputForeground#A6A498
  • sideBar.background#472A28
  • sideBar.foreground#A6A498
  • sideBarSectionHeader.background#3C1C1C
  • sideBarTitle.background#3D1E1B
  • sideBarTitle.foreground#A6A498
  • statusBar.background#4A3416
  • statusBar.foreground#A6A498
  • statusBar.noFolderBackground#4A2726
  • statusBar.noFolderForeground#A6A498
  • statusBarItem.remoteForeground#3C1C1C
  • tab.activeBackground#4A3416
  • tab.activeForeground#819500
  • tab.inactiveBackground#472A28
  • tab.inactiveForeground#A6A498
  • terminal.background#3C1C1C
  • terminal.border#4A3416
  • terminal.foreground#A6A498
  • terminalCursor.background#3C1C1C
  • terminalCursor.foreground#819500
  • textLink.foreground#819500
  • titleBar.activeBackground#3D1E1B
  • titleBar.activeForeground#A6A498
  • titleBar.inactiveForeground#7D6665

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#A6A498
invalid#F23749bold
entity.name.tag.yaml, keyword.control.at-rule, meta.at-rule, support.constant.media.css#819500
entity.other.attribute-name.html#819500
string.quoted.double.html, string.quoted.single.html#259D94
markup.boldbold
constant.language, constant.language.boolean#259D94
entity.other.attribute-name.class.css#2B90D8
entity.name.type.class#2B90D8
text.html.markdown markup.inline.raw, text.html.markdown markup.raw#2B90D8
comment#7D6665
meta.embedded.line#D56500
variable.other.constant#259D94
meta.tag.metadata.doctype, meta.tag.sgml.doctype.html, meta.tag.sgml.html#7D6665
entity.name.function, support.function#2B90D8
constant.numeric.yaml-version, entity.other.document, keyword.other.directive, keyword.other.important, meta.directives, punctuation.definition.alias, punctuation.definition.anchor, punctuation.section.embedded, variable.other.alias, variable.other.anchor#819500bold
markup.italicitalic
constant.language.undefined, keyword, markup.inline.raw, markup.raw, storage#819500
constant.language.null#259D94
entity.name.type.namespace, storage.modifier.import#2B90D8
constant.numeric#259D94
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.class, keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational, keyword.other, punctuation.separator.dictionary.key-value#819500
meta.property-list, support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, variable.other.property#AC8300
punctuation.definition.tag, punctuation.separator#A6A498
string.regexp#259D94
meta.selector, source.css entity.name.tag, source.css entity.other.attribute-name#819500
string#259D94
meta.document.yaml, meta.tag, storage.type.tag#2B90D8
markup.heading#AC8300bold
variable.other.object#A6A498
markup.underline.link#2B90D8
meta.property-list.css, source.css keyword.other#2B90D8
source.css variable#D56500