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
Ev by monoooki - VS Code Theme