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#f3eef8
  • activityBar.foreground#1a1026
  • activityBar.inactiveForeground#8d7aa6
  • activityBarBadge.background#c0387e
  • activityBarBadge.foreground#ffffff
  • badge.background#c0387e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1a1026
  • breadcrumb.focusForeground#1a1026
  • breadcrumb.foreground#7a6892
  • button.background#9b5de5
  • button.foreground#ffffff
  • button.hoverBackground#8a4ad4
  • button.secondaryBackground#e0d6ec
  • button.secondaryForeground#1a1026
  • descriptionForeground#7a6892
  • diffEditor.insertedTextBackground#1a8fb815
  • diffEditor.removedTextBackground#c0387e15
  • dropdown.background#ffffff
  • dropdown.border#d4c8e0
  • dropdown.foreground#1a1026
  • editor.background#faf7fd
  • editor.findMatchBackground#ffe98a60
  • editor.findMatchHighlightBackground#ffe98a30
  • editor.foreground#1a1026
  • editor.lineHighlightBackground#f0eaf620
  • editor.selectionBackground#9b5de530
  • editor.selectionHighlightBackground#9b5de518
  • editor.wordHighlightBackground#9b5de520
  • editor.wordHighlightStrongBackground#9b5de530
  • editorBracketMatch.background#9b5de520
  • editorBracketMatch.border#9b5de560
  • editorCursor.foreground#9b5de5
  • editorGroupHeader.tabsBackground#f3eef8
  • editorGutter.addedBackground#1a8fb8
  • editorGutter.deletedBackground#c0387e
  • editorGutter.modifiedBackground#7c4dba
  • editorHoverWidget.background#f3eef8
  • editorHoverWidget.border#d4c8e0
  • editorIndentGuide.activeBackground1#c4b8d6
  • editorIndentGuide.background1#e0d6ec
  • editorLineNumber.activeForeground#7a6892
  • editorLineNumber.foreground#b0a0c4
  • editorOverviewRuler.addedForeground#1a8fb880
  • editorOverviewRuler.deletedForeground#c0387e80
  • editorOverviewRuler.modifiedForeground#7c4dba80
  • editorSuggestWidget.background#f3eef8
  • editorSuggestWidget.border#d4c8e0
  • editorSuggestWidget.selectedBackground#e6ddf2
  • editorWhitespace.foreground#d4c8e0
  • editorWidget.background#f3eef8
  • editorWidget.border#d4c8e0
  • focusBorder#9b5de580
  • foreground#1a1026
  • gitDecoration.addedResourceForeground#1a8fb8
  • gitDecoration.deletedResourceForeground#c0387e
  • gitDecoration.ignoredResourceForeground#b0a0c4
  • gitDecoration.modifiedResourceForeground#a07000
  • gitDecoration.untrackedResourceForeground#7c4dba
  • icon.foreground#2d1e42
  • input.background#ffffff
  • input.border#d4c8e0
  • input.foreground#1a1026
  • input.placeholderForeground#b0a0c4
  • inputOption.activeBorder#9b5de5
  • list.activeSelectionBackground#e0d6ec
  • list.activeSelectionForeground#1a1026
  • list.highlightForeground#1a8fb8
  • list.hoverBackground#ebe4f3
  • list.inactiveSelectionBackground#ebe4f3
  • minimap.selectionHighlight#9b5de530
  • notificationCenterHeader.background#ebe4f3
  • notifications.background#f3eef8
  • notifications.border#d4c8e0
  • panel.background#faf7fd
  • panel.border#e0d6ec
  • panelTitle.activeBorder#c0387e
  • panelTitle.activeForeground#1a1026
  • panelTitle.inactiveForeground#8d7aa6
  • peekView.border#9b5de5
  • peekViewEditor.background#f3eef8
  • peekViewResult.background#ebe4f3
  • peekViewTitle.background#e0d6ec
  • quickInput.background#f3eef8
  • quickInputList.focusBackground#e6ddf2
  • scrollbarSlider.activeBackground#d4c8e080
  • scrollbarSlider.background#d4c8e030
  • scrollbarSlider.hoverBackground#d4c8e050
  • sideBar.background#f3eef8
  • sideBar.border#e0d6ec
  • sideBar.foreground#2d1e42
  • sideBarSectionHeader.background#ebe4f3
  • sideBarSectionHeader.foreground#1a1026
  • sideBarTitle.foreground#1a1026
  • statusBar.background#f3eef8
  • statusBar.debuggingBackground#9b5de5
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2d1e42
  • statusBar.noFolderBackground#faf7fd
  • statusBarItem.remoteBackground#9b5de5
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#faf7fd
  • tab.activeBorderTop#c0387e
  • tab.activeForeground#1a1026
  • tab.border#e0d6ec
  • tab.inactiveBackground#f3eef8
  • tab.inactiveForeground#8d7aa6
  • terminal.ansiBlack#1a1026
  • terminal.ansiBlue#7c4dba
  • terminal.ansiBrightBlack#8d7aa6
  • terminal.ansiBrightBlue#9b5de5
  • terminal.ansiBrightCyan#0e7fa3
  • terminal.ansiBrightGreen#1a8fb8
  • terminal.ansiBrightMagenta#c0387e
  • terminal.ansiBrightRed#c0387e
  • terminal.ansiBrightWhite#1a1026
  • terminal.ansiBrightYellow#a07000
  • terminal.ansiCyan#0e7fa3
  • terminal.ansiGreen#1a8fb8
  • terminal.ansiMagenta#9b5de5
  • terminal.ansiRed#c0387e
  • terminal.ansiWhite#f0e6fa
  • terminal.ansiYellow#a07000
  • terminal.foreground#1a1026
  • titleBar.activeBackground#f3eef8
  • titleBar.activeForeground#2d1e42
  • titleBar.inactiveBackground#f3eef8
  • titleBar.inactiveForeground#8d7aa6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8d7aa6italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#c0387e
keyword.operator, keyword.operator.assignment#c0387e
string, string.quoted, string.template#a07000
string.other.raw#a07000
constant.numeric, constant.numeric.duration#7c4dba
constant.numeric.duration.edg#1a8fb8
constant.language, constant.language.boolean#c0387e
constant.character.escape#7c4dba
entity.name.function, support.function#1a8fb8
entity.name.type, entity.name.class, support.type, support.class#1a8fb8
entity.name.tag#c0387e
entity.other.attribute-name#7c4dba
variable, variable.other, variable.parameter#7c4dba
variable.parameter.placeholder#1a8fb8
variable.language#c0387eitalic
punctuation#382950
punctuation.definition.string#a07000
meta.embedded, source.groovy.embedded#1a1026
markup.heading, markup.heading.setext#1a8fb8bold
markup.bold#c0387ebold
markup.italic#7c4dbaitalic
markup.inline.raw, markup.fenced_code#a07000
markup.underline.link#0e7fa3
markup.inserted#1a8fb8
markup.deleted#c0387e
markup.changed#a07000
support.constant#7c4dba
support.variable#7c4dba
meta.diff.header#1a8fb8bold
invalid, invalid.illegal#c0387e
invalid.deprecated#c0387estrikethrough