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—