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#16161f
  • activityBar.border#2d2d42
  • activityBar.foreground#9d7dc7
  • activityBar.inactiveForeground#6a6a7e
  • activityBarBadge.background#8b6fb8
  • activityBarBadge.foreground#ffffff
  • badge.background#8b6fb8
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#9d7dc7
  • breadcrumb.focusForeground#d5d5e3
  • breadcrumb.foreground#7a7a8e
  • breadcrumbPicker.background#24243480
  • button.background#8b6fb8
  • button.foreground#ffffff
  • button.hoverBackground#9d7dc7
  • diffEditor.insertedTextBackground#a8c99a20
  • diffEditor.removedTextBackground#d89aaa20
  • dropdown.background#24243480
  • dropdown.border#3d3d55
  • dropdown.foreground#d5d5e3
  • editor.background#1e1e2e
  • editor.foreground#d5d5e3
  • editor.inactiveSelectionBackground#2d2d4560
  • editor.lineHighlightBackground#2a2a3e60
  • editor.selectionBackground#3d3d5580
  • editorCursor.foreground#9d7dc7
  • editorError.foreground#d89aaa
  • editorGroupHeader.tabsBackground#16161f
  • editorGroupHeader.tabsBorder#2d2d42
  • editorInfo.foreground#9d9ddb
  • editorLineNumber.activeForeground#9d7dc7
  • editorLineNumber.foreground#6a6a7e
  • editorSuggestWidget.background#24243480
  • editorSuggestWidget.border#3d3d55
  • editorSuggestWidget.highlightForeground#9d7dc7
  • editorSuggestWidget.selectedBackground#3d3d55
  • editorWarning.foreground#ddc8a3
  • editorWhitespace.foreground#3d3d55
  • editorWidget.background#24243480
  • editorWidget.border#3d3d55
  • gitDecoration.conflictingResourceForeground#ddc8a3
  • gitDecoration.deletedResourceForeground#d89aaa
  • gitDecoration.ignoredResourceForeground#5a5a6e
  • gitDecoration.modifiedResourceForeground#9d9ddb
  • gitDecoration.untrackedResourceForeground#a8c99a
  • input.background#24243480
  • input.border#3d3d55
  • input.foreground#d5d5e3
  • input.placeholderForeground#6a6a7e
  • inputOption.activeBorder#8b6fb8
  • list.activeSelectionBackground#3d3d55
  • list.activeSelectionForeground#ebebf5
  • list.highlightForeground#9d7dc7
  • list.hoverBackground#2a2a3e80
  • list.inactiveSelectionBackground#2d2d4560
  • panel.background#1a1a28
  • panel.border#2d2d42
  • panelTitle.activeBorder#8b6fb8
  • panelTitle.activeForeground#d5d5e3
  • panelTitle.inactiveForeground#7a7a8e
  • peekView.border#8b6fb8
  • peekViewEditor.background#1e1e2e
  • peekViewResult.background#1a1a28
  • peekViewTitle.background#16161f
  • scrollbarSlider.activeBackground#5d5d7590
  • scrollbarSlider.background#3d3d5560
  • scrollbarSlider.hoverBackground#4d4d6580
  • sideBar.background#1a1a28
  • sideBar.border#2d2d42
  • sideBar.foreground#c5c5d8
  • sideBarTitle.foreground#9d7dc7
  • statusBar.background#1e1e2e
  • statusBar.border#2d2d42
  • statusBar.debuggingBackground#8b6fb8
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#b5b5ca
  • statusBar.noFolderBackground#1e1e2e
  • tab.activeBackground#1e1e2e
  • tab.activeBorder#8b6fb8
  • tab.activeForeground#d5d5e3
  • tab.border#2d2d42
  • tab.hoverBackground#24243480
  • tab.inactiveBackground#16161f
  • tab.inactiveForeground#7a7a8e
  • terminal.ansiBlack#1e1e2e
  • terminal.ansiBlue#9d9ddb
  • terminal.ansiBrightBlack#5a5a6e
  • terminal.ansiBrightBlue#adadeb
  • terminal.ansiBrightCyan#aae8e8
  • terminal.ansiBrightGreen#b8d9aa
  • terminal.ansiBrightMagenta#d4aae8
  • terminal.ansiBrightRed#e8aaba
  • terminal.ansiBrightWhite#ebebf5
  • terminal.ansiBrightYellow#edd8b3
  • terminal.ansiCyan#9ad8d8
  • terminal.ansiGreen#a8c99a
  • terminal.ansiMagenta#c49ad8
  • terminal.ansiRed#d89aaa
  • terminal.ansiWhite#d5d5e3
  • terminal.ansiYellow#ddc8a3
  • terminal.background#1a1a28
  • terminal.foreground#d5d5e3
  • titleBar.activeBackground#1a1a28
  • titleBar.activeForeground#d5d5e3
  • titleBar.border#2d2d42
  • titleBar.inactiveBackground#16161f
  • titleBar.inactiveForeground#7a7a8e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6a7eitalic
variable, variable.other, variable.parameter#d5d5e3—
variable.language#c49ad8—
constant, constant.numeric, constant.language, constant.character.escape#d4b8a3—
constant.numeric#ddc8a3—
string, string.quoted, string.template#a8c99a—
keyword, keyword.control, keyword.operator.new, keyword.other#9d7dc7—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#b5b5ca—
storage, storage.type, storage.modifier#c49ad8—
entity.name.function, meta.function-call, support.function#9d9ddb—
entity.name.type, entity.name.class, support.class, support.type#d4b8a3—
entity.other.inherited-class#9d7dc7—
variable.parameter, meta.function.parameters#d4b8a3—
entity.name.tag#9d7dc7—
entity.other.attribute-name#9d9ddb—
support.constant, support.variable#c49ad8—
meta.import, meta.export#9d9ddb—
markup.heading#9d7dc7bold
markup.bold#c49ad8bold
markup.italic#9d9ddbitalic
markup.list#a8c99a—
markup.quote#6a6a7eitalic
markup.inline.raw, markup.fenced_code#a8c99a—
punctuation#b5b5ca—
invalid, invalid.illegal#d89aaa—
invalid.deprecated#ddc8a3—