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#abb2bf80
  • activityBar.background#282c34
  • activityBar.border#282c34
  • activityBar.foreground#61afef
  • activityBar.inactiveForeground#abb2bf90
  • activityBarBadge.background#61afef
  • activityBarBadge.foreground#282c34
  • badge.background#61afef
  • badge.foreground#2c313c
  • breadcrumb.activeSelectionForeground#abb2bf
  • breadcrumb.background#282c34
  • breadcrumb.focusForeground#abb2bf
  • breadcrumb.foreground#61afef
  • breadcrumbPicker.background#2c313c
  • button.background#61afef
  • button.foreground#282c34
  • button.hoverBackground#61afef90
  • button.secondaryBackground#61afef90
  • button.secondaryForeground#2c313c
  • button.secondaryHoverBackground#61afef80
  • descriptionForeground#abb2bf
  • dropdown.background#2c313c
  • dropdown.border#abb2bf
  • dropdown.foreground#abb2bf
  • editor.background#282c34
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#3e4451
  • editor.selectionForeground#abb2bf
  • editor.selectionHighlightBackground#2c313c90
  • editorBracketHighlight.foreground1#abb2bf
  • editorBracketHighlight.foreground2#abb2bf
  • editorBracketHighlight.foreground3#abb2bf
  • editorBracketHighlight.foreground4#abb2bf
  • editorBracketHighlight.foreground5#abb2bf
  • editorBracketHighlight.foreground6#abb2bf
  • editorGhostText.background#2c313c
  • editorGhostText.foreground#abb2bf
  • editorGroup.border#61afef
  • editorGroupHeader.noTabsBackground#282c34
  • editorGroupHeader.tabsBackground#282c34
  • editorGroupHeader.tabsBorder#282c34
  • editorWhitespace.foreground#abb2bf30
  • errorForeground#e06c75
  • focusBorder#61afef
  • foreground#abb2bf
  • gitDecoration.conflictingResourceForeground#e5c07b85
  • gitDecoration.deletedResourceForeground#e06c7585
  • gitDecoration.ignoredResourceForeground#abb2bf85
  • gitDecoration.modifiedResourceForeground#61afef85
  • gitDecoration.submoduleResourceForeground#61afef
  • gitDecoration.untrackedResourceForeground#98c37985
  • icon.foreground#abb2bf
  • input.background#2c313c
  • input.border#abb2bf
  • input.foreground#61afef
  • input.placeholderForeground#abb2bf
  • inputOption.activeBackground#61afef
  • inputOption.activeBorder#61afef
  • inputOption.activeForeground#abb2bf90
  • inputValidation.errorBackground#2c313c
  • inputValidation.errorBorder#e06c75
  • inputValidation.infoBackground#282c34
  • inputValidation.infoBorder#61afef
  • inputValidation.warningBackground#282c34
  • inputValidation.warningBorder#61afef
  • keybindingLabel.background#2c313c
  • keybindingLabel.border#61afef
  • keybindingLabel.bottomBorder#61afef
  • keybindingLabel.foreground#61afef
  • list.activeSelectionBackground#61afef85
  • list.activeSelectionForeground#61afef
  • list.deemphasizedForeground#61afef85
  • list.errorForeground#e06c75
  • list.filterMatchBackground#61afef85
  • list.filterMatchBorder#61afef
  • list.focusBackground#61afef85
  • list.focusForeground#61afef
  • list.focusOutline#61afef
  • list.highlightForeground#61afef
  • list.hoverBackground#61afef85
  • list.inactiveSelectionBackground#61afef85
  • list.inactiveSelectionForeground#61afef
  • list.invalidItemForeground#61afef
  • listFilterWidget.background#2c313c
  • listFilterWidget.noMatchesOutline#e06c75
  • listFilterWidget.outline#61afef
  • minimap.background#282c34
  • minimap.errorHighlight#e06c75
  • minimap.findMatchHighlight#61afef85
  • minimap.selectionHighlight#abb2bf85
  • minimapGutter.addedBackground#98c379
  • minimapGutter.deletedBackground#e06c75
  • minimapGutter.modifiedBackground#61afef
  • progressBar.background#61afef
  • scrollbar.shadow#61afef
  • scrollbarSlider.activeBackground#61afef
  • scrollbarSlider.background#61afef
  • scrollbarSlider.hoverBackground#61afef
  • selection.background#61afef40
  • settings.headerForeground#61afef
  • settings.modifiedItemIndicator#61afef
  • sideBar.background#282c34
  • sideBar.border#282c34
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.border#282c34
  • sideBarSectionHeader.foreground#61afef
  • sideBarTitle.foreground#61afef
  • tab.activeBackground#2c313c
  • tab.activeBorder#61afef
  • tab.activeBorderTop#61afef
  • tab.activeForeground#abb2bf
  • tab.border#282c34
  • tab.hoverBackground#2c313c
  • tab.hoverBorder#61afef
  • tab.hoverForeground#abb2bf
  • tab.inactiveBackground#282c34
  • tab.inactiveForeground#61afef85
  • tab.unfocusedActiveBackground#2c313c
  • tab.unfocusedActiveBorder#61afef85
  • tab.unfocusedActiveBorderTop#61afef85
  • tab.unfocusedActiveForeground#abb2bf85
  • tab.unfocusedHoverBackground#2c313c
  • tab.unfocusedHoverBorder#61afef85
  • tab.unfocusedHoverForeground#abb2bf85
  • tab.unfocusedInactiveBackground#282c34
  • tab.unfocusedInactiveForeground#61afef85
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#5c6370
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#282c34
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#3e4451
  • terminal.selectionForeground#abb2bf
  • textBlockQuote.background#2c313c
  • textLink.activeForeground#abb2bf90
  • textLink.foreground#61afef
  • textPreformat.foreground#61afef
  • tree.indentGuidesStroke#61afef
  • widget.shadow#abb2bf90

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6370italic
source#abb2bf
invalid.illegal#e06c75
invalid.broken#e06c75
invalid.deprecated#e06c75
invalid.unimplemented#e06c75
VSCode Nofrils (Dark/Light) by Jonathan Batteas - VS Code Theme