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#0E1A27
  • activityBar.border#ffffff33
  • activityBar.foreground#C2F750
  • activityBarBadge.background#C2F750
  • activityBarBadge.foreground#0E1A27
  • breadcrumb.activeSelectionForeground#C2F750
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffff99
  • breadcrumbPicker.background#0E1A27
  • button.background#5363EE
  • button.border#ffffff33
  • button.foreground#ffffff
  • button.hoverBackground#3545D6
  • debugExceptionWidget.border#ffffff33
  • editor.background#0E1A27
  • editor.border#ffffff22
  • editor.findMatchBackground#C2F75044
  • editor.findMatchBorder#ffffff33
  • editor.findMatchHighlightBackground#C2F75033
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#5363EE22
  • editor.lineHighlightBorder#ffffff11
  • editor.selectionBackground#5363EE44
  • editor.selectionHighlightBackground#5363EE33
  • editorBracketMatch.border#ffffff55
  • editorCursor.foreground#C2F750
  • editorGroup.border#ffffff33
  • editorGroupHeader.tabsBackground#0E1A27
  • editorIndentGuide.activeBackground#ffffff44
  • editorIndentGuide.background#ffffff22
  • editorLineNumber.activeForeground#C2F750
  • editorLineNumber.foreground#5363EE77
  • editorWidget.background#0E1A27
  • editorWidget.border#ffffff33
  • gitDecoration.addedResourceForeground#C2F750
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#5363EE
  • gitDecoration.untrackedResourceForeground#C2F750CC
  • input.background#0E1A27
  • input.border#ffffff44
  • input.foreground#ffffff
  • inputOption.activeBorder#C2F750
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#5363EE
  • inputValidation.warningBorder#C2F750
  • list.activeSelectionBackground#3545D6
  • list.activeSelectionForeground#ffffff
  • list.focusOutline#ffffff33
  • list.highlightForeground#C2F750
  • list.hoverBackground#5363EE33
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3545D644
  • list.inactiveSelectionForeground#ffffff
  • notificationCenter.border#ffffff33
  • notifications.border#ffffff33
  • notificationToast.border#ffffff33
  • panel.background#0E1A27
  • panel.border#ffffff33
  • panelTitle.activeBorder#C2F750
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff99
  • peekView.border#ffffff55
  • peekViewEditor.background#0E1A27
  • peekViewResult.background#0E1A27
  • peekViewResult.selectionBackground#5363EE44
  • peekViewTitle.background#0E1A27
  • pickerGroup.border#ffffff33
  • scrollbarSlider.activeBackground#ffffff77
  • scrollbarSlider.background#ffffff33
  • scrollbarSlider.hoverBackground#ffffff55
  • settings.focusedRowBorder#ffffff33
  • settings.headerForeground#C2F750
  • settings.modifiedItemIndicator#5363EE
  • sideBar.background#0E1A27
  • sideBar.border#ffffff33
  • sideBar.foreground#ffffff
  • statusBar.background#3545D6
  • statusBar.border#ffffff33
  • statusBar.debuggingBackground#C2F750
  • statusBar.debuggingForeground#0E1A27
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#5363EE
  • tab.activeBackground#3545D6
  • tab.activeBorder#C2F750
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#ffffff22
  • tab.inactiveBackground#0E1A27
  • tab.inactiveForeground#ffffff99
  • terminal.ansiBlue#5363EE
  • terminal.ansiGreen#C2F750
  • terminal.background#0E1A27
  • terminal.border#ffffff33
  • terminal.foreground#ffffff
  • titleBar.activeBackground#0E1A27
  • titleBar.activeForeground#C2F750
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5363EE99italic
variable, string constant.other.placeholder#ffffff
constant.other.color#C2F750
keyword, storage.type, storage.modifier#5363EE
keyword.control, keyword.operator.new#5363EE
keyword.operator#C2F750
entity.name.function, meta.function-call, support.function#3545D6
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#C2F750
string, punctuation.definition.string#C2F750CC
constant.numeric#C2F750
constant.language, support.constant, constant.character, constant.other#5363EE
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#5363EE
entity.other.attribute-name#C2F750
support.type.property-name#3545D6
support.constant.property-value#C2F750
constant.character.escape#C2F750
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#3545D6italic
invalid, invalid.illegal#FF5555
markup.heading#C2F750bold
markup.underline.link, string.other.link#5363EE
markup.bold#ffffffbold
markup.italic#ffffffitalic