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#242424
  • activityBar.foreground#9A9A8A
  • 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#242424
  • editor.findMatchBackground#C0C0C050
  • editor.foreground#E0E0D4
  • editor.selectionBackground#80808030
  • editor.selectionHighlightBackground#FFFFFF08
  • editor.wordHighlightBackground#A0A0A020
  • editor.wordHighlightStrongBackground#A0A0A020
  • editorBracketHighlight.foreground1#E0E0D4
  • editorBracketHighlight.foreground2#E0E0D4CC
  • editorBracketHighlight.foreground3#E0E0D499
  • editorBracketHighlight.foreground4#E0E0D480
  • editorBracketHighlight.foreground5#E0E0D466
  • editorBracketHighlight.foreground6#E0E0D44D
  • editorBracketHighlight.unexpectedBracket.foreground#B05A6A
  • editorError.foreground#CC6666
  • editorGroupHeader.tabsBackground#242424
  • editorGutter.addedBackground#5E8A5E
  • editorGutter.deletedBackground#B05A5A
  • editorGutter.modifiedBackground#B0B05A
  • editorHoverWidget.background#252525
  • editorHoverWidget.border#333333
  • editorHoverWidget.foreground#E0E0D4
  • editorLineNumber.activeForeground#E0E0D4
  • editorLineNumber.foreground#7A7A7A
  • editorWarning.foreground#B8B84A
  • focusBorder#FFFFFF16
  • gitDecoration.conflictingResourceForeground#CC6666
  • gitDecoration.deletedResourceForeground#B05A6A
  • gitDecoration.modifiedResourceForeground#E0E0D4
  • gitDecoration.untrackedResourceForeground#8A8A8A
  • input.background#FFFFFF0A
  • input.foreground#E0E0D4
  • inputOption.activeForeground#A0A0A0
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#E0E0D4
  • 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#E0E0D4
  • scrollbarSlider.background#3A3A3AAA
  • scrollbarSlider.hoverBackground#3A3A3A
  • selection.background#4A4A4A
  • settings.modifiedItemIndicator#A0A0A0
  • sideBar.background#242424
  • sideBar.foreground#B0B0A0
  • sideBarSectionHeader.background#242424
  • sideBarSectionHeader.foreground#7A7A7A
  • sideBarTitle.foreground#7A7A7A
  • statusBar.background#242424
  • statusBar.debuggingBackground#6A9E8E
  • statusBar.debuggingForeground#0D0F0E
  • statusBar.foreground#8A8A8A
  • statusBar.noFolderBackground#242424
  • statusBarItem.remoteBackground#6A9E8E
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#242424
  • tab.activeBorder#A0A0A070
  • tab.activeForeground#E0E0D4
  • tab.border#242424
  • tab.inactiveBackground#242424
  • textLink.activeForeground#7AAB9A
  • textLink.foreground#7AAB9A
  • titleBar.activeBackground#242424
  • titleBar.activeForeground#8A8A8A
  • titleBar.inactiveBackground#242424
  • titleBar.inactiveForeground#5A5A5A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7A—
keyword, storage.type, storage.modifier#90CC78—
keyword.operator#D4C678—
entity.name.function, support.function, variable.function#84D4EA—
entity.name.type, entity.name.class, entity.name.tag, support.class, support.type#84D4EA—
variable, variable.other#E0E0D4—
variable.parameter#E0E0D4—
variable.language#84D4EA—
string#70C0B0—
constant.character.escape#D0D080—
constant.numeric, constant.language, constant.other, support.constant, keyword.other.unit#DCC04A—
entity.other.attribute-name, support.type.property-name#E0E0D4—
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#E0E0D4—
entity.name.function.decorator, meta.decorator#84D4EA—
invalid, invalid.illegal#C86A7A—
markup.heading, markup.heading entity.name#D0D080—
markup.inline.raw.markdown, string.other.link.title.markdown, constant.other.reference.link.markdown#7EC2B0—
markup.bold, markup.italic, markup.table#E0E0D4—
*url*, *link*, *uri*#7EC2B0underline