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#282026
  • activityBar.border#555564
  • activityBar.foreground#dfd0d5
  • activityBarBadge.background#6a88ff
  • activityBarBadge.foreground#15050f
  • badge.background#441824
  • badge.foreground#ffffff
  • button.background#441824
  • button.foreground#ffffff
  • button.hoverBackground#00405f
  • diffEditor.border#555564
  • diffEditor.insertedLineBackground#001f3899
  • diffEditor.insertedTextBackground#002d3f99
  • diffEditor.removedLineBackground#37040f99
  • diffEditor.removedTextBackground#4d091f99
  • dropdown.background#15050f
  • dropdown.border#555564
  • dropdown.foreground#dfd0d5
  • editor.background#15050f
  • editor.findMatchBackground#950f4f
  • editor.findMatchHighlightBackground#165f7099
  • editor.findRangeHighlightBackground#40173d99
  • editor.foreground#dfd0d5
  • editor.hoverHighlightBackground#00405f99
  • editor.inactiveSelectionBackground#22436099
  • editor.lineHighlightBackground#3f1515
  • editor.selectionBackground#293140
  • editor.selectionHighlightBackground#44182499
  • editor.wordHighlightBackground#00354f99
  • editor.wordHighlightStrongBackground#5e3e5b99
  • editorBracketMatch.background#2f5f7a
  • editorBracketMatch.border#b0648f
  • editorCursor.foreground#fd3333
  • editorError.foreground#df4f4f
  • editorGutter.addedBackground#2fa526
  • editorGutter.background#1a1517
  • editorGutter.deletedBackground#df4f4f
  • editorGutter.modifiedBackground#d0730f
  • editorHint.foreground#908890
  • editorIndentGuide.activeBackground1#554f4f
  • editorIndentGuide.background1#555564
  • editorInfo.foreground#2fa526
  • editorLineNumber.activeForeground#dfd0d5
  • editorLineNumber.foreground#908890
  • editorOverviewRuler.addedForeground#2fa526
  • editorOverviewRuler.border#555564
  • editorOverviewRuler.deletedForeground#df4f4f
  • editorOverviewRuler.modifiedForeground#d0730f
  • editorRuler.foreground#352f2f
  • editorWarning.foreground#d0730f
  • editorWhitespace.foreground#555564
  • gitDecoration.addedResourceForeground#2fa526
  • gitDecoration.conflictingResourceForeground#d24f7f
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#908890
  • gitDecoration.modifiedResourceForeground#e3cfff
  • gitDecoration.submoduleResourceForeground#afdaef
  • gitDecoration.untrackedResourceForeground#00b066
  • input.background#15050f
  • input.border#555564
  • input.foreground#dfd0d5
  • input.placeholderForeground#908890
  • inputOption.activeBackground#441824
  • inputOption.activeBorder#6a88ff
  • inputValidation.errorBackground#451212
  • inputValidation.errorBorder#df4f4f
  • inputValidation.infoBackground#00354f
  • inputValidation.infoBorder#2fa526
  • inputValidation.warningBackground#40173d
  • inputValidation.warningBorder#d0730f
  • list.activeSelectionBackground#441824
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#6a88ff
  • list.focusBackground#441824
  • list.highlightForeground#6a88ff
  • list.hoverBackground#00405f
  • list.inactiveSelectionBackground#224360
  • notificationCenterHeader.background#352f2f
  • notificationCenterHeader.foreground#dfd0d5
  • panel.background#15050f
  • panel.border#555564
  • panelTitle.activeBorder#6a88ff
  • panelTitle.activeForeground#dfd0d5
  • panelTitle.inactiveForeground#908890
  • progressBar.background#6a88ff
  • sideBar.background#282026
  • sideBar.border#555564
  • sideBar.foreground#dfd0d5
  • sideBarSectionHeader.background#352f2f
  • sideBarSectionHeader.foreground#dfd0d5
  • sideBarTitle.foreground#dfd0d5
  • statusBar.background#671822
  • statusBar.border#555564
  • statusBar.debuggingBackground#a04f9f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#352f2f
  • statusBar.noFolderForeground#dfd0d5
  • tab.activeBackground#15050f
  • tab.activeBorder#6a88ff
  • tab.activeForeground#dfd0d5
  • tab.border#555564
  • tab.hoverBackground#3f1515
  • tab.hoverBorder#555564
  • tab.inactiveBackground#282026
  • tab.inactiveForeground#908890
  • tab.unfocusedActiveBackground#1a1517
  • tab.unfocusedActiveBorder#555564
  • tab.unfocusedActiveForeground#908890
  • terminal.ansiBlack#dfd0d5
  • terminal.ansiBlue#379cf6
  • terminal.ansiBrightBlack#908890
  • terminal.ansiBrightBlue#6a88ff
  • terminal.ansiBrightCyan#3f9aaf
  • terminal.ansiBrightGreen#64aa0f
  • terminal.ansiBrightMagenta#c560aa
  • terminal.ansiBrightRed#df4f4f
  • terminal.ansiBrightWhite#15050f
  • terminal.ansiBrightYellow#d0730f
  • terminal.ansiCyan#3fafcf
  • terminal.ansiGreen#2fa526
  • terminal.ansiMagenta#b0648f
  • terminal.ansiRed#cf4f5f
  • terminal.ansiWhite#282026
  • terminal.ansiYellow#c48702
  • terminal.background#15050f
  • terminal.foreground#dfd0d5
  • terminalCursor.foreground#fd3333
  • titleBar.activeBackground#352f2f
  • titleBar.activeForeground#dfd0d5
  • titleBar.border#555564
  • titleBar.inactiveBackground#1a1517
  • titleBar.inactiveForeground#908890

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#cf9f7fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#82a0af
keyword, storage, storage.modifier#a6699f
keyword.operator#908890
storage.type, support.type, entity.name.type, entity.other.inherited-class#00b066
entity.name.function, support.function, meta.function-call, variable.function#c560aa
variable, support.variable, variable.other#4fafaf
constant, constant.numeric, constant.character, constant.language, support.constant#029fff
string, constant.other.symbol#6a88ff
constant.character.escape, string.regexp#b0648f
punctuation#908890
invalid, invalid.illegal#df4f4f
markup.heading#cf4f5fbold
markup.bold, markup.italic#6a88ffbold italic
meta.link, markup.underline.link#6a88ffunderline
markup.list, markup.quote#afdaef
markup.inline.raw#c560aa
markup.inserted, meta.diff.header.to-file#cbdfff
markup.deleted, meta.diff.header.from-file#ffbfbf
markup.changed, meta.diff.range#e3cfff