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#1E1E1E
  • activityBar.foreground#8A8A8A
  • activityBarBadge.background#6A9E8E
  • activityBarBadge.foreground#000000
  • badge.background#7A7A7A
  • badge.foreground#000000
  • button.background#6A9E8E
  • button.foreground#000000
  • button.hoverBackground#5A8A7A
  • descriptionForeground#A0A0A0
  • diffEditor.insertedLineBackground#80808025
  • diffEditor.insertedTextBackground#80808025
  • diffEditor.removedLineBackground#CC666650
  • diffEditor.removedTextBackground#CC666650
  • editor.background#1E1E1E
  • editor.findMatchBackground#C0C0C050
  • editor.foreground#c5c5ba
  • editor.selectionBackground#80808030
  • editor.selectionHighlightBackground#FFFFFF08
  • editor.wordHighlightBackground#A0A0A020
  • editor.wordHighlightStrongBackground#A0A0A020
  • editorBracketHighlight.foreground1#c5c5ba
  • editorBracketHighlight.foreground2#c5c5baCC
  • editorBracketHighlight.foreground3#c5c5ba99
  • editorBracketHighlight.foreground4#c5c5ba80
  • editorBracketHighlight.foreground5#c5c5ba66
  • editorBracketHighlight.foreground6#c5c5ba4D
  • editorBracketHighlight.unexpectedBracket.foreground#B05A6A
  • editorError.foreground#CC6666
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorGutter.addedBackground#5E8A5E
  • editorGutter.deletedBackground#B05A5A
  • editorGutter.modifiedBackground#B0B05A
  • editorHoverWidget.background#252525
  • editorHoverWidget.border#333333
  • editorHoverWidget.foreground#c5c5ba
  • editorLineNumber.activeForeground#c5c5ba
  • editorLineNumber.foreground#6A6A6A
  • editorWarning.foreground#B8B84A
  • focusBorder#FFFFFF16
  • gitDecoration.conflictingResourceForeground#CC6666
  • gitDecoration.deletedResourceForeground#B05A6A
  • gitDecoration.modifiedResourceForeground#c5c5ba
  • gitDecoration.untrackedResourceForeground#8A8A8A
  • input.background#FFFFFF0A
  • input.foreground#c5c5ba
  • inputOption.activeForeground#A0A0A0
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#c5c5ba
  • list.errorForeground#CC6666
  • list.highlightForeground#6E9E8E
  • list.hoverBackground#FFFFFF08
  • list.inactiveSelectionBackground#2A2A2A
  • list.warningForeground#B8B84A
  • pickerGroup.foreground#A0A0A0
  • quickInput.background#252525
  • quickInput.foreground#A0A0A0
  • quickInputList.focusBackground#FFFFFF16
  • quickInputList.focusForeground#c5c5ba
  • scrollbarSlider.background#3A3A3AAA
  • scrollbarSlider.hoverBackground#3A3A3A
  • selection.background#4A4A4A
  • settings.modifiedItemIndicator#A0A0A0
  • sideBar.background#1E1E1E
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.foreground#7A7A7A
  • sideBarTitle.foreground#7A7A7A
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#6A9E8E
  • statusBar.debuggingForeground#0D0F0E
  • statusBar.foreground#8A8A8A
  • statusBar.noFolderBackground#1E1E1E
  • statusBarItem.remoteBackground#6A9E8E
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#A0A0A070
  • tab.activeForeground#c5c5ba
  • tab.border#1E1E1E
  • tab.inactiveBackground#1E1E1E
  • textLink.activeForeground#7AAB9A
  • textLink.foreground#7AAB9A
  • titleBar.activeBackground#1E1E1E
  • titleBar.activeForeground#8A8A8A
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#5A5A5A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6A—
keyword, storage.type, storage.modifier#7AAA68—
keyword.operator#B2A258—
entity.name.function, support.function, variable.function#6AACCB—
entity.name.type, entity.name.class, entity.name.tag, support.class, support.type#6AACCB—
variable, variable.other#c5c5ba—
variable.parameter#c5c5ba—
variable.language#6AACCB—
string#58A090—
constant.character.escape#B8B86A—
constant.numeric, constant.language, constant.other, support.constant, keyword.other.unit#ba981f—
entity.other.attribute-name, support.type.property-name#c5c5ba—
punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function, punctuation.definition.brackets, punctuation.definition.array, punctuation.section.block, punctuation.section.braces, punctuation.section.group, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, meta.brackets#c5c5ba—
entity.name.function.decorator, meta.decorator#6AACCB—
invalid, invalid.illegal#B05A6A—
markup.heading, markup.heading entity.name#B8B86A—
markup.inline.raw.markdown, string.other.link.title.markdown, constant.other.reference.link.markdown#6A9E8E—
markup.bold, markup.italic, markup.table#c5c5ba—
*url*, *link*, *uri*#6A9E8Eunderline