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.background#1c2228
  • activityBarBadge.background#99c794
  • activityBarBadge.foreground#1c2228
  • badge.background#99c794
  • badge.foreground#1c2228
  • button.background#393e42
  • button.foreground#ffffff
  • dropdown.background#393e42
  • dropdown.foreground#ffffff
  • editor.background#303841
  • editor.foreground#d8dee9
  • editor.lineHighlightBackground#59667399
  • editor.selectionBackground#59667399
  • editor.selectionHighlightBorder#647382
  • editorBracketHighlight.foreground1#f9ae58
  • editorBracketHighlight.foreground2#c695c6
  • editorBracketHighlight.foreground3#5fb4b4
  • editorBracketMatch.background#f9ae5800
  • editorBracketMatch.border#f9ae58
  • editorCursor.foreground#f9ae58
  • editorGroup.emptyBackground#1c2228
  • editorGroupHeader.tabsBackground#1c2228
  • editorGutter.addedBackground#99c794
  • editorGutter.deletedBackground#ec5f66
  • editorGutter.modifiedBackground#f9ae58
  • editorIndentGuide.activeBackground1#47515b
  • editorIndentGuide.activeBackground2#47515b
  • editorIndentGuide.activeBackground3#47515b
  • editorIndentGuide.activeBackground4#47515b
  • editorIndentGuide.activeBackground5#47515b
  • editorIndentGuide.activeBackground6#47515b
  • editorIndentGuide.background1#47515b99
  • editorIndentGuide.background2#47515b99
  • editorIndentGuide.background3#47515b99
  • editorIndentGuide.background4#47515b99
  • editorIndentGuide.background5#47515b99
  • editorIndentGuide.background6#47515b99
  • editorLineNumber.foreground#828b96
  • editorSuggestWidget.background#39424c
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.foreground#f7f7f7
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#616870
  • editorSuggestWidget.selectedForeground#f7f7f7
  • editorWidget.background#1c2228
  • focusBorder#5c99d6
  • input.background#393e42
  • input.foreground#ffffff
  • list.activeSelectionBackground#454a4e
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#292f35
  • list.inactiveSelectionBackground#454a4e
  • list.inactiveSelectionForeground#ffffff
  • progressBar.background#5c99d6
  • sideBar.background#1c2228
  • sideBarSectionHeader.background#1c2228
  • statusBar.background#171c22
  • statusBar.debuggingBackground#f9ae58
  • statusBar.debuggingForeground#1c2228
  • statusBar.foreground#c1c3c6
  • statusBar.noFolderBackground#c695c6
  • statusBar.noFolderForeground#1c2228
  • tab.inactiveBackground#1c2228
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6699cc
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#5c99d6
  • terminal.ansiBrightCyan#5fb4b4
  • terminal.ansiBrightGreen#99c794
  • terminal.ansiBrightMagenta#c695c6
  • terminal.ansiBrightRed#f97b58
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f9ae58
  • terminal.ansiCyan#5fb4b4
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#c695c6
  • terminal.ansiRed#ec5f66
  • terminal.ansiWhite#f7f7f7
  • terminal.ansiYellow#f9ae58
  • terminal.background#303841
  • textLink.foreground#5c99d6
  • titleBar.activeBackground#1c2228
  • titleBar.inactiveBackground#1c2228

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a6acb9
string, support.type.property-name.json#99c794
punctuation.definition - punctuation.definition.numeric.base#5fb4b4
constant.numeric#f9ae58
storage.type.numeric#c695c6italic
constant.language#ec5f66italic
constant.character, constant.other#c695c6
variable.member#ec5f66
keyword - keyword.operator, keyword.operator.word#c695c6
keyword.control#c695c6
keyword.operator#f97b58
punctuation.separator, punctuation.terminator#a6acb9
punctuation.section#ffffff
punctuation.accessor#a6acb9
punctuation.definition.annotation#5fb4b4
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js#5fb4b4
storage#ec5f66
storage.type#c695c6italic
entity.name.function#5fb4b4
meta.function-call entity.name.function#6699cc
entity.name - (entity.name.section | entity.name.tag | entity.name.label)#f9ae58
entity.name.type - string.entity.name.type#f9ae58
entity.name.package - string.entity.name.package#f9ae58
entity.other.inherited-class#5fb4b4italic
variable.parameter#f9ae58
variable.language#ec5f66italic
entity.name.tag, support.class.component#ec5f66
entity.other.attribute-name#c695c6
variable.function, variable.annotation#6699cc
support.function, support.macro#6699ccitalic
support.constant#c695c6italic
support.type, support.class#6699ccitalic
invalid#ec5f66bold
invalid.deprecated#f9ae58bold
entity.name.tag.yaml#5fb4b4
source.yaml string.unquoted#d8dee9
markup.headingbold
markup.heading punctuation.definition.heading#f97b58
markup.heading.1 punctuation.definition.heading#ec5f66
string.other.link, markup.underline.link#6699cc
markup.boldbold
markup.italicitalic
markup.underlineunderline
markup.italic markup.bold | markup.bold markup.italicitalic bold
markup.underline markup.bold | markup.bold markup.underlinebold underline
markup.underline markup.italic | markup.italic markup.underlineitalic underline
markup.bold markup.italic markup.underline | markup.bold markup.underline markup.italic | markup.italic markup.bold markup.underline | markup.italic markup.underline markup.bold | markup.underline markup.bold markup.italic | markup.underline markup.italic markup.boldbold italic underline
punctuation.definition.thematic-break#f9ae58
markup.list.numbered.bullet#99c794
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item#f9ae58
markup.raw
markup.raw.inline
(text punctuation.definition.italic | text punctuation.definition.bold)#c695c6
meta.diff, meta.diff.header#c695c6
markup.deleted#ec5f66
markup.inserted#99c794
markup.changed#f9ae58
support.type.property-name - support.type.property-name.json#d8dee9
constant.numeric.line-number.match#ec5f66
message.error#ec5f66
diff.deleted
diff.deleted.char
diff.inserted
diff.inserted.char