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#303845
  • activityBar.border#181a1f
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#61afef
  • activityBarBadge.foreground#303845
  • badge.background#61afef
  • badge.foreground#303845
  • button.background#61afef
  • button.foreground#303845
  • button.hoverBackground#4aa5b0
  • chat.requestBackground#2c313c
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • dropdown.foreground#abb2bf
  • editor.background#303845
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#3e4451
  • editor.selectionHighlightBackground#3e445180
  • editorCursor.foreground#61afef
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#282c34
  • editorGroupHeader.tabsBorder#181a1f
  • editorHoverWidget.background#282c34
  • editorHoverWidget.border#181a1f
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#636d83
  • editorWidget.background#282c34
  • editorWidget.border#181a1f
  • gitDecoration.conflictingResourceForeground#c678dd
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.ignoredResourceForeground#5c6370
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.untrackedResourceForeground#98c379
  • input.background#1d1f23
  • input.border#181a1f
  • input.foreground#abb2bf
  • input.placeholderForeground#5c6370
  • inputOption.activeBorder#61afef
  • list.activeSelectionBackground#2c313c
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#3e4451
  • list.hoverBackground#2c313c
  • list.inactiveSelectionBackground#282c34
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#303845
  • menu.foreground#abb2bf
  • menu.selectionBackground#3e4451
  • menu.selectionForeground#abb2bf
  • menubar.selectionBackground#3e4451
  • menubar.selectionForeground#abb2bf
  • merge.currentContentBackground#98c37920
  • merge.currentHeaderBackground#98c37950
  • merge.incomingContentBackground#56b6c220
  • merge.incomingHeaderBackground#56b6c250
  • minimap.background#303845
  • minimapSlider.activeBackground#747d9180
  • minimapSlider.background#4e566660
  • minimapSlider.hoverBackground#5a637580
  • panel.background#303845
  • panel.border#181a1f
  • panelTitle.activeForeground#d7dae0
  • panelTitle.inactiveForeground#6b717d
  • peekView.border#61afef
  • peekViewEditor.background#1d1f23
  • peekViewResult.background#282c34
  • peekViewTitle.background#1d1f23
  • progressBar.background#61afef
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#282c34
  • sideBar.border#181a1f
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#303845
  • sideBarSectionHeader.foreground#abb2bf
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#282c34
  • statusBar.border#181a1f
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#282c34
  • statusBarItem.hoverBackground#2c313c
  • tab.activeBackground#303845
  • tab.activeBorder#61afef
  • tab.activeForeground#d7dae0
  • tab.border#181a1f
  • tab.inactiveBackground#282c34
  • tab.inactiveForeground#6b717d
  • terminal.ansiBlack#303845
  • terminal.ansiBlue#56b6c2
  • terminal.ansiBrightBlack#5c6370
  • terminal.ansiBrightBlue#56b6c2
  • terminal.ansiBrightCyan#61afef
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#dcdfe4
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#61afef
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#dcdfe4
  • terminal.ansiYellow#e5c07b
  • terminal.background#303845
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.border#181a1f
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6370italic
keyword, storage.type, storage.modifier#c792ea—
string, punctuation.definition.string#98c379—
constant.numeric#d19a66—
constant.language.boolean#d19a66—
constant.language.null#d19a66—
constant.language.undefined#d19a66—
variable, support.variable#e06c75—
variable.parameter#97b1be—
entity.name.function, support.function#61afef—
entity.name.class, support.class, entity.name.type#e5c07b—
entity.name.function.member#61afef—
variable.other.property, support.variable.property#e06c75—
keyword.operator#c678dd—
punctuation#abb2bf—
entity.name.tag#61afef—
entity.other.attribute-name#d19a66—
support.type.property-name.css#abb2bf—
support.constant.property-value.css, constant.other.color.rgb-value.css#d19a66—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#61afef—
support.type.property-name.json#61afef—
string.quoted.double.json#98c379—
markup.heading#61afef—
markup.bold#d19a66—
markup.italic#c678dditalic
markup.inline.raw, markup.fenced_code#98c379—
markup.underline.link#61afefunderline
invalid, invalid.illegal#e06c75—
invalid.deprecated#d19a66—
constant, support.constant#d19a66—
support#c678dd—
support.function#61afef—
support.class#e5c07b—
entity.name.namespace, entity.name.scope-resolution#56b6c2—