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.bold—bold
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.italic—italic
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—