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
  • actionBar.toggledForeground#4A3540
  • activityBar.activeBorder#FFF8CC
  • activityBar.background#E77E3F
  • activityBar.foreground#FFF8CC
  • activityBar.inactiveForeground#FFF8CC88
  • activityBarBadge.background#A74100
  • activityBarBadge.foreground#FFF7C7
  • badge.background#B63851
  • badge.foreground#FFF7C7
  • breadcrumb.activeSelectionForeground#A6925A
  • breadcrumb.focusForeground#A6925A
  • breadcrumb.foreground#D8C9A6
  • breadcrumb.separatorForeground#D8C9A6
  • button.background#E77E3F
  • button.foreground#FFFDF3
  • button.hoverBackground#F49757
  • button.secondaryBackground#FFFDF3
  • button.secondaryForeground#4A3540
  • button.secondaryHoverBackground#FFF9E5
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#FFF7C7
  • commandCenter.border#00000000
  • commandCenter.foreground#FFF7C7
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#FFF7C7
  • descriptionForeground#817369
  • disabledForeground#FFFFFF66
  • dropdown.background#F7EFD6
  • dropdown.border#D8C9A6
  • dropdown.foreground#4A3540
  • editor.background#FCFAED
  • editor.foldBackground#D8621B1A
  • editor.foreground#4A3540
  • editor.inactiveSelectionBackground#FFF9E5
  • editor.lineHighlightBackground#FFF9E5
  • editor.selectionBackground#FCEECF66
  • editorCursor.foreground#E77E3F
  • editorGroup.border#D8C9A6
  • editorGroupHeader.noTabsBackground#F7EFD6
  • editorGroupHeader.tabsBackground#F7EFD6
  • editorGroupHeader.tabsBorder#D8C9A6
  • editorIndentGuide.activeBackground1#7C6472
  • editorIndentGuide.background1#E0D5B4
  • editorLineNumber.activeForeground#B63851
  • editorLineNumber.foreground#7C6472
  • editorOverviewRuler.border#00000000
  • editorStickyScrollHover.background#D8621B1A
  • editorWhitespace.foreground#E0D5B4
  • editorWidget.background#FFFDF3
  • editorWidget.foreground#4A3540
  • explorer.decorations.ignoredForeground#9B8A95
  • extensionButton.background#E77E3F
  • extensionButton.foreground#FFF7C7
  • extensionButton.hoverBackground#F49757
  • extensionButton.prominentBackground#E77E3F
  • extensionButton.prominentForeground#FFF7C7
  • extensionButton.prominentHoverBackground#F49757
  • focusBorder#E77E3F
  • foreground#4A3540
  • gitDecoration.ignoredResourceForeground#9B8A95
  • input.background#FFFDF3
  • input.border#FFFDF3
  • input.foreground#4A3540
  • input.placeholderForeground#9B8A95
  • keybindingTable.rowsBackground#F1E6CD
  • list.activeSelectionBackground#FCFAED
  • list.activeSelectionForeground#9B8A95
  • list.focusBackground#FCEECF
  • list.highlightForeground#E77E3F
  • list.hoverBackground#FFF9E5
  • list.hoverForeground#9B8A95
  • list.inactiveSelectionBackground#FFFDF3
  • list.inactiveSelectionForeground#9B8A95
  • menu.selectionBackground#E9D7C055
  • menu.selectionForeground#4A3540
  • menubar.selectionBackground#E9D7C055
  • menubar.selectionForeground#4A3540
  • notificationCenterHeader.background#E77E3F
  • notifications.background#FFFDF3
  • notifications.border#D8C9A6
  • notifications.foreground#3E303A
  • notificationsErrorIcon.foreground#B63851
  • notificationsInfoIcon.foreground#487AA9
  • notificationsWarningIcon.foreground#B63851
  • panel.background#F7EFD6
  • panel.border#D8C9A6
  • panelSectionHeader.background#FCFAED
  • panelTitle.activeForeground#4A3540
  • panelTitle.inactiveForeground#4A3540
  • quickInput.background#FFFDF3
  • quickInput.foreground#4A3540
  • quickInput.hoverForeground#cc0000
  • quickInput.list.focusBackground#FCEECF
  • scrollbar.shadow#92857D33
  • scrollbarSlider.activeBackground#D8C9A688
  • scrollbarSlider.background#E0D5B466
  • scrollbarSlider.hoverBackground#D8C9A677
  • sideBar.background#F7EFD6
  • sideBar.foreground#634C59
  • sideBarSectionHeader.background#FCFAED
  • sideBarSectionHeader.foreground#634C59
  • statusBar.background#E77E3F
  • statusBar.debuggingBackground#F49757
  • statusBar.debuggingForeground#FFF7C7
  • statusBar.foreground#FFF7C7
  • statusBar.noFolderBackground#FFFDF3
  • statusBarItem.remoteBackground#E77E3F
  • statusBarItem.remoteForeground#FFF7C7
  • tab.activeBackground#FCFAED
  • tab.activeForeground#3E303A
  • tab.border#D8C9A6
  • tab.editor-group-tab-background#F7EFD6
  • tab.hoverBackground#FCFAED
  • tab.inactiveBackground#F7EFD6
  • tab.inactiveForeground#9D9989
  • terminal.ansiBlack#E0D5B4
  • terminal.ansiBlue#5D5094
  • terminal.ansiBrightBlack#9B8A95
  • terminal.ansiBrightBlue#6A5EA3
  • terminal.ansiBrightCyan#83A5C5
  • terminal.ansiBrightGreen#6793BA
  • terminal.ansiBrightMagenta#CFA0B5
  • terminal.ansiBrightRed#C8646D
  • terminal.ansiBrightWhite#FFF7C7
  • terminal.ansiBrightYellow#F7EEA8
  • terminal.ansiCyan#6A5EA3
  • terminal.ansiGreen#487AA9
  • terminal.ansiMagenta#B55C77
  • terminal.ansiRed#B63851
  • terminal.ansiWhite#7C6472
  • terminal.ansiYellow#F0E49A
  • terminal.background#F7EFD6
  • terminal.foreground#4A3540
  • terminalStickyScroll.background#F1E6CD
  • textCodeBlock.background#D8621B1A
  • textLink.foreground#5D5094
  • textLink.hoverForeground#5D5094
  • titleBar.activeBackground#E77E3F
  • titleBar.activeForeground#FFFDF3
  • titleBar.inactiveBackground#E77E3F
  • titleBar.inactiveForeground#FFFDF3
  • toolbar.activeBackground#00000011
  • toolbar.activeForeground#4A3540
  • toolbar.hoverBackground#00000011
  • toolbar.hoverForeground#4A3540
  • toolbar.inactiveForeground#FFF8CC88
  • widget.shadow#7C647266

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment#6C5142italic
keyword#D25F1D
keyword.control#E07735
keyword.operator#967963
keyword.operator.assignment#967963
storage, storage.type#D25F1D
constant, constant.numeric, constant.language, constant.character#B63851
string, string.quoted, string.regexp#C6915A
variable, variable.parameter#1E4C31
entity.name.function, support.function#0F7A55
entity.name.type, entity.name.class, support.class#1C7F5A
entity.other.attribute-name, meta.annotation#E07735
punctuation, operator#967963
invalid, invalid.deprecated, invalid.illegal#B63851
variable.other.property, variable.other.object.property, support.type.property-name#1C7F5A
entity.name.tag, support.class.component#1C7F5A
variable.language, variable.language.this, variable.language.super#1C7F5A
entity.name.type.module, support.other.module#1C7F5A
text.html.derivative#1E4C31
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#1C7F5A
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#1C7F5A
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#C6915A
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#967963
meta.tag.sgml.doctype, comment.block.html#6C5142italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#1C7F5A
entity.other.attribute-name.js, entity.other.attribute-name.tsx#1C7F5A
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#D25F1Dbold
markup.bold, markup.bold.markdown#B63851bold
markup.italic, markup.italic.markdown#B63851italic
string.other.link.title.markdown, markup.underline.link.markdown#1C7F5Aunderline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#1C7F5A
markup.inline.raw.string.markdown, markup.raw.inline.markdown#C6915A
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#C6915A
markup.quote, markup.quote.markdown#F2D3B2italic
markup.list, markup.list.numbered, markup.list.unnumbered#6C5142
meta.separator.markdown#967963
comment.block.html.markdown#6C5142italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#D25F1Dbold
punctuation.definition.list.begin.markdown#6C5142
markup.list.unnumbered.markdown, markup.list.numbered.markdown#6C5142
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#1C7F5A
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#1C7F5A
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#0F7A55
variable.other.object.js, variable.other.object.js.jsx#1E4C31
support.class.promise.js, support.class.promise.ts#1C7F5A
meta.diff.header.from-file, punctuation.definition.from-file.diff#B63851bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#0F7A55bold
meta.diff.range, meta.diff.index#1C7F5A
markup.inserted.diff#0F7A55
markup.deleted.diff#B63851
markup.changed.diff#D25F1D
meta.diff.context, meta.diff#6C5142
punctuation.definition.range.diff#1C7F5A
meta.diff.header, meta.separator.diff#D25F1D
punctuation.definition.inserted.diff#0F7A55
support.function.misc.css, meta.function.variable.css#0F7A55