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.

  • actionBar.toggledBackground#00000011
  • activityBar.background#5A9D72
  • activityBar.foreground#FFFCF1
  • activityBarBadge.background#835100
  • activityBarBadge.foreground#FFFCF1
  • badge.background#835100
  • badge.foreground#FFFCF1
  • breadcrumb.activeSelectionForeground#928452
  • breadcrumb.focusForeground#928452
  • breadcrumb.foreground#CAB886
  • breadcrumb.separatorForeground#CAB886
  • button.background#5A9D72
  • button.foreground#FFFCF1
  • button.hoverBackground#7CC597
  • button.secondaryBackground#FFFCF1
  • button.secondaryForeground#936028
  • button.secondaryHoverBackground#FCEAAF
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#FFFCF1
  • commandCenter.border#00000000
  • commandCenter.foreground#FFFCF1
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#FFFCF1
  • descriptionForeground#936028
  • disabledForeground#FFFFFF44
  • dropdown.background#ffffff
  • dropdown.border#E9DDBC
  • dropdown.foreground#936028
  • editor.background#FFFCF1
  • editor.findMatchBackground#7CC59726
  • editor.findMatchBorder#AAD6B1
  • editor.findMatchHighlightBackground#7CC5971A
  • editor.findRangeHighlightBackground#7CC59712
  • editor.foldBackground#477D5A1A
  • editor.foreground#936028
  • editor.inactiveSelectionBackground#FFFCF1
  • editor.lineHighlightBackground#FCEAAF33
  • editor.selectionBackground#FCEAAF88
  • editor.selectionHighlightBackground#7CC5971A
  • editor.selectionHighlightBorder#AAD6B1
  • editor.wordHighlightBackground#7CC59726
  • editor.wordHighlightStrongBackground#7CC59726
  • editorCursor.foreground#5A9D72
  • editorGroup.border#E9DDBC
  • editorGroupHeader.noTabsBackground#FFFCF1
  • editorGroupHeader.tabsBackground#FFFCF1
  • editorGroupHeader.tabsBorder#E9DDBC
  • editorIndentGuide.activeBackground1#90A87D
  • editorIndentGuide.background1#E9DDBC
  • editorLineNumber.activeForeground#5A9D72
  • editorLineNumber.foreground#90A87D
  • editorOverviewRuler.border#00000000
  • editorStickyScroll.shadow#E9DDBC
  • editorStickyScrollHover.background#477D5A1A
  • editorWhitespace.foreground#E9DDBC
  • editorWidget.background#FFFCF1
  • editorWidget.foreground#936028
  • explorer.decorations.ignoredForeground#CAB886
  • extensionButton.background#5A9D72
  • extensionButton.foreground#FFFCF1
  • extensionButton.hoverBackground#7CC597
  • extensionButton.prominentBackground#5A9D72
  • extensionButton.prominentForeground#FFFCF1
  • extensionButton.prominentHoverBackground#7CC597
  • focusBorder#5A9D72
  • foreground#633F17
  • gitDecoration.ignoredResourceForeground#CAB886
  • icon.foreground#633F17
  • input.background#FFFCF1
  • input.border#FFFCF1
  • input.foreground#936028
  • input.placeholderForeground#90A87D
  • keybindingTable.rowsBackground#CAB886
  • list.activeSelectionBackground#FFFCF1
  • list.activeSelectionForeground#928452
  • list.activeSelectionIconForeground#928452
  • list.focusBackground#FCEAAF
  • list.focusForeground#928452
  • list.foreground#633F17
  • list.highlightForeground#AD6A00
  • list.hoverBackground#FCEAAF33
  • list.hoverForeground#928452
  • list.iconForeground#928452
  • list.inactiveSelectionBackground#FFFCF1
  • list.inactiveSelectionForeground#928452
  • list.inactiveSelectionIconForeground#928452
  • menu.selectionBackground#5A9D7233
  • menubar.selectionBackground#5A9D7233
  • notificationCenterHeader.background#AAD6B1
  • notifications.background#FFFCF1
  • notifications.border#E9DDBC
  • notifications.foreground#633F17
  • notificationsErrorIcon.foreground#AD6A00
  • notificationsInfoIcon.foreground#90A87D
  • notificationsWarningIcon.foreground#AD6A00
  • panel.background#FAF5E6
  • panel.border#CAB886
  • panel.foreground#633F17
  • panelSectionHeader.background#D9B68F66
  • panelTitle.activeForeground#633F17
  • panelTitle.inactiveForeground#633F17
  • quickInput.background#FFFCF1
  • quickInput.foreground#936028
  • quickInput.list.focusBackground#FCEAAF
  • quickInputList.focusForeground#928452
  • quickInputList.focusIconForeground#928452
  • quickInputList.hoverForeground#928452
  • scrollbar.shadow#E9DDBC
  • scrollbarSlider.activeBackground#CAB88688
  • scrollbarSlider.background#CAB88666
  • scrollbarSlider.hoverBackground#CAB88677
  • sideBar.background#FAF5E6
  • sideBar.foreground#928452
  • sideBarSectionHeader.background#D9B68F66
  • sideBarSectionHeader.border#E9DDBC
  • sideBarSectionHeader.foreground#928452
  • statusBar.background#5A9D72
  • statusBar.debuggingBackground#7CC597
  • statusBar.debuggingForeground#FFFCF1
  • statusBar.foreground#FFFCF1
  • statusBar.noFolderBackground#FFFCF1
  • statusBarItem.remoteBackground#5A9D72
  • statusBarItem.remoteForeground#FFFCF1
  • tab.activeBackground#FFFCF1
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#AD6A00
  • tab.border#E9DDBC
  • tab.editor-group-tab-background#FAF5E6
  • tab.hoverBackground#FFFCF1
  • tab.inactiveBackground#FAF5E6
  • tab.inactiveForeground#90A87D
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#FCEAAF
  • terminal.ansiBlue#90A87D
  • terminal.ansiBrightBlack#CAB886
  • terminal.ansiBrightBlue#AAD6B1
  • terminal.ansiBrightCyan#AAD6B1
  • terminal.ansiBrightGreen#AAD6B1
  • terminal.ansiBrightMagenta#FCEAAF
  • terminal.ansiBrightRed#936028
  • terminal.ansiBrightWhite#FFFCF1
  • terminal.ansiBrightYellow#FCEAAF
  • terminal.ansiCyan#AAD6B1
  • terminal.ansiGreen#7CC597
  • terminal.ansiMagenta#CAB886
  • terminal.ansiRed#AD6A00
  • terminal.ansiWhite#90A87D
  • terminal.ansiYellow#FCEAAF
  • terminal.background#FFFCF1
  • terminal.foreground#936028
  • terminalStickyScroll.background#FAF5E6
  • textCodeBlock.background#477D5A1A
  • textLink.foreground#5A9D72
  • textLink.hoverForeground#5A9D72
  • titleBar.activeBackground#5A9D72
  • titleBar.activeForeground#FFFCF1
  • titleBar.inactiveBackground#5A9D72
  • titleBar.inactiveForeground#FFFCF1
  • toolbar.activeBackground#00000011
  • toolbar.activeForeground#936028
  • toolbar.hoverBackground#00000011
  • toolbar.hoverForeground#936028
  • tooltip.background#FCEAAF
  • tooltip.border#E9DDBC
  • tooltip.foreground#936028
  • widget.shadow#633F1744

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment#B1C1B7italic
keyword#277130—
keyword.control#4F8D53—
keyword.operator#B59F7B—
keyword.operator.assignment#B59F7B—
storage, storage.type#4F8D53—
constant, constant.numeric, constant.language, constant.character#7A3F00—
string, string.quoted, string.regexp#AD6A00—
variable, variable.parameter#7A3F00—
entity.name.function, support.function#2F6F68—
entity.name.type, entity.name.class, support.class#58A49E—
entity.other.attribute-name, meta.annotation#4F8D53—
punctuation, operator#B59F7B—
invalid, invalid.deprecated, invalid.illegal#AD6A00—
variable.other.property, variable.other.object.property, support.type.property-name#277130—
entity.name.tag, support.class.component#277130—
variable.language, variable.language.this, variable.language.super#B59F7B—
entity.name.type.module, support.other.module#58A49E—
text.html.derivative#936028—
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#277130—
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#3F8B84—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#AD6A00—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#8C774E—
meta.tag.sgml.doctype, comment.block.html#B1C1B7italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#277130—
entity.other.attribute-name.js, entity.other.attribute-name.tsx#3F8B84—
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#277130bold
markup.bold, markup.bold.markdown#AD6A00bold
markup.italic, markup.italic.markdown#AD6A00italic
string.other.link.title.markdown, markup.underline.link.markdown#277130underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#3F8B84—
markup.inline.raw.string.markdown, markup.raw.inline.markdown#AD6A00—
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#AD6A00—
markup.quote, markup.quote.markdown#C4AD82italic
markup.list, markup.list.numbered, markup.list.unnumbered#8C774E—
meta.separator.markdown#8C774E—
comment.block.html.markdown#B1C1B7italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#277130bold
punctuation.definition.list.begin.markdown#8C774E—
markup.list.unnumbered.markdown, markup.list.numbered.markdown#8C774E—
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#277130—
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#277130—
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#3F8B84—
variable.other.object.js, variable.other.object.js.jsx#7A3F00—
support.class.promise.js, support.class.promise.ts#B59F7B—
meta.diff.header.from-file, punctuation.definition.from-file.diff#AD6A00bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#58A49Ebold
meta.diff.range, meta.diff.index#B59F7B—
markup.inserted.diff#3F8B84—
markup.deleted.diff#AD6A00—
markup.changed.diff#B59F7B—
meta.diff.context, meta.diff#586B55—
punctuation.definition.range.diff#B59F7B—
meta.diff.header, meta.separator.diff#B59F7B—
punctuation.definition.inserted.diff#3F8B84—
support.function.misc.css, meta.function.variable.css#2F6F68—