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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#53676D—
invalid#CC1729bold
entity.name.tag.yaml, keyword.control.at-rule, meta.at-rule, support.constant.media.css#489100—
entity.other.attribute-name.html#489100—
string.quoted.double.html, string.quoted.single.html#009C8F—
markup.bold—bold
constant.language, constant.language.boolean#009C8F—
entity.other.attribute-name.class.css#0072D4—
entity.name.type.class#0072D4—
text.html.markdown markup.inline.raw, text.html.markdown markup.raw#0072D4—
comment#909995—
meta.embedded.line#C25D1E—
variable.other.constant#009C8F—
meta.tag.metadata.doctype, meta.tag.sgml.doctype.html, meta.tag.sgml.html#909995—
entity.name.function, support.function#0072D4—
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#489100bold
markup.italic—italic
constant.language.undefined, keyword, markup.inline.raw, markup.raw, storage#489100—
constant.language.null#009C8F—
entity.name.type.namespace, storage.modifier.import#0072D4—
constant.numeric#009C8F—
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#489100—
meta.property-list, support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, variable.other.property#AD8900—
punctuation.definition.tag, punctuation.separator#53676D—
string.regexp#009C8F—
meta.selector, source.css entity.name.tag, source.css entity.other.attribute-name#489100—
string#009C8F—
meta.document.yaml, meta.tag, storage.type.tag#0072D4—
markup.heading#A78300bold
variable.other.object#53676D—
markup.underline.link#0072D4—
meta.property-list.css, source.css keyword.other#0072D4—
source.css variable#C25D1E—