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#0A1014
  • activityBar.border#1A2838
  • activityBar.foreground#B8C8D8
  • activityBar.inactiveForeground#607080
  • activityBarBadge.background#48C8C8
  • activityBarBadge.foreground#0F1419
  • badge.background#48C8C8
  • badge.foreground#0F1419
  • breadcrumb.activeSelectionForeground#B8C8D8
  • breadcrumb.focusForeground#B8C8D8
  • breadcrumb.foreground#607080
  • button.background#48C8C8
  • button.foreground#0F1419
  • button.hoverBackground#60E0D8
  • descriptionForeground#607080
  • diffEditor.insertedLineBackground#48D0C033
  • diffEditor.insertedTextBackground#48D0C033
  • diffEditor.modifiedTextBackground#1A2838
  • diffEditor.removedLineBackground#E0707833
  • diffEditor.removedTextBackground#E0707833
  • dropdown.background#141E28
  • dropdown.border#1A2838
  • dropdown.foreground#B8C8D8
  • editor.background#0F1419
  • editor.findMatchBackground#E0A85866
  • editor.findMatchBorder#D0B050
  • editor.findMatchHighlightBackground#E0A85833
  • editor.foreground#B8C8D8
  • editor.hoverHighlightBackground#1A283866
  • editor.inactiveSelectionBackground#141E28
  • editor.lineHighlightBackground#121A22
  • editor.selectionBackground#1A2838
  • editor.selectionHighlightBackground#1A283866
  • editor.wordHighlightBackground#1A283880
  • editor.wordHighlightStrongBackground#1A2838AA
  • editorBracketHighlight.foreground1#58A8E8
  • editorBracketHighlight.foreground2#78B8E8
  • editorBracketHighlight.foreground3#68C8A8
  • editorBracketHighlight.foreground4#E0A858
  • editorBracketMatch.background#48C8C833
  • editorBracketMatch.border#48C8C8
  • editorCursor.foreground#48C8C8
  • editorError.foreground#E07078
  • editorGroup.border#1A2838
  • editorGroupHeader.tabsBackground#0A1014
  • editorGroupHeader.tabsBorder#1A2838
  • editorGutter.addedBackground#48D0C0
  • editorGutter.deletedBackground#E07078
  • editorGutter.modifiedBackground#D0B050
  • editorHint.foreground#48D0C0
  • editorIndentGuide.activeBackground1#385868
  • editorIndentGuide.background1#1A2838
  • editorInfo.foreground#58A8E8
  • editorLineNumber.activeForeground#B8C8D8
  • editorLineNumber.foreground#607080
  • editorLink.activeForeground#48C8C8
  • editorWarning.foreground#D0B050
  • errorForeground#E07078
  • focusBorder#48C8C8
  • foreground#B8C8D8
  • gitDecoration.addedResourceForeground#48D0C0
  • gitDecoration.deletedResourceForeground#E07078
  • gitDecoration.ignoredResourceForeground#607080
  • gitDecoration.modifiedResourceForeground#D0B050
  • gitDecoration.untrackedResourceForeground#607080
  • icon.foreground#B8C8D8
  • input.background#141E28
  • input.border#1A2838
  • input.foreground#B8C8D8
  • input.placeholderForeground#607080
  • list.activeSelectionBackground#1A2838
  • list.activeSelectionForeground#B8C8D8
  • list.deemphasizedForeground#688098
  • list.focusOutline#48C8C8
  • list.hoverBackground#121A22
  • list.hoverForeground#B8C8D8
  • list.inactiveSelectionBackground#141E28
  • list.inactiveSelectionForeground#B8C8D8
  • minimap.findMatchHighlight#E0A85866
  • minimap.selectionHighlight#1A2838
  • notificationCenterHeader.background#0F1419
  • notifications.background#0A1014
  • notifications.border#1A2838
  • notifications.foreground#B8C8D8
  • panel.background#0A1014
  • panel.border#1A2838
  • panelTitle.activeForeground#B8C8D8
  • panelTitle.inactiveForeground#607080
  • peekView.border#48C8C8
  • peekViewEditor.background#0A1014
  • peekViewResult.background#0A1014
  • peekViewTitle.background#0F1419
  • progressBar.background#48C8C8
  • scrollbarSlider.activeBackground#FFFFFF44
  • scrollbarSlider.background#FFFFFF22
  • scrollbarSlider.hoverBackground#FFFFFF33
  • sideBar.background#0A1014
  • sideBar.border#1A2838
  • sideBar.foreground#B8C8D8
  • sideBarSectionHeader.background#0F1419
  • sideBarSectionHeader.foreground#B8C8D8
  • sideBarTitle.foreground#B8C8D8
  • statusBar.background#0A1014
  • statusBar.border#1A2838
  • statusBar.debuggingBackground#48C8C8
  • statusBar.foreground#B8C8D8
  • statusBar.noFolderBackground#0A1014
  • tab.activeBackground#0F1419
  • tab.activeBorder#48C8C8
  • tab.activeForeground#B8C8D8
  • tab.border#1A2838
  • tab.inactiveBackground#0A1014
  • tab.inactiveForeground#607080
  • terminal.ansiBlack#0F1419
  • terminal.ansiBlue#58A8E8
  • terminal.ansiBrightBlack#607080
  • terminal.ansiBrightBlue#78C0F8
  • terminal.ansiBrightCyan#60F0E8
  • terminal.ansiBrightGreen#88E0C0
  • terminal.ansiBrightMagenta#98D0F8
  • terminal.ansiBrightRed#F08890
  • terminal.ansiBrightWhite#D8E8F4
  • terminal.ansiBrightYellow#E8C068
  • terminal.ansiCyan#48D0C0
  • terminal.ansiGreen#68C8A8
  • terminal.ansiMagenta#78B8E8
  • terminal.ansiRed#E07078
  • terminal.ansiWhite#B8C8D8
  • terminal.ansiYellow#E0A858
  • terminal.background#0F1419
  • terminal.foreground#B8C8D8
  • titleBar.activeBackground#0A1014
  • titleBar.activeForeground#B8C8D8
  • titleBar.border#1A2838
  • titleBar.inactiveBackground#0A1014
  • titleBar.inactiveForeground#607080
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#607080italic
string, string.quoted, string.template#68C8A8
constant.numeric#E0A858
constant.language, constant.language.null#6898C8
keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator#78B8E8
keyword.operator#688098
storage.type#D0B050
constant.language.boolean#6898C8
string.regexp#48C8C8
entity.name.function, support.function, meta.function-call#58A8E8
entity.name.type, entity.name.class, support.type, support.class#D0B050
variable, variable.other, variable.parameter#98A8B8
entity.name.tag, meta.tag#78B8E8
entity.other.attribute-name#E0A858
constant.character.escape#48C8C8
invalid, invalid.illegal#E07078
markup.heading#58A8E8bold
markup.bold#B8C8D8bold
markup.italic#78B8E8italic
markup.underline.link, string.other.link#48C8C8
markup.inline.raw, markup.fenced_code#E0A858
markup.fenced_code
markup.quote#607080italic
markup.list, punctuation.definition.list#D0B050
markup.inserted#48D0C0
markup.deleted#E07078
punctuation, meta.brace#688098