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#f5c2e7
  • activityBar.background#161621
  • activityBar.border#42424f
  • activityBar.foreground#f5c2e7
  • activityBar.inactiveForeground#796774
  • activityBarBadge.background#f5c2e7
  • activityBarBadge.foreground#1e1e2e
  • badge.background#f5c2e7
  • badge.foreground#1e1e2e
  • breadcrumb.activeSelectionForeground#f5c2e7
  • breadcrumb.focusForeground#e0d6de
  • breadcrumb.foreground#796774
  • button.background#f5c2e7
  • button.foreground#1e1e2e
  • button.hoverBackground#f6cbea
  • descriptionForeground#a894a2
  • dropdown.background#30303f
  • dropdown.border#42424f
  • dropdown.foreground#e0d6de
  • editor.background#1e1e2e
  • editor.findMatchBackground#f5c2e773
  • editor.findMatchHighlightBackground#f5c2e738
  • editor.foreground#e0d6de
  • editor.lineHighlightBackground#39394766
  • editor.selectionBackground#f5c2e752
  • editor.selectionHighlightBackground#f5c2e729
  • editor.wordHighlightBackground#f5c2e729
  • editor.wordHighlightStrongBackground#f5c2e73d
  • editorBracketMatch.background#f5c2e729
  • editorBracketMatch.border#f5c2e799
  • editorCursor.foreground#f5c2e7
  • editorError.foreground#f38ba8
  • editorGroup.border#42424f
  • editorGroupHeader.tabsBackground#1a1a28
  • editorGroupHeader.tabsBorder#42424f
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#eca0a0
  • editorHoverWidget.background#30303f
  • editorHoverWidget.border#42424f
  • editorIndentGuide.activeBackground1#f5c2e799
  • editorIndentGuide.background1#42424f
  • editorInfo.foreground#f5c2e7
  • editorLineNumber.activeForeground#f5c2e7
  • editorLineNumber.foreground#796774
  • editorSuggestWidget.background#30303f
  • editorSuggestWidget.selectedBackground#f5c2e73d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#796774
  • editorWidget.background#30303f
  • editorWidget.border#42424f
  • errorForeground#f38ba8
  • focusBorder#f5c2e780
  • foreground#a894a2
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#eca0a0
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#30303f
  • input.border#42424f
  • input.foreground#e0d6de
  • input.placeholderForeground#796774
  • inputOption.activeBackground#f5c2e73d
  • inputOption.activeBorder#f5c2e7
  • list.activeSelectionBackground#f5c2e747
  • list.activeSelectionForeground#e0d6de
  • list.focusBackground#f5c2e747
  • list.highlightForeground#f5c2e7
  • list.hoverBackground#3e3e4b80
  • list.inactiveSelectionBackground#f5c2e729
  • minimap.selectionHighlight#f5c2e780
  • panel.background#1a1a28
  • panel.border#42424f
  • panelTitle.activeBorder#f5c2e7
  • panelTitle.activeForeground#e0d6de
  • panelTitle.inactiveForeground#796774
  • peekViewEditor.background#1e1e2e
  • peekViewResult.background#1a1a28
  • progressBar.background#f5c2e7
  • quickInput.background#30303f
  • quickInput.foreground#e0d6de
  • quickInputList.focusBackground#f5c2e73d
  • scrollbarSlider.activeBackground#f5c2e78c
  • scrollbarSlider.background#f5c2e738
  • scrollbarSlider.hoverBackground#f5c2e761
  • selection.background#f5c2e757
  • sideBar.background#1a1a28
  • sideBar.border#42424f
  • sideBar.foreground#a894a2
  • sideBarSectionHeader.background#1a1a28
  • sideBarSectionHeader.foreground#e0d6de
  • sideBarTitle.foreground#e0d6de
  • statusBar.background#161621
  • statusBar.border#42424f
  • statusBar.debuggingBackground#f5c2e7
  • statusBar.debuggingForeground#1e1e2e
  • statusBar.foreground#a894a2
  • statusBar.noFolderBackground#161621
  • statusBarItem.remoteBackground#f5c2e7
  • statusBarItem.remoteForeground#1e1e2e
  • tab.activeBackground#1e1e2e
  • tab.activeBorder#f5c2e7b3
  • tab.activeBorderTop#f5c2e7
  • tab.activeForeground#e0d6de
  • tab.border#161621
  • tab.inactiveBackground#1a1a28
  • tab.inactiveForeground#796774
  • terminal.background#1e1e2e
  • terminal.foreground#e0d6de
  • terminalCursor.foreground#f5c2e7
  • textLink.activeForeground#f7cceb
  • textLink.foreground#f5c2e7
  • titleBar.activeBackground#161621
  • titleBar.activeForeground#e0d6de
  • titleBar.border#42424f
  • titleBar.inactiveBackground#161621
  • titleBar.inactiveForeground#796774
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#796774italic
string, string.quoted, string.template#c9b773
constant.numeric, constant.language, constant.character, constant.other#87c9a0
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#f5c2e7
keyword.operator, punctuation, meta.brace#a894a2
entity.name.function, support.function, meta.function-call.generic#6fc6dd
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#b9adec
variable, variable.other, meta.definition.variable.name#e0d6de
variable.parameter, variable.other.readwrite#e0d6de
variable.language, variable.other.constant, support.variable#87c9a0
entity.name.tag, punctuation.definition.tag#f5c2e7
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#eca0a0
markup.heading, entity.name.section#f5c2e7bold
markup.bold#87c9a0bold
markup.italic#c9b773italic
markup.inline.raw, markup.fenced_code#6fc6dd
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8