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#D8E0E21A
  • activityBar.background#222B2C
  • activityBar.foreground#FFD75A
  • activityBarBadge.background#FFD75A
  • activityBarBadge.foreground#1E2527
  • badge.background#C7AA59
  • badge.foreground#1E2527
  • breadcrumb.activeSelectionForeground#8D999C
  • breadcrumb.focusForeground#8D999C
  • breadcrumb.foreground#A4B0B4
  • breadcrumb.separatorForeground#A4B0B4
  • button.background#C7AA59
  • button.foreground#1E2527
  • button.hoverBackground#F7E197
  • button.secondaryBackground#303A3A
  • button.secondaryForeground#D8E0E2
  • button.secondaryHoverBackground#566A6E
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#D8E0E2
  • commandCenter.border#00000000
  • commandCenter.foreground#D8E0E2
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#B3C0C3
  • descriptionForeground#D8E0E2
  • disabledForeground#FFFFFF66
  • dropdown.background#303A3A
  • dropdown.border#3A4A4D
  • dropdown.foreground#D8E0E2
  • editor.background#293335
  • editor.findMatchBackground#566A6E55
  • editor.findMatchBorder#F7E197
  • editor.findMatchHighlightBackground#566A6E55
  • editor.findRangeHighlightBackground#566A6E55
  • editor.foldBackground#566A6E55
  • editor.foreground#D8E0E2
  • editor.inactiveSelectionBackground#323B3E
  • editor.lineHighlightBackground#323C3D
  • editor.selectionBackground#566A6E55
  • editor.selectionHighlightBackground#566A6E55
  • editor.selectionHighlightBorder#566A6E88
  • editor.wordHighlightBackground#566A6E55
  • editor.wordHighlightStrongBackground#566A6E55
  • editorCursor.foreground#C7AA59
  • editorGroup.border#3A4A4D
  • editorGroupHeader.noTabsBackground#303A3A
  • editorGroupHeader.tabsBackground#222B2C
  • editorGroupHeader.tabsBorder#2A3333
  • editorHoverWidget.background#222B2C
  • editorHoverWidget.border#323B3E
  • editorHoverWidget.foreground#D8E0E2
  • editorHoverWidget.statusBarBackground#323B3E
  • editorIndentGuide.activeBackground1#A4B0B4
  • editorIndentGuide.background1#3A4A4D
  • editorLineNumber.activeForeground#C7AA59
  • editorLineNumber.foreground#8D999C
  • editorOverviewRuler.border#00000000
  • editorStickyScroll.shadow#0E161866
  • editorWhitespace.foreground#3A4A4D
  • editorWidget.background#293335
  • editorWidget.foreground#D8E0E2
  • explorer.decorations.ignoredForeground#8D999C
  • extensionButton.background#C7AA59
  • extensionButton.foreground#1E2527
  • extensionButton.hoverBackground#F7E197
  • extensionButton.prominentBackground#C7AA59
  • extensionButton.prominentForeground#1E2527
  • extensionButton.prominentHoverBackground#F7E197
  • focusBorder#C7AA59
  • foreground#D8E0E2
  • gitDecoration.ignoredResourceForeground#8D999C
  • icon.foreground#C7AA59
  • input.background#293335
  • input.border#293335
  • input.foreground#D8E0E2
  • input.placeholderForeground#7A8A8E
  • keybindingTable.rowsBackground#F7E19722
  • list.activeSelectionBackground#293335
  • list.activeSelectionForeground#BEC8CB
  • list.activeSelectionIconForeground#BEC8CB
  • list.focusBackground#F19DAF33
  • list.focusOutline#00000000
  • list.highlightForeground#C7AA59
  • list.hoverBackground#303A3A
  • list.hoverForeground#BEC8CB
  • list.iconForeground#BEC8CB
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#F19DAF33
  • list.inactiveSelectionIconForeground#BEC8CB
  • menu.selectionBackground#D8E0E21A
  • menubar.selectionBackground#D8E0E21A
  • notificationCenterHeader.background#353F40
  • notifications.background#293335
  • notifications.border#3A4A4D
  • notifications.foreground#F7E197
  • notificationsErrorIcon.foreground#E07443
  • notificationsInfoIcon.foreground#478EA1
  • notificationsWarningIcon.foreground#F7E197
  • panel.background#222B2C
  • panel.border#3A4A4D
  • panelSectionHeader.background#222B2C
  • panelTitle.activeBorder#C7AA59
  • panelTitle.activeForeground#F7E197
  • panelTitle.inactiveForeground#8D999C
  • quickInput.background#222B2C
  • quickInput.foreground#D8E0E2
  • quickInput.list.focusBackground#566A6E88
  • quickInputList.focusIconForeground#BEC8CB
  • scrollbar.shadow#0E161866
  • scrollbarSlider.activeBackground#566A6EAA
  • scrollbarSlider.background#566A6E66
  • scrollbarSlider.hoverBackground#566A6E88
  • sideBar.background#222B2C
  • sideBar.foreground#BEC8CB
  • sideBarSectionHeader.background#222B2C
  • sideBarSectionHeader.border#3A4A4D
  • sideBarSectionHeader.foreground#BEC8CB
  • sideBarTitle.background#222B2C
  • sideBarTitle.foreground#D8E0E2
  • statusBar.background#222B2C
  • statusBar.debuggingBackground#323B3E
  • statusBar.debuggingForeground#D8E0E2
  • statusBar.foreground#D8E0E2
  • statusBar.noFolderBackground#222B2C
  • statusBarItem.remoteBackground#478EA1
  • statusBarItem.remoteForeground#1E2527
  • tab.activeBackground#222B2C
  • tab.activeBorder#C7AA59
  • tab.activeBorderTop#00000000
  • tab.activeForeground#FFD75A
  • tab.border#2A3333
  • tab.editor-group-tab-background#222B2C
  • tab.hoverBackground#353F40
  • tab.inactiveBackground#222B2C
  • tab.inactiveForeground#8D999C
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#394447
  • terminal.ansiBlue#5FA8BB
  • terminal.ansiBrightBlack#566A6E
  • terminal.ansiBrightBlue#478EA1
  • terminal.ansiBrightCyan#9EC8D3
  • terminal.ansiBrightGreen#5FA8BB
  • terminal.ansiBrightMagenta#C7AA59
  • terminal.ansiBrightRed#E07443
  • terminal.ansiBrightWhite#F7E197
  • terminal.ansiBrightYellow#F7E197
  • terminal.ansiCyan#9EC8D3
  • terminal.ansiGreen#478EA1
  • terminal.ansiMagenta#F7E197
  • terminal.ansiRed#E07443
  • terminal.ansiWhite#D8E0E2
  • terminal.ansiYellow#C7AA59
  • terminal.background#293335
  • terminal.foreground#D8E0E2
  • terminalStickyScroll.background#222B2C
  • textLink.foreground#478EA1
  • textLink.hoverForeground#478EA1
  • titleBar.activeBackground#222B2C
  • titleBar.activeForeground#D8E0E2
  • titleBar.inactiveBackground#222B2C
  • titleBar.inactiveForeground#A4B0B4
  • toolbar.activeBackground#303A3A
  • toolbar.activeForeground#D8E0E2
  • toolbar.hoverBackground#D8E0E21A
  • toolbar.hoverForeground#D8E0E2
  • tooltip.background#FFFFFF
  • tooltip.border#FFFFFF
  • tooltip.foreground#D8E0E2
  • widget.shadow#0E1618cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment#7A8A8Eitalic
keyword#FFCF3F
keyword.control#D6C16B
keyword.operator#8CA0A5
keyword.operator.assignment#9BB2B7
storage, storage.type#FFCF3F
constant, constant.numeric, constant.language, constant.character#F9706A
string, string.quoted, string.regexp#F9706A
variable, variable.parameter#D8E0E2
entity.name.function, support.function#41E1E6
entity.name.type, entity.name.class, support.class#8FBFCC
entity.other.attribute-name, meta.annotation#F9706A
punctuation, operator#9BB2B7
invalid, invalid.deprecated, invalid.illegal#F9706A
variable.other.property, variable.other.object.property, support.type.property-name#41E1E6
entity.name.tag, support.class.component#FFCF3F
variable.language, variable.language.this, variable.language.super#8FBFCC
entity.name.type.module, support.other.module#FFCF3F
text.html.derivative#D8E0E2
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#FFCF3F
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#5AA6C0
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#F9706A
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#9BB2B7
meta.tag.sgml.doctype, comment.block.html#7A8A8Eitalic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#FFCF3F
entity.other.attribute-name.js, entity.other.attribute-name.tsx#5AA6C0
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#D6C16Bbold
markup.bold, markup.bold.markdown#F9706Abold
markup.italic, markup.italic.markdown#F9706Aitalic
string.other.link.title.markdown, markup.underline.link.markdown#41E1E6underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#41E1E6
markup.inline.raw.string.markdown, markup.raw.inline.markdown#F9706A
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#F9706A
markup.quote, markup.quote.markdown#394447italic
markup.list, markup.list.numbered, markup.list.unnumbered#C7AA59
meta.separator.markdown#9BB2B7
comment.block.html.markdown#7A8A8Eitalic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#D6C16Bbold
punctuation.definition.list.begin.markdown#C7AA59
markup.list.unnumbered.markdown, markup.list.numbered.markdown#C7AA59
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#41E1E6
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#41E1E6
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#00B4E4
variable.other.object.js, variable.other.object.js.jsx#D8E0E2
support.class.promise.js, support.class.promise.ts#8FBFCC
meta.diff.header.from-file, punctuation.definition.from-file.diff#41E1E6bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#FFCF3Fbold
meta.diff.range, meta.diff.index#6A7C7F
markup.inserted.diff#41E1E6
markup.deleted.diff#F9706A
markup.changed.diff#FFCF3F
meta.diff.context, meta.diff#7A8A8E
punctuation.definition.range.diff#6A7C7F
meta.diff.header, meta.separator.diff#8FBFCC
punctuation.definition.inserted.diff#41E1E6
support.function.misc.css, meta.function.variable.css#41E1E6
Ev by monoooki - VS Code Theme