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#f2e4ea
  • activityBar.border#c6bbc6
  • activityBar.foreground#4f4073
  • activityBarBadge.background#5250ef
  • activityBarBadge.foreground#fff2f3
  • badge.background#f4cfff
  • badge.foreground#341f58
  • button.background#f4cfff
  • button.foreground#341f58
  • button.hoverBackground#b4cfff
  • diffEditor.border#c6bbc6
  • diffEditor.insertedLineBackground#dff6ea99
  • diffEditor.insertedTextBackground#caf4da99
  • diffEditor.removedLineBackground#ffdfe699
  • diffEditor.removedTextBackground#ffcee099
  • dropdown.background#fff2f3
  • dropdown.border#c6bbc6
  • dropdown.foreground#4f4073
  • editor.background#fff2f3
  • editor.findMatchBackground#ffc200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffe5ba99
  • editor.foreground#4f4073
  • editor.hoverHighlightBackground#b4cfff99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#ffd6e5
  • editor.selectionBackground#eecfff
  • editor.selectionHighlightBackground#f4cfff99
  • editor.wordHighlightBackground#bbefda99
  • editor.wordHighlightStrongBackground#aaeccf99
  • editorBracketMatch.background#9fc0ef
  • editorBracketMatch.border#ba35af
  • editorCursor.foreground#cf0090
  • editorError.foreground#e00033
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#f7ebee
  • editorGutter.deletedBackground#e00033
  • editorGutter.modifiedBackground#b6532f
  • editorHint.foreground#786e74
  • editorIndentGuide.activeBackground1#cfb3c4
  • editorIndentGuide.background1#c6bbc6
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#4f4073
  • editorLineNumber.foreground#786e74
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#c6bbc6
  • editorOverviewRuler.deletedForeground#e00033
  • editorOverviewRuler.modifiedForeground#b6532f
  • editorRuler.foreground#efd3e4
  • editorWarning.foreground#b6532f
  • editorWhitespace.foreground#c6bbc6
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#d50f7f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#786e74
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#af4988
  • gitDecoration.untrackedResourceForeground#007f68
  • input.background#fff2f3
  • input.border#c6bbc6
  • input.foreground#4f4073
  • input.placeholderForeground#786e74
  • inputOption.activeBackground#f4cfff
  • inputOption.activeBorder#5250ef
  • inputValidation.errorBackground#ffd0e6
  • inputValidation.errorBorder#e00033
  • inputValidation.infoBackground#bbefda
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#ffe5ba
  • inputValidation.warningBorder#b6532f
  • list.activeSelectionBackground#f4cfff
  • list.activeSelectionForeground#341f58
  • list.activeSelectionIconForeground#5250ef
  • list.focusBackground#f4cfff
  • list.highlightForeground#5250ef
  • list.hoverBackground#b4cfff
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#efd3e4
  • notificationCenterHeader.foreground#4f4073
  • panel.background#fff2f3
  • panel.border#c6bbc6
  • panelTitle.activeBorder#5250ef
  • panelTitle.activeForeground#4f4073
  • panelTitle.inactiveForeground#786e74
  • progressBar.background#5250ef
  • sideBar.background#f2e4ea
  • sideBar.border#c6bbc6
  • sideBar.foreground#4f4073
  • sideBarSectionHeader.background#efd3e4
  • sideBarSectionHeader.foreground#4f4073
  • sideBarTitle.foreground#4f4073
  • statusBar.background#ffa4dc
  • statusBar.border#c6bbc6
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#341f58
  • statusBar.foreground#341f58
  • statusBar.noFolderBackground#efd3e4
  • statusBar.noFolderForeground#4f4073
  • tab.activeBackground#fff2f3
  • tab.activeBorder#5250ef
  • tab.activeForeground#4f4073
  • tab.border#c6bbc6
  • tab.hoverBackground#ffd6e5
  • tab.hoverBorder#c6bbc6
  • tab.inactiveBackground#f2e4ea
  • tab.inactiveForeground#786e74
  • tab.unfocusedActiveBackground#f7ebee
  • tab.unfocusedActiveBorder#c6bbc6
  • tab.unfocusedActiveForeground#786e74
  • terminal.ansiBlack#4f4073
  • terminal.ansiBlue#375ce6
  • terminal.ansiBrightBlack#786e74
  • terminal.ansiBrightBlue#5250ef
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cb1aaa
  • terminal.ansiBrightRed#e00033
  • terminal.ansiBrightWhite#fff2f3
  • terminal.ansiBrightYellow#b6532f
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#ba35af
  • terminal.ansiRed#d3303a
  • terminal.ansiWhite#f2e4ea
  • terminal.ansiYellow#a45f22
  • terminal.background#fff2f3
  • terminal.foreground#4f4073
  • terminalCursor.foreground#cf0090
  • titleBar.activeBackground#efd3e4
  • titleBar.activeForeground#4f4073
  • titleBar.border#c6bbc6
  • titleBar.inactiveBackground#f7ebee
  • titleBar.inactiveForeground#786e74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a5f6aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#5f60bf
keyword, storage, storage.modifier#8e44f3
keyword.operator#786e74
storage.type, support.type, entity.name.type, entity.other.inherited-class#007f68
entity.name.function, support.function, meta.function-call, variable.function#cb1aaa
variable, support.variable, variable.other#0f7b8f
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#5250ef
constant.character.escape, string.regexp#ba35af
punctuation#786e74
invalid, invalid.illegal#e00033
markup.heading#d3303abold
markup.bold, markup.italic#5250efbold italic
meta.link, markup.underline.link#5250efunderline
markup.list, markup.quote#af4988
markup.inline.raw#cb1aaa
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00