Skip to main content
Coding Theme

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#101010
  • activityBar.border#1c1c1c
  • activityBar.foreground#e8e8d3
  • activityBar.inactiveForeground#888888
  • badge.background#333333
  • badge.foreground#e8e8d3
  • breadcrumb.activeSelectionForeground#e8e8d3
  • breadcrumb.foreground#888888
  • button.background#333333
  • button.foreground#e8e8d3
  • button.hoverBackground#404040
  • descriptionForeground#888888
  • diffEditor.insertedTextBackground#afd78733
  • diffEditor.removedTextBackground#c95c5c33
  • disabledForeground#606060
  • dropdown.background#1c1c1c
  • dropdown.border#333333
  • dropdown.foreground#e8e8d3
  • editor.background#151515
  • editor.findMatchBackground#403c4180
  • editor.findMatchHighlightBackground#33333380
  • editor.foreground#e8e8d3
  • editor.inactiveSelectionBackground#33333380
  • editor.lineHighlightBackground#1c1c1c
  • editor.rangeHighlightBackground#33333380
  • editor.selectionBackground#404040
  • editor.selectionHighlightBackground#33333380
  • editor.selectionHighlightBorder#403c41
  • editor.wordHighlightBackground#33333380
  • editor.wordHighlightStrongBackground#403c4180
  • editorActionList.background#333333
  • editorActionList.focusBackground#404040
  • editorActionList.focusForeground#e8e8d3
  • editorActionList.foreground#e8e8d3
  • editorBracketMatch.background#33333380
  • editorBracketMatch.border#c7c7c7
  • editorCursor.foreground#dddddd
  • editorError.foreground#c95c5c
  • editorGroup.border#1c1c1c
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#1c1c1c
  • editorGutter.addedBackground#afd787
  • editorGutter.background#151515
  • editorGutter.deletedBackground#c95c5c
  • editorGutter.modifiedBackground#7a8aa6
  • editorHint.foreground#a08070
  • editorHoverWidget.background#333333
  • editorHoverWidget.border#404040
  • editorIndentGuide.activeBackground1#535d66
  • editorIndentGuide.background1#333333
  • editorInfo.foreground#7a8aa6
  • editorLineNumber.activeForeground#ccc5c4
  • editorLineNumber.foreground#605958
  • editorRuler.foreground#333333
  • editorSuggestWidget.background#333333
  • editorSuggestWidget.border#404040
  • editorSuggestWidget.foreground#c7c7c7
  • editorSuggestWidget.highlightForeground#7a8aa6
  • editorSuggestWidget.selectedBackground#404040
  • editorWarning.foreground#ffaf00
  • editorWhitespace.foreground#333333
  • editorWidget.background#333333
  • editorWidget.border#404040
  • errorForeground#c95c5c
  • focusBorder#404040
  • foreground#e8e8d3
  • icon.foreground#c7c7c7
  • input.background#1c1c1c
  • input.border#333333
  • input.foreground#e8e8d3
  • input.placeholderForeground#606060
  • inputOption.activeBackground#333333
  • inputOption.activeBorder#7a8aa6
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#e8e8d3
  • list.activeSelectionIconForeground#e8e8d3
  • list.dropBackground#33333380
  • list.focusBackground#333333
  • list.focusForeground#e8e8d3
  • list.highlightForeground#7a8aa6
  • list.hoverBackground#1c1c1c
  • list.hoverForeground#e8e8d3
  • list.inactiveSelectionBackground#1c1c1c
  • list.inactiveSelectionForeground#e8e8d3
  • list.inactiveSelectionIconForeground#c7c7c7
  • minimap.background#101010
  • minimap.findMatchHighlight#403c4180
  • minimap.selectionHighlight#33333380
  • notificationCenterHeader.background#1c1c1c
  • notificationLink.foreground#7a8aa6
  • notifications.background#1c1c1c
  • notifications.border#333333
  • notifications.foreground#e8e8d3
  • panel.background#101010
  • panel.border#1c1c1c
  • panelTitle.activeForeground#e8e8d3
  • panelTitle.inactiveForeground#888888
  • peekView.border#333333
  • peekViewEditor.background#101010
  • peekViewEditor.matchHighlightBackground#333333
  • peekViewResult.background#1c1c1c
  • quickInput.background#1c1c1c
  • quickInput.foreground#e8e8d3
  • quickInputTitle.background#1c1c1c
  • sash.hoverBorder#535d66
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#535d6680
  • scrollbarSlider.background#33333380
  • scrollbarSlider.hoverBackground#40404080
  • selection.background#33333380
  • sideBar.background#101010
  • sideBar.border#1c1c1c
  • sideBar.foreground#e8e8d3
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.foreground#c7c7c7
  • statusBar.background#1c1c1c
  • statusBar.border#1c1c1c
  • statusBar.debuggingBackground#556779
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1c1c1c
  • tab.activeBackground#151515
  • tab.activeForeground#e8e8d3
  • tab.border#1c1c1c
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#101010
  • terminal.ansiBlue#7a8aa6
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#7a8aa6
  • terminal.ansiBrightCyan#7a8aa6
  • terminal.ansiBrightGreen#afd787
  • terminal.ansiBrightMagenta#b39066
  • terminal.ansiBrightRed#c95c5c
  • terminal.ansiBrightWhite#f0f0f0
  • terminal.ansiBrightYellow#ffaf00
  • terminal.ansiCyan#7a8aa6
  • terminal.ansiGreen#afd787
  • terminal.ansiMagenta#b39066
  • terminal.ansiRed#c95c5c
  • terminal.ansiWhite#e8e8d3
  • terminal.ansiYellow#ffaf00
  • terminal.background#151515
  • terminal.foreground#e8e8d3
  • terminalCursor.foreground#dddddd
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#e8e8d3
  • titleBar.border#1c1c1c
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#888888
  • toolbar.activeBackground#40404080
  • toolbar.hoverBackground#33333380
  • widget.border#404040
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#606060italic
keyword, storage, modifier#888888
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.trait, support.type, support.class, support.other.namespace#b39066bold
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method, support.method#7a8aa6bold
string, constant.other.symbol#a08070
constant.character.escape, string.other.link#a0a8b0
string.regexp, constant.other.regex, markup.raw.regexp#7a8aa6
comment.block.documentation, comment.block.documentation punctuation.definition.comment, comment.line.documentation#606060italic
constant, variable.other.constant, constant.numeric, constant.language, constant.other#b39066
variable, variable.other, meta.definition.variable#e8e8d3
variable.parameter#ccc5c4italic
variable.other.property, variable.other.member#dddddd
keyword.operator, meta.brace#777777
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#c7c7c7
entity.name.namespace, entity.name.module, support.module#777777italic
entity.name.tag, meta.tag, markup.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx#7a8aa6
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#c7c7c7
entity.other.attribute-name, meta.attribute, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#a0a8b0
markup.inline.raw, markup.inline.raw.string, markup.inline.raw.markdown, markup.inline.raw.markdown punctuation.definition.raw#b39066
markup.fenced_code.block, markup.fenced_code.block.markdown, markup.raw.block, markup.raw.block.markdown#a08070
markup.quote, markup.quote.markdown#a0a8b0italic
markup.heading, markup.heading punctuation.definition.heading#7a8aa6bold
markup.bold, markup.strong#ccc5c4bold
markup.italic, markup.emphasis#ccc5c4italic
markup.strikethrough#606060strikethrough
markup.underline.link, markup.link, string.other.link#7a8aa6underline
markup.list, markup.list punctuation.definition.list, markup.list.markdown#a0a8b0
invalid, invalid.illegal#c95c5c
Jellybeans Mono by defvar - VS Code Theme