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#ebe7f1
  • activityBar.border#c6bac5
  • activityBar.foreground#4f3363
  • activityBarBadge.background#5165e4
  • activityBarBadge.foreground#f8f5ff
  • badge.background#f4cfff
  • badge.foreground#241f48
  • button.background#f4cfff
  • button.foreground#241f48
  • button.hoverBackground#aaeccf
  • diffEditor.border#c6bac5
  • diffEditor.insertedLineBackground#dff6ea99
  • diffEditor.insertedTextBackground#caf4da99
  • diffEditor.removedLineBackground#ffdfe699
  • diffEditor.removedTextBackground#ffcee099
  • dropdown.background#f8f5ff
  • dropdown.border#c6bac5
  • dropdown.foreground#4f3363
  • editor.background#f8f5ff
  • editor.findMatchBackground#ffc200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffe5bf99
  • editor.foreground#4f3363
  • editor.hoverHighlightBackground#aaeccf99
  • editor.inactiveSelectionBackground#ceddff99
  • editor.lineHighlightBackground#cfe6ff
  • editor.selectionBackground#eed0ff
  • editor.selectionHighlightBackground#f4cfff99
  • editor.wordHighlightBackground#d0efdf99
  • editor.wordHighlightStrongBackground#b4cfff99
  • editorBracketMatch.background#dfadaf
  • editorBracketMatch.border#ad45ba
  • editorCursor.foreground#4f45ff
  • editorError.foreground#d03033
  • editorGutter.addedBackground#057800
  • editorGutter.background#efeef7
  • editorGutter.deletedBackground#d03033
  • editorGutter.modifiedBackground#b8532f
  • editorHint.foreground#786e74
  • editorIndentGuide.activeBackground1#c3c0c9
  • editorIndentGuide.background1#c6bac5
  • editorInfo.foreground#057800
  • editorLineNumber.activeForeground#4f3363
  • editorLineNumber.foreground#786e74
  • editorOverviewRuler.addedForeground#057800
  • editorOverviewRuler.border#c6bac5
  • editorOverviewRuler.deletedForeground#d03033
  • editorOverviewRuler.modifiedForeground#b8532f
  • editorRuler.foreground#e3e0e9
  • editorWarning.foreground#b8532f
  • editorWhitespace.foreground#c6bac5
  • gitDecoration.addedResourceForeground#057800
  • gitDecoration.conflictingResourceForeground#c01f5f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#786e74
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#3f7668
  • gitDecoration.untrackedResourceForeground#007f6f
  • input.background#f8f5ff
  • input.border#c6bac5
  • input.foreground#4f3363
  • input.placeholderForeground#786e74
  • inputOption.activeBackground#f4cfff
  • inputOption.activeBorder#5165e4
  • inputValidation.errorBackground#ffdfe6
  • inputValidation.errorBorder#d03033
  • inputValidation.infoBackground#d0efdf
  • inputValidation.infoBorder#057800
  • inputValidation.warningBackground#ffe5bf
  • inputValidation.warningBorder#b8532f
  • list.activeSelectionBackground#f4cfff
  • list.activeSelectionForeground#241f48
  • list.activeSelectionIconForeground#5165e4
  • list.focusBackground#f4cfff
  • list.highlightForeground#5165e4
  • list.hoverBackground#aaeccf
  • list.inactiveSelectionBackground#ceddff
  • notificationCenterHeader.background#e3e0e9
  • notificationCenterHeader.foreground#4f3363
  • panel.background#f8f5ff
  • panel.border#c6bac5
  • panelTitle.activeBorder#5165e4
  • panelTitle.activeForeground#4f3363
  • panelTitle.inactiveForeground#786e74
  • progressBar.background#5165e4
  • sideBar.background#ebe7f1
  • sideBar.border#c6bac5
  • sideBar.foreground#4f3363
  • sideBarSectionHeader.background#e3e0e9
  • sideBarSectionHeader.foreground#4f3363
  • sideBarTitle.foreground#4f3363
  • statusBar.background#ddb4ff
  • statusBar.border#c6bac5
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#241f48
  • statusBar.foreground#241f48
  • statusBar.noFolderBackground#e3e0e9
  • statusBar.noFolderForeground#4f3363
  • tab.activeBackground#f8f5ff
  • tab.activeBorder#5165e4
  • tab.activeForeground#4f3363
  • tab.border#c6bac5
  • tab.hoverBackground#cfe6ff
  • tab.hoverBorder#c6bac5
  • tab.inactiveBackground#ebe7f1
  • tab.inactiveForeground#786e74
  • tab.unfocusedActiveBackground#efeef7
  • tab.unfocusedActiveBorder#c6bac5
  • tab.unfocusedActiveForeground#786e74
  • terminal.ansiBlack#4f3363
  • terminal.ansiBlue#375cd6
  • terminal.ansiBrightBlack#786e74
  • terminal.ansiBrightBlue#5165e4
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#4f7d0f
  • terminal.ansiBrightMagenta#c035aa
  • terminal.ansiBrightRed#d03033
  • terminal.ansiBrightWhite#f8f5ff
  • terminal.ansiBrightYellow#b8532f
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#057800
  • terminal.ansiMagenta#ad45ba
  • terminal.ansiRed#c3303a
  • terminal.ansiWhite#ebe7f1
  • terminal.ansiYellow#a45f22
  • terminal.background#f8f5ff
  • terminal.foreground#4f3363
  • terminalCursor.foreground#4f45ff
  • titleBar.activeBackground#e3e0e9
  • titleBar.activeForeground#4f3363
  • titleBar.border#c6bac5
  • titleBar.inactiveBackground#efeef7
  • titleBar.inactiveForeground#786e74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a05b5fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#5f60bf
keyword, storage, storage.modifier#705ae3
keyword.operator#786e74
storage.type, support.type, entity.name.type, entity.other.inherited-class#007f6f
entity.name.function, support.function, meta.function-call, variable.function#c035aa
variable, support.variable, variable.other#0f7a9d
constant, constant.numeric, constant.character, constant.language, support.constant#065fbf
string, constant.other.symbol#5165e4
constant.character.escape, string.regexp#ad45ba
punctuation#786e74
invalid, invalid.illegal#d03033
markup.heading#c3303abold
markup.bold, markup.italic#5165e4bold italic
meta.link, markup.underline.link#5165e4underline
markup.list, markup.quote#3f7668
markup.inline.raw#c035aa
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00