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.activeBorder#3dd6a5
  • activityBar.background#0b0d12
  • activityBar.foreground#c9d2e3
  • activityBar.inactiveForeground#4f5868
  • activityBarBadge.background#3dd6a5
  • activityBarBadge.foreground#0b0d12
  • badge.background#3dd6a5
  • badge.foreground#0b0d12
  • breadcrumb.background#0f1117
  • breadcrumb.focusForeground#d6dbe6
  • breadcrumb.foreground#7e8796
  • dropdown.background#121621
  • dropdown.border#2a3242
  • dropdown.foreground#d6dbe6
  • editor.background#0f1117
  • editor.findMatchBorder#3dd6a5
  • editor.foreground#d6dbe6
  • editor.inactiveSelectionBackground#2a6f5b33
  • editor.selectionBackground#2a6f5b66
  • editor.selectionHighlightBackground#2a6f5b33
  • editorCursor.foreground#3dd6a5
  • editorHoverWidget.background#121621
  • editorHoverWidget.border#2a3242
  • editorIndentGuide.activeBackground1#3dd6a599
  • editorIndentGuide.background1#232733
  • editorLineNumber.activeForeground#3dd6a5
  • editorLineNumber.foreground#596275
  • editorOverviewRuler.background#0b0d12
  • editorOverviewRuler.border#0b0d12
  • editorSuggestWidget.background#121621
  • editorSuggestWidget.foreground#d6dbe6
  • editorSuggestWidget.highlightForeground#3dd6a5
  • editorSuggestWidget.selectedBackground#1b2230
  • editorWhitespace.foreground#2a2f3a
  • editorWidget.background#121621
  • editorWidget.border#2a3242
  • editorWidget.foreground#d6dbe6
  • focusBorder#3dd6a599
  • gitDecoration.conflictingResourceForeground#bb9af7
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#6b7382
  • gitDecoration.modifiedResourceForeground#f2c97d
  • gitDecoration.submoduleResourceForeground#7aa2f7
  • gitDecoration.untrackedResourceForeground#3dd6a5
  • input.background#121621
  • input.border#2a3242
  • input.foreground#d6dbe6
  • input.placeholderForeground#6b7382
  • inputOption.activeBackground#2a6f5b33
  • inputOption.activeBorder#3dd6a5
  • list.activeSelectionBackground#1b2230
  • list.activeSelectionForeground#d6dbe6
  • list.filterMatchBackground#2a6f5b33
  • list.highlightForeground#3dd6a5
  • list.hoverBackground#151b26
  • list.hoverForeground#d6dbe6
  • list.inactiveSelectionBackground#151b26
  • list.inactiveSelectionForeground#aeb7c7
  • menu.background#121621
  • menu.foreground#d6dbe6
  • menu.selectionBackground#1b2230
  • menu.separatorBackground#2a3242
  • minimap.background#0b0d12
  • minimapSlider.activeBackground#2a6f5b66
  • minimapSlider.background#2a6f5b22
  • minimapSlider.hoverBackground#2a6f5b44
  • notificationCenterHeader.background#0b0d12
  • notificationCenterHeader.foreground#c9d2e3
  • notifications.background#0f1117
  • notifications.border#2a3242
  • notifications.foreground#d6dbe6
  • notificationsErrorIcon.foreground#f7768e
  • notificationsInfoIcon.foreground#7aa2f7
  • notificationsWarningIcon.foreground#f2c97d
  • panel.background#0b0d12
  • panel.border#171b24
  • panelTitle.activeForeground#3dd6a5
  • panelTitle.inactiveForeground#7e8796
  • peekView.border#2a3242
  • peekViewEditor.background#10151f
  • peekViewResult.background#0f1117
  • peekViewTitle.background#0b0d12
  • peekViewTitleLabel.foreground#3dd6a5
  • scrollbarSlider.activeBackground#2a6f5b66
  • scrollbarSlider.background#2a6f5b22
  • scrollbarSlider.hoverBackground#2a6f5b44
  • selection.background#2a6f5b55
  • sideBar.background#0b0d12
  • sideBar.border#171b24
  • sideBar.foreground#aeb7c7
  • sideBarSectionHeader.background#121621
  • sideBarSectionHeader.foreground#c9d2e3
  • sideBarTitle.foreground#3dd6a5
  • statusBar.background#0b0d12
  • statusBar.border#171b24
  • statusBar.debuggingBackground#10151f
  • statusBar.debuggingForeground#c9d2e3
  • statusBar.foreground#9aa4b2
  • tab.activeBackground#0f1117
  • tab.activeBorderTop#3dd6a5
  • tab.activeForeground#d6dbe6
  • tab.hoverBackground#151b26
  • tab.hoverForeground#d6dbe6
  • tab.inactiveBackground#0b0d12
  • tab.inactiveForeground#7e8796
  • terminal.ansiBlack#0b0d12
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#4f5868
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#3dd6a5
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f2c97d
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#3dd6a5
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#d6dbe6
  • terminal.ansiYellow#f2c97d
  • terminal.background#0b0d12
  • terminal.foreground#d6dbe6
  • terminalCursor.background#0b0d12
  • terminalCursor.foreground#3dd6a5
  • titleBar.activeBackground#0b0d12
  • titleBar.activeForeground#d6dbe6
  • titleBar.border#171b24
  • titleBar.inactiveBackground#0b0d12
  • titleBar.inactiveForeground#7e8796
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7382italic
keyword, storage.type, storage.modifier#7aa2f7
keyword.operator, punctuation#a2b0c7
string, constant.other.symbol#a6e3a1
constant.numeric, constant.language, constant.character#f2c97d
entity.name.function, support.function, variable.function#7dcfff
entity.name.type, entity.name.class, support.type, support.class#f2c97d
variable, variable.other, variable.parameter#e0af68
variable.other.property, support.type.property-name#c9d2e3
entity.name.tag#f7768e
entity.other.attribute-name#3dd6a5
markup.heading#7aa2f7bold
markup.bold#f2c97dbold
markup.italic#bb9af7italic
markup.quote#7e8796italic
markup.deleted#f7768e
markup.inserted#3dd6a5
invalid, invalid.illegal#f7768e
PR-Theme by Prince Patel - VS Code Theme