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#e0d8ec
  • activityBar.border#d0c4e3
  • activityBar.foreground#7c5fc7
  • activityBar.inactiveForeground#8a7e9e
  • activityBarBadge.background#8b6fb8
  • activityBarBadge.foreground#ffffff
  • badge.background#8b6fb8
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7c5fc7
  • breadcrumb.focusForeground#2e2838
  • breadcrumb.foreground#6a5e7e
  • breadcrumbPicker.background#ffffff
  • button.background#8b6fb8
  • button.foreground#ffffff
  • button.hoverBackground#9d7dc7
  • diffEditor.insertedTextBackground#5d985720
  • diffEditor.removedTextBackground#b8576d20
  • dropdown.background#ffffff
  • dropdown.border#c0b4d3
  • dropdown.foreground#2e2838
  • editor.background#f5f2f8
  • editor.foreground#2e2838
  • editor.inactiveSelectionBackground#e0d8ec60
  • editor.lineHighlightBackground#ebe6f260
  • editor.selectionBackground#d0c4e380
  • editorCursor.foreground#7c5fc7
  • editorError.foreground#b8576d
  • editorGroupHeader.tabsBackground#e0d8ec
  • editorGroupHeader.tabsBorder#d0c4e3
  • editorInfo.foreground#5d6dbb
  • editorLineNumber.activeForeground#6d5f8d
  • editorLineNumber.foreground#8a7e9e
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#c0b4d3
  • editorSuggestWidget.highlightForeground#7c5fc7
  • editorSuggestWidget.selectedBackground#d0c4e3
  • editorWarning.foreground#c89f4d
  • editorWhitespace.foreground#c8bcd8
  • editorWidget.background#ffffff
  • editorWidget.border#c0b4d3
  • gitDecoration.conflictingResourceForeground#c89f4d
  • gitDecoration.deletedResourceForeground#b8576d
  • gitDecoration.ignoredResourceForeground#8a7e9e
  • gitDecoration.modifiedResourceForeground#5d6dbb
  • gitDecoration.untrackedResourceForeground#5d9857
  • input.background#ffffff
  • input.border#c0b4d3
  • input.foreground#2e2838
  • input.placeholderForeground#8a7e9e
  • inputOption.activeBorder#8b6fb8
  • list.activeSelectionBackground#d0c4e3
  • list.activeSelectionForeground#2e2838
  • list.highlightForeground#7c5fc7
  • list.hoverBackground#e0d8ec80
  • list.inactiveSelectionBackground#e0d8ec60
  • panel.background#ebe6f2
  • panel.border#d0c4e3
  • panelTitle.activeBorder#8b6fb8
  • panelTitle.activeForeground#2e2838
  • panelTitle.inactiveForeground#6a5e7e
  • peekView.border#8b6fb8
  • peekViewEditor.background#f5f2f8
  • peekViewResult.background#ebe6f2
  • peekViewTitle.background#e0d8ec
  • scrollbarSlider.activeBackground#a094b390
  • scrollbarSlider.background#c0b4d360
  • scrollbarSlider.hoverBackground#b0a4c380
  • sideBar.background#ebe6f2
  • sideBar.border#d0c4e3
  • sideBar.foreground#3e3848
  • sideBarTitle.foreground#7c5fc7
  • statusBar.background#ebe6f2
  • statusBar.border#d0c4e3
  • statusBar.debuggingBackground#8b6fb8
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4e4858
  • statusBar.noFolderBackground#ebe6f2
  • tab.activeBackground#f5f2f8
  • tab.activeBorder#8b6fb8
  • tab.activeForeground#2e2838
  • tab.border#d0c4e3
  • tab.hoverBackground#ebe6f280
  • tab.inactiveBackground#e0d8ec
  • tab.inactiveForeground#6a5e7e
  • terminal.ansiBlack#3e3848
  • terminal.ansiBlue#5d6dbb
  • terminal.ansiBrightBlack#6a5e7e
  • terminal.ansiBrightBlue#6d7dcb
  • terminal.ansiBrightCyan#5dadad
  • terminal.ansiBrightGreen#6da867
  • terminal.ansiBrightMagenta#ad67c8
  • terminal.ansiBrightRed#c8677d
  • terminal.ansiBrightWhite#f5f0fd
  • terminal.ansiBrightYellow#d8af5d
  • terminal.ansiCyan#4d9d9d
  • terminal.ansiGreen#5d9857
  • terminal.ansiMagenta#9d57b8
  • terminal.ansiRed#b8576d
  • terminal.ansiWhite#e5e0ed
  • terminal.ansiYellow#c89f4d
  • terminal.background#ebe6f2
  • terminal.foreground#2e2838
  • titleBar.activeBackground#e0d8ec
  • titleBar.activeForeground#2e2838
  • titleBar.border#d0c4e3
  • titleBar.inactiveBackground#ebe6f2
  • titleBar.inactiveForeground#7a6e8e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a7e9eitalic
variable, variable.other, variable.parameter#3e3848
variable.language#9d57b8
constant, constant.numeric, constant.language, constant.character.escape#b8774d
constant.numeric#c89f4d
string, string.quoted, string.template#4d8847
keyword, keyword.control, keyword.operator.new, keyword.other#7c5fc7
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#5e5268
storage, storage.type, storage.modifier#9d57b8
entity.name.function, meta.function-call, support.function#5d6dbb
entity.name.type, entity.name.class, support.class, support.type#b8774d
entity.other.inherited-class#7c5fc7
variable.parameter, meta.function.parameters#b8774d
entity.name.tag#7c5fc7
entity.other.attribute-name#5d6dbb
support.constant, support.variable#9d57b8
meta.import, meta.export#5d6dbb
markup.heading#7c5fc7bold
markup.bold#9d57b8bold
markup.italic#5d6dbbitalic
markup.list#5d9857
markup.quote#8a7e9eitalic
markup.inline.raw, markup.fenced_code#4d8847
punctuation#5e5268
invalid, invalid.illegal#b8576d
invalid.deprecated#c89f4d

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...