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#1f1f28
  • activityBar.border#3a3a46
  • activityBar.foreground#a89bc7
  • activityBar.inactiveForeground#7a7a8a
  • activityBarBadge.background#8b7fb8
  • activityBarBadge.foreground#ffffff
  • badge.background#8b7fb8
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#a89bc7
  • breadcrumb.focusForeground#d0d0dd
  • breadcrumb.foreground#8a8a9a
  • breadcrumbPicker.background#30303d
  • button.background#8b7fb8
  • button.foreground#ffffff
  • button.hoverBackground#9d8fc8
  • diffEditor.insertedTextBackground#9db89920
  • diffEditor.removedTextBackground#c9919e20
  • dropdown.background#30303d
  • dropdown.border#4a4a5a
  • dropdown.foreground#d0d0dd
  • editor.background#2a2a35
  • editor.foreground#d0d0dd
  • editor.inactiveSelectionBackground#3a3a4a60
  • editor.lineHighlightBackground#35354260
  • editor.selectionBackground#4a4a5a80
  • editorCursor.foreground#a89bc7
  • editorError.foreground#c9919e
  • editorGroupHeader.tabsBackground#20202a
  • editorGroupHeader.tabsBorder#3a3a46
  • editorInfo.foreground#9d9dc9
  • editorLineNumber.activeForeground#9d9daf
  • editorLineNumber.foreground#6b6b7a
  • editorSuggestWidget.background#30303d
  • editorSuggestWidget.border#4a4a5a
  • editorSuggestWidget.highlightForeground#a89bc7
  • editorSuggestWidget.selectedBackground#4a4a5a
  • editorWarning.foreground#d4c49d
  • editorWhitespace.foreground#4a4a5a
  • editorWidget.background#30303d
  • editorWidget.border#4a4a5a
  • gitDecoration.conflictingResourceForeground#d4c49d
  • gitDecoration.deletedResourceForeground#c9919e
  • gitDecoration.ignoredResourceForeground#6b6b7a
  • gitDecoration.modifiedResourceForeground#9d9dc9
  • gitDecoration.untrackedResourceForeground#9db899
  • input.background#30303d
  • input.border#4a4a5a
  • input.foreground#d0d0dd
  • input.placeholderForeground#7a7a8a
  • inputOption.activeBorder#8b7fb8
  • list.activeSelectionBackground#4a4a5a
  • list.activeSelectionForeground#e5e5f0
  • list.highlightForeground#a89bc7
  • list.hoverBackground#35354280
  • list.inactiveSelectionBackground#3a3a4a60
  • panel.background#25252f
  • panel.border#3a3a46
  • panelTitle.activeBorder#8b7fb8
  • panelTitle.activeForeground#d0d0dd
  • panelTitle.inactiveForeground#8a8a9a
  • peekView.border#8b7fb8
  • peekViewEditor.background#2a2a35
  • peekViewResult.background#25252f
  • peekViewTitle.background#20202a
  • scrollbarSlider.activeBackground#6a6a7a90
  • scrollbarSlider.background#4a4a5a60
  • scrollbarSlider.hoverBackground#5a5a6a80
  • sideBar.background#25252f
  • sideBar.border#3a3a46
  • sideBar.foreground#c0c0ce
  • sideBarTitle.foreground#a89bc7
  • statusBar.background#2a2a35
  • statusBar.border#3a3a46
  • statusBar.debuggingBackground#8b7fb8
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#b0b0c0
  • statusBar.noFolderBackground#2a2a35
  • tab.activeBackground#2a2a35
  • tab.activeBorder#8b7fb8
  • tab.activeForeground#d0d0dd
  • tab.border#3a3a46
  • tab.hoverBackground#30303d
  • tab.inactiveBackground#20202a
  • tab.inactiveForeground#8a8a9a
  • terminal.ansiBlack#2a2a35
  • terminal.ansiBlue#9d9dc9
  • terminal.ansiBrightBlack#5a5a6a
  • terminal.ansiBrightBlue#adaed9
  • terminal.ansiBrightCyan#a9d9d9
  • terminal.ansiBrightGreen#adc8a9
  • terminal.ansiBrightMagenta#c8a9d9
  • terminal.ansiBrightRed#d9a1ae
  • terminal.ansiBrightWhite#e5e5f0
  • terminal.ansiBrightYellow#e4d4ad
  • terminal.ansiCyan#99c9c9
  • terminal.ansiGreen#9db899
  • terminal.ansiMagenta#b899c9
  • terminal.ansiRed#c9919e
  • terminal.ansiWhite#d0d0dd
  • terminal.ansiYellow#d4c49d
  • terminal.background#25252f
  • terminal.foreground#d0d0dd
  • titleBar.activeBackground#25252f
  • titleBar.activeForeground#d0d0dd
  • titleBar.border#3a3a46
  • titleBar.inactiveBackground#1f1f28
  • titleBar.inactiveForeground#8a8a9a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7a8aitalic
variable, variable.other, variable.parameter#d0d0dd
variable.language#b899c9
constant, constant.numeric, constant.language, constant.character.escape#c9b19d
constant.numeric#d4c49d
string, string.quoted, string.template#9db899
keyword, keyword.control, keyword.operator.new, keyword.other#a89bc7
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#9d9daf
storage, storage.type, storage.modifier#b899c9
entity.name.function, meta.function-call, support.function#9d9dc9
entity.name.type, entity.name.class, support.class, support.type#b8a99d
entity.other.inherited-class#a89bc7
variable.parameter, meta.function.parameters#c9b19d
entity.name.tag#a89bc7
entity.other.attribute-name#9d9dc9
support.constant, support.variable#b899c9
meta.import, meta.export#9d9dc9
markup.heading#a89bc7bold
markup.bold#b899c9bold
markup.italic#9d9dc9italic
markup.list#9db899
markup.quote#7a7a8aitalic
markup.inline.raw, markup.fenced_code#9db899
punctuation#9d9daf
invalid, invalid.illegal#c9919e
invalid.deprecated#d4c49d

Shiki preview

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

Loading...

Pulse Studio Theme - Coding Theme