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—
Pulse Studio Theme by Irvin Benitez - VS Code Theme