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.activeBorder#cba6f7
  • activityBar.background#100c15
  • activityBar.border#3b3741
  • activityBar.foreground#cba6f7
  • activityBar.inactiveForeground#6f6779
  • activityBarBadge.background#cba6f7
  • activityBarBadge.foreground#16111d
  • badge.background#cba6f7
  • badge.foreground#16111d
  • breadcrumb.activeSelectionForeground#cba6f7
  • breadcrumb.focusForeground#dbd6e0
  • breadcrumb.foreground#6f6779
  • button.background#cba6f7
  • button.foreground#16111d
  • button.hoverBackground#d2b2f8
  • descriptionForeground#9d94a8
  • dropdown.background#29242f
  • dropdown.border#3b3741
  • dropdown.foreground#dbd6e0
  • editor.background#16111d
  • editor.findMatchBackground#cba6f773
  • editor.findMatchHighlightBackground#cba6f738
  • editor.foreground#dbd6e0
  • editor.lineHighlightBackground#322e3866
  • editor.selectionBackground#cba6f752
  • editor.selectionHighlightBackground#cba6f729
  • editor.wordHighlightBackground#cba6f729
  • editor.wordHighlightStrongBackground#cba6f73d
  • editorBracketMatch.background#cba6f729
  • editorBracketMatch.border#cba6f799
  • editorCursor.foreground#cba6f7
  • editorError.foreground#f38ba8
  • editorGroup.border#3b3741
  • editorGroupHeader.tabsBackground#130f1a
  • editorGroupHeader.tabsBorder#3b3741
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#ef97c5
  • editorHoverWidget.background#29242f
  • editorHoverWidget.border#3b3741
  • editorIndentGuide.activeBackground1#cba6f799
  • editorIndentGuide.background1#3b3741
  • editorInfo.foreground#cba6f7
  • editorLineNumber.activeForeground#cba6f7
  • editorLineNumber.foreground#6f6779
  • editorSuggestWidget.background#29242f
  • editorSuggestWidget.selectedBackground#cba6f73d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#6f6779
  • editorWidget.background#29242f
  • editorWidget.border#3b3741
  • errorForeground#f38ba8
  • focusBorder#cba6f780
  • foreground#9d94a8
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#ef97c5
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#29242f
  • input.border#3b3741
  • input.foreground#dbd6e0
  • input.placeholderForeground#6f6779
  • inputOption.activeBackground#cba6f73d
  • inputOption.activeBorder#cba6f7
  • list.activeSelectionBackground#cba6f747
  • list.activeSelectionForeground#dbd6e0
  • list.focusBackground#cba6f747
  • list.highlightForeground#cba6f7
  • list.hoverBackground#37323d80
  • list.inactiveSelectionBackground#cba6f729
  • minimap.selectionHighlight#cba6f780
  • panel.background#130f1a
  • panel.border#3b3741
  • panelTitle.activeBorder#cba6f7
  • panelTitle.activeForeground#dbd6e0
  • panelTitle.inactiveForeground#6f6779
  • peekViewEditor.background#16111d
  • peekViewResult.background#130f1a
  • progressBar.background#cba6f7
  • quickInput.background#29242f
  • quickInput.foreground#dbd6e0
  • quickInputList.focusBackground#cba6f73d
  • scrollbarSlider.activeBackground#cba6f78c
  • scrollbarSlider.background#cba6f738
  • scrollbarSlider.hoverBackground#cba6f761
  • selection.background#cba6f757
  • sideBar.background#130f1a
  • sideBar.border#3b3741
  • sideBar.foreground#9d94a8
  • sideBarSectionHeader.background#130f1a
  • sideBarSectionHeader.foreground#dbd6e0
  • sideBarTitle.foreground#dbd6e0
  • statusBar.background#100c15
  • statusBar.border#3b3741
  • statusBar.debuggingBackground#cba6f7
  • statusBar.debuggingForeground#16111d
  • statusBar.foreground#9d94a8
  • statusBar.noFolderBackground#100c15
  • statusBarItem.remoteBackground#cba6f7
  • statusBarItem.remoteForeground#16111d
  • tab.activeBackground#16111d
  • tab.activeBorder#cba6f7b3
  • tab.activeBorderTop#cba6f7
  • tab.activeForeground#dbd6e0
  • tab.border#100c15
  • tab.inactiveBackground#130f1a
  • tab.inactiveForeground#6f6779
  • terminal.background#16111d
  • terminal.foreground#dbd6e0
  • terminalCursor.foreground#cba6f7
  • textLink.activeForeground#d3b4f8
  • textLink.foreground#cba6f7
  • titleBar.activeBackground#100c15
  • titleBar.activeForeground#dbd6e0
  • titleBar.border#3b3741
  • titleBar.inactiveBackground#100c15
  • titleBar.inactiveForeground#6f6779
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f6779italic
string, string.quoted, string.template#eda662
constant.numeric, constant.language, constant.character, constant.other#a6c56d
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#cba6f7
keyword.operator, punctuation, meta.brace#9d94a8
entity.name.function, support.function, meta.function-call.generic#45d0c3
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#8db7ff
variable, variable.other, meta.definition.variable.name#dbd6e0
variable.parameter, variable.other.readwrite#dbd6e0
variable.language, variable.other.constant, support.variable#a6c56d
entity.name.tag, punctuation.definition.tag#cba6f7
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#ef97c5
markup.heading, entity.name.section#cba6f7bold
markup.bold#a6c56dbold
markup.italic#eda662italic
markup.inline.raw, markup.fenced_code#45d0c3
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8