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.heading—bold
markup.heading punctuation.definition.heading#f97b58—
markup.heading.1 punctuation.definition.heading#ec5f66—
string.other.link, markup.underline.link#6699cc—
markup.bold—bold
markup.italic—italic
markup.underline—underline
markup.italic markup.bold | markup.bold markup.italic—italic bold
markup.underline markup.bold | markup.bold markup.underline—bold underline
markup.underline markup.italic | markup.italic markup.underline—italic 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.bold—bold 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——