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#08050c
  • activityBar.border#1a1028
  • activityBar.foreground#c870a0
  • activityBar.inactiveForeground#241438
  • activityBarBadge.background#d183a9
  • activityBarBadge.foreground#0d0810
  • badge.background#71557a
  • badge.foreground#f8e0ec
  • breadcrumb.activeSelectionForeground#f3c8dd
  • breadcrumb.focusForeground#c870a0
  • breadcrumb.foreground#3a1c40
  • breadcrumbPicker.background#100c18
  • button.background#71557a
  • button.foreground#f8e0ec
  • button.hoverBackground#8e6898
  • button.secondaryBackground#2c1440
  • button.secondaryForeground#c870a0
  • descriptionForeground#5a3860
  • dropdown.background#100c18
  • dropdown.border#2c1440
  • dropdown.foreground#f3c8dd
  • editor.background#0d0810
  • editor.findMatchBackground#6a1040
  • editor.findMatchHighlightBackground#480c2c
  • editor.foreground#f3c8dd
  • editor.inactiveSelectionBackground#260c1c
  • editor.lineHighlightBackground#14101a
  • editor.rangeHighlightBackground#110c18
  • editor.selectionBackground#4b1535
  • editor.selectionHighlightBackground#361024
  • editor.wordHighlightBackground#3a1030
  • editor.wordHighlightStrongBackground#501540
  • editorBracketMatch.background#4b1535
  • editorBracketMatch.border#d183a9
  • editorCursor.foreground#d183a9
  • editorGroupHeader.tabsBackground#090610
  • editorGroupHeader.tabsBorder#1a1028
  • editorGutter.addedBackground#3a6838
  • editorGutter.background#0d0810
  • editorGutter.deletedBackground#902040
  • editorGutter.modifiedBackground#8050a0
  • editorIndentGuide.activeBackground1#422c52
  • editorIndentGuide.background1#2e1e3c
  • editorLineNumber.activeForeground#7a4878
  • editorLineNumber.foreground#4a2858
  • editorWhitespace.foreground#1e1228
  • focusBorder#d183a9
  • gitDecoration.addedResourceForeground#68a860
  • gitDecoration.conflictingResourceForeground#d04868
  • gitDecoration.deletedResourceForeground#b03050
  • gitDecoration.ignoredResourceForeground#2e1e3a
  • gitDecoration.modifiedResourceForeground#a07828
  • gitDecoration.untrackedResourceForeground#80c878
  • input.background#100c18
  • input.border#2c1440
  • input.foreground#f3c8dd
  • input.placeholderForeground#241438
  • inputOption.activeBackground#2c1440
  • inputOption.activeBorder#d183a9
  • list.activeSelectionBackground#2c1440
  • list.activeSelectionForeground#f3c8dd
  • list.focusBackground#2c1440
  • list.highlightForeground#d183a9
  • list.hoverBackground#14101a
  • list.hoverForeground#f3c8dd
  • list.inactiveSelectionBackground#1a1028
  • list.inactiveSelectionForeground#71557a
  • notificationLink.foreground#d183a9
  • notifications.background#100c18
  • notifications.border#2c1440
  • notifications.foreground#f3c8dd
  • panel.background#0a060d
  • panel.border#1a1028
  • panelTitle.activeBorder#d183a9
  • panelTitle.activeForeground#c870a0
  • panelTitle.inactiveForeground#241438
  • peekView.border#d183a9
  • peekViewEditor.background#0b0810
  • peekViewEditor.matchHighlightBackground#4b1535
  • peekViewResult.background#0a060d
  • peekViewResult.fileForeground#c870a0
  • peekViewResult.lineForeground#71557a
  • peekViewResult.matchHighlightBackground#4b1535
  • peekViewResult.selectionBackground#2c1440
  • peekViewResult.selectionForeground#f3c8dd
  • peekViewTitle.background#100c18
  • peekViewTitleDescription.foreground#5a3860
  • peekViewTitleLabel.foreground#f3c8dd
  • progressBar.background#d183a9
  • scrollbarSlider.activeBackground#4a2860ee
  • scrollbarSlider.background#2c1440aa
  • scrollbarSlider.hoverBackground#3a1c50cc
  • selection.background#4b1535
  • sideBar.background#0a060d
  • sideBar.border#1a1028
  • sideBar.foreground#71557a
  • sideBarSectionHeader.background#100c18
  • sideBarSectionHeader.border#221630
  • sideBarSectionHeader.foreground#a85888
  • sideBarTitle.foreground#c870a0
  • statusBar.background#08050c
  • statusBar.border#1a1028
  • statusBar.debuggingBackground#501038
  • statusBar.foreground#c870a0
  • statusBar.noFolderBackground#1c0c28
  • statusBarItem.activeBackground#2c1440
  • statusBarItem.hoverBackground#1a1028
  • statusBarItem.remoteBackground#d183a9
  • statusBarItem.remoteForeground#0d0810
  • tab.activeBackground#0d0810
  • tab.activeBorder#d183a9
  • tab.activeForeground#f3c8dd
  • tab.border#1a1028
  • tab.hoverBackground#130e1c
  • tab.inactiveBackground#0a060d
  • tab.inactiveForeground#3a1c40
  • terminal.ansiBlack#1a1028
  • terminal.ansiBlue#4858a0
  • terminal.ansiBrightBlack#2e1e3a
  • terminal.ansiBrightBlue#6878c0
  • terminal.ansiBrightCyan#68a8c0
  • terminal.ansiBrightGreen#68a860
  • terminal.ansiBrightMagenta#c068a0
  • terminal.ansiBrightRed#d04868
  • terminal.ansiBrightWhite#f8e0ec
  • terminal.ansiBrightYellow#c89838
  • terminal.ansiCyan#4888a0
  • terminal.ansiGreen#508848
  • terminal.ansiMagenta#984880
  • terminal.ansiRed#b03050
  • terminal.ansiWhite#b098a8
  • terminal.ansiYellow#a07828
  • terminal.background#0a060d
  • terminal.foreground#f3c8dd
  • terminalCursor.foreground#d183a9
  • textLink.activeForeground#e8a0c0
  • textLink.foreground#d183a9
  • titleBar.activeBackground#08050c
  • titleBar.activeForeground#c870a0
  • titleBar.border#1a1028
  • titleBar.inactiveBackground#0a060d
  • titleBar.inactiveForeground#241438
  • widget.shadow#04020acc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5e3858italic
string, string.quoted#f0b8c8
constant.character.escape, string.regexp#f3c8dd
constant.numeric#e07898
constant.language#c04060bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#b83060bold
keyword.operator#6a4878
entity.name.function, meta.function-call entity.name.function, support.function#d183a9
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#9868b8bold
variable, variable.other#f3c8dd
variable.language#d183a9italic
variable.parameter#ddb8cc
variable.other.property, support.variable.property, meta.object-literal.key#a06888
entity.name.tag, meta.tag#b83060
entity.other.attribute-name#805870
entity.other.attribute-name.class, entity.other.attribute-name.id#f0b8c8
support.type.property-name#d183a9
support.constant.property-value#f0b8c8
keyword.control.import, keyword.control.from#b83060bold
punctuation.separator, punctuation.terminator, punctuation.accessor#3a1c40
punctuation.definition.parameters, punctuation.definition.block, meta.brace#5a3860
markup.heading, entity.name.section#d183a9bold
markup.bold#f0b8c8bold
markup.italic#a06888italic
markup.inline.raw, markup.fenced_code#d183a9
markup.underline.link#9868b8
invalid#e02050underline
invalid.deprecated#602038strikethrough