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#58a6ff
  • activityBar.background#090d13
  • activityBar.border#131920
  • activityBar.foreground#58a6ff
  • activityBar.inactiveForeground#1c2128
  • activityBarBadge.background#ff7b72
  • activityBarBadge.foreground#ffffff
  • badge.background#d2a8ff
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#58a6ff
  • breadcrumb.background#0d1117
  • breadcrumb.focusForeground#79c0ff
  • breadcrumb.foreground#484f58
  • breadcrumbPicker.background#090d13
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#1c2128
  • button.secondaryForeground#c9d1d9
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#7ee78712
  • diffEditor.insertedTextBackground#7ee78720
  • diffEditor.removedLineBackground#ff7b7212
  • diffEditor.removedTextBackground#ff7b7220
  • disabledForeground#484f58
  • dropdown.background#161b22
  • dropdown.border#1c2128
  • dropdown.foreground#c9d1d9
  • editor.background#0d1117
  • editor.findMatchBackground#ffa65740
  • editor.findMatchBorder#ffa657
  • editor.findMatchHighlightBackground#ffa65722
  • editor.foldBackground#161b2255
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#58a6ff18
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#58a6ff35
  • editor.wordHighlightBackground#58a6ff28
  • editorBracketHighlight.foreground1#58a6ff
  • editorBracketHighlight.foreground2#79c0ff
  • editorBracketHighlight.foreground3#d2a8ff
  • editorBracketHighlight.foreground4#ffa657
  • editorBracketHighlight.foreground5#ff7b72
  • editorBracketHighlight.foreground6#7ee787
  • editorBracketMatch.background#58a6ff28
  • editorBracketMatch.border#58a6ff
  • editorCodeLens.foreground#484f58
  • editorCursor.foreground#58a6ff
  • editorError.foreground#ff7b72
  • editorGhostText.foreground#484f58
  • editorGroup.border#1c2128
  • editorGroupHeader.tabsBackground#090d13
  • editorGroupHeader.tabsBorder#1c2128
  • editorGutter.addedBackground#7ee787
  • editorGutter.background#0d1117
  • editorGutter.deletedBackground#ff7b72
  • editorGutter.modifiedBackground#ffa657
  • editorHoverWidget.background#090d13
  • editorHoverWidget.border#1c2128
  • editorIndentGuide.activeBackground1#30363d
  • editorIndentGuide.background1#1c2128
  • editorInfo.foreground#58a6ff
  • editorInlayHint.background#161b22
  • editorInlayHint.foreground#30363d
  • editorLineNumber.activeForeground#58a6ff
  • editorLineNumber.foreground#1c2128
  • editorRuler.foreground#1c2128
  • editorStickyScroll.background#090d13
  • editorSuggestWidget.background#090d13
  • editorSuggestWidget.highlightForeground#58a6ff
  • editorSuggestWidget.selectedBackground#1c2128
  • editorSuggestWidget.selectedForeground#79c0ff
  • editorWarning.foreground#ffa657
  • editorWhitespace.foreground#1c2128
  • editorWidget.background#090d13
  • editorWidget.border#1c2128
  • editorWidget.foreground#c9d1d9
  • errorForeground#ff7b72
  • focusBorder#58a6ff
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#7ee787
  • gitDecoration.conflictingResourceForeground#d2a8ff
  • gitDecoration.deletedResourceForeground#ff7b72
  • gitDecoration.ignoredResourceForeground#30363d
  • gitDecoration.modifiedResourceForeground#ffa657
  • gitDecoration.untrackedResourceForeground#79c0ff
  • icon.foreground#79c0ff
  • input.background#161b22
  • input.border#1c2128
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • inputValidation.errorBorder#ff7b72
  • inputValidation.infoBorder#58a6ff
  • inputValidation.warningBorder#ffa657
  • list.activeSelectionBackground#1c2128
  • list.activeSelectionForeground#c9d1d9
  • list.activeSelectionIconForeground#58a6ff
  • list.errorForeground#ff7b72
  • list.focusBackground#1c2128
  • list.highlightForeground#58a6ff
  • list.hoverBackground#161b22
  • list.inactiveSelectionBackground#161b22
  • list.warningForeground#ffa657
  • minimap.background#0d1117
  • minimap.errorHighlight#ff7b72
  • minimap.selectionHighlight#58a6ff60
  • minimap.warningHighlight#ffa657
  • minimapSlider.activeBackground#58a6ff40
  • minimapSlider.background#58a6ff15
  • minimapSlider.hoverBackground#58a6ff25
  • panel.background#0d1117
  • panel.border#1c2128
  • panelTitle.activeBorder#58a6ff
  • panelTitle.activeForeground#58a6ff
  • panelTitle.inactiveForeground#484f58
  • peekView.border#58a6ff
  • peekViewEditor.background#090d1380
  • peekViewResult.background#090d13
  • peekViewTitle.background#080c12
  • peekViewTitleLabel.foreground#58a6ff
  • progressBar.background#58a6ff
  • scrollbarSlider.activeBackground#58a6ff60
  • scrollbarSlider.background#58a6ff20
  • scrollbarSlider.hoverBackground#58a6ff40
  • selection.background#58a6ff40
  • sideBar.background#0d1117
  • sideBar.border#1c2128
  • sideBar.foreground#8b949e
  • sideBarSectionHeader.background#161b22
  • sideBarSectionHeader.border#1c2128
  • sideBarSectionHeader.foreground#79c0ff
  • sideBarTitle.foreground#58a6ff
  • statusBar.background#1c2128
  • statusBar.border#131920
  • statusBar.debuggingBackground#ff7b72
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#080c12
  • statusBarItem.errorBackground#ff7b72
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.remoteBackground#58a6ff
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#ffa657
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#58a6ff
  • tab.activeForeground#c9d1d9
  • tab.activeModifiedBorder#ffa657
  • tab.border#1c2128
  • tab.hoverBackground#161b22
  • tab.hoverForeground#79c0ff
  • tab.inactiveBackground#090d13
  • tab.inactiveForeground#484f58
  • terminal.ansiBlack#1c2128
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#484f58
  • terminal.ansiBrightBlue#88c7ff
  • terminal.ansiBrightCyan#99d5ff
  • terminal.ansiBrightGreen#a5e8a5
  • terminal.ansiBrightMagenta#e0c4ff
  • terminal.ansiBrightRed#ff9b95
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc80
  • terminal.ansiCyan#79c0ff
  • terminal.ansiGreen#7ee787
  • terminal.ansiMagenta#d2a8ff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#c9d1d9
  • terminal.ansiYellow#ffa657
  • terminal.background#0d1117
  • terminal.border#1c2128
  • terminal.foreground#c9d1d9
  • terminalCursor.foreground#58a6ff
  • textLink.activeForeground#79c0ff
  • textLink.foreground#58a6ff
  • titleBar.activeBackground#080c12
  • titleBar.activeForeground#8b949e
  • titleBar.inactiveBackground#090d13
  • titleBar.inactiveForeground#484f58
  • widget.border#1c2128
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#484f58italic
string, string.quoted, string.template#a5d6ff
constant.character.escape#d2a8ff
string.regexp#ffa657
keyword, keyword.control, storage.type#ff7b72
storage.modifier#79c0ffitalic
keyword.operator#ff7b72
entity.name.function, support.function#d2a8ff
support.function.builtin, support.function.magic#ff7b72
variable, variable.other#ffa657
variable.parameter#c9d1d9italic
variable.language#ff7b72italic
entity.name.type, entity.name.class, support.class, support.type#79c0ff
entity.name.type.interface#7ee787italic
constant.numeric#79c0ff
constant.language#79c0ffitalic
constant, constant.other#ffa657
entity.name.function.decorator, meta.decorator, storage.type.annotation#d2a8ffitalic
entity.name.tag#7ee787
entity.other.attribute-name#79c0ff
support.type.property-name.css#79c0ff
support.type.property-name.json#79c0ff
markup.heading#58a6ffbold
markup.underline.link#58a6ffunderline
invalid#ff7b72strikethrough