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

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#637163—
meta.embedded.line#D56500—
variable.other.constant#259D94—
meta.tag.metadata.doctype, meta.tag.sgml.doctype.html, meta.tag.sgml.html#637163—
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—