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#060606
  • activityBar.border#1c1c1c
  • activityBar.foreground#c8c8c8
  • activityBar.inactiveForeground#282828
  • activityBarBadge.background#e8e8e8
  • activityBarBadge.foreground#0a0a0a
  • badge.background#484848
  • badge.foreground#e8e8e8
  • breadcrumb.activeSelectionForeground#e8e8e8
  • breadcrumb.focusForeground#b8b8b8
  • breadcrumb.foreground#404040
  • breadcrumbPicker.background#101010
  • button.background#484848
  • button.foreground#e8e8e8
  • button.hoverBackground#606060
  • button.secondaryBackground#303030
  • button.secondaryForeground#c8c8c8
  • descriptionForeground#606060
  • dropdown.background#101010
  • dropdown.border#303030
  • dropdown.foreground#e8e8e8
  • editor.background#0a0a0a
  • editor.findMatchBackground#606060
  • editor.findMatchHighlightBackground#404040
  • editor.foreground#e8e8e8
  • editor.inactiveSelectionBackground#222222
  • editor.lineHighlightBackground#141414
  • editor.rangeHighlightBackground#181818
  • editor.selectionBackground#404040
  • editor.selectionHighlightBackground#2c2c2c
  • editor.wordHighlightBackground#303030
  • editor.wordHighlightStrongBackground#484848
  • editorBracketMatch.background#404040
  • editorBracketMatch.border#e8e8e8
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#080808
  • editorGroupHeader.tabsBorder#1c1c1c
  • editorGutter.addedBackground#585858
  • editorGutter.background#0a0a0a
  • editorGutter.deletedBackground#383838
  • editorGutter.modifiedBackground#686868
  • editorIndentGuide.activeBackground1#484848
  • editorIndentGuide.background1#303030
  • editorLineNumber.activeForeground#909090
  • editorLineNumber.foreground#484848
  • editorWhitespace.foreground#202020
  • focusBorder#e8e8e8
  • gitDecoration.addedResourceForeground#909090
  • gitDecoration.conflictingResourceForeground#686868
  • gitDecoration.deletedResourceForeground#585858
  • gitDecoration.ignoredResourceForeground#303030
  • gitDecoration.modifiedResourceForeground#b0b0b0
  • gitDecoration.untrackedResourceForeground#989898
  • input.background#101010
  • input.border#303030
  • input.foreground#e8e8e8
  • input.placeholderForeground#282828
  • inputOption.activeBackground#303030
  • inputOption.activeBorder#e8e8e8
  • list.activeSelectionBackground#303030
  • list.activeSelectionForeground#e8e8e8
  • list.focusBackground#303030
  • list.highlightForeground#ffffff
  • list.hoverBackground#141414
  • list.hoverForeground#e8e8e8
  • list.inactiveSelectionBackground#1c1c1c
  • list.inactiveSelectionForeground#686868
  • notificationLink.foreground#e8e8e8
  • notifications.background#101010
  • notifications.border#303030
  • notifications.foreground#e8e8e8
  • panel.background#080808
  • panel.border#1c1c1c
  • panelTitle.activeBorder#e8e8e8
  • panelTitle.activeForeground#c8c8c8
  • panelTitle.inactiveForeground#282828
  • peekView.border#e8e8e8
  • peekViewEditor.background#0c0c0c
  • peekViewEditor.matchHighlightBackground#404040
  • peekViewResult.background#080808
  • peekViewResult.fileForeground#b8b8b8
  • peekViewResult.lineForeground#686868
  • peekViewResult.matchHighlightBackground#404040
  • peekViewResult.selectionBackground#303030
  • peekViewResult.selectionForeground#e8e8e8
  • peekViewTitle.background#101010
  • peekViewTitleDescription.foreground#606060
  • peekViewTitleLabel.foreground#e8e8e8
  • progressBar.background#e8e8e8
  • scrollbarSlider.activeBackground#505050ee
  • scrollbarSlider.background#303030aa
  • scrollbarSlider.hoverBackground#404040cc
  • selection.background#404040
  • sideBar.background#080808
  • sideBar.border#1c1c1c
  • sideBar.foreground#686868
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#202020
  • sideBarSectionHeader.foreground#909090
  • sideBarTitle.foreground#b8b8b8
  • statusBar.background#060606
  • statusBar.border#1c1c1c
  • statusBar.debuggingBackground#383838
  • statusBar.foreground#c8c8c8
  • statusBar.noFolderBackground#181818
  • statusBarItem.activeBackground#303030
  • statusBarItem.hoverBackground#1c1c1c
  • statusBarItem.remoteBackground#e8e8e8
  • statusBarItem.remoteForeground#0a0a0a
  • tab.activeBackground#0a0a0a
  • tab.activeBorder#e8e8e8
  • tab.activeForeground#e8e8e8
  • tab.border#1c1c1c
  • tab.hoverBackground#141414
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#404040
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#505050
  • terminal.ansiBrightBlack#383838
  • terminal.ansiBrightBlue#707070
  • terminal.ansiBrightCyan#989898
  • terminal.ansiBrightGreen#909090
  • terminal.ansiBrightMagenta#808080
  • terminal.ansiBrightRed#787878
  • terminal.ansiBrightWhite#e8e8e8
  • terminal.ansiBrightYellow#b0b0b0
  • terminal.ansiCyan#707070
  • terminal.ansiGreen#686868
  • terminal.ansiMagenta#606060
  • terminal.ansiRed#585858
  • terminal.ansiWhite#b8b8b8
  • terminal.ansiYellow#888888
  • terminal.background#080808
  • terminal.foreground#e8e8e8
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#ffffff
  • textLink.foreground#e8e8e8
  • titleBar.activeBackground#060606
  • titleBar.activeForeground#c8c8c8
  • titleBar.border#1c1c1c
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#282828
  • widget.shadow#000000cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#585858italic
string, string.quoted#b8b8b8
constant.character.escape, string.regexp#e8e8e8
constant.numeric#909090
constant.language#ffffffbold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#ffffffbold
keyword.operator#686868
entity.name.function, meta.function-call entity.name.function, support.function#d8d8d8
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#c8c8c8bold
variable, variable.other#e8e8e8
variable.language#ffffffitalic
variable.parameter#c0c0c0
variable.other.property, support.variable.property, meta.object-literal.key#a8a8a8
entity.name.tag, meta.tag#ffffff
entity.other.attribute-name#909090
punctuation.separator, punctuation.terminator, punctuation.accessor#484848
punctuation.definition.parameters, punctuation.definition.block, meta.brace#606060
markup.heading, entity.name.section#ffffffbold
markup.bold#ffffffbold
markup.italic#a8a8a8italic
markup.inline.raw, markup.fenced_code#b8b8b8
invalid#ffffffunderline
invalid.deprecated#505050strikethrough