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#0e090c
  • activityBar.border#201420
  • activityBar.foreground#c07890
  • activityBar.inactiveForeground#2e1828
  • activityBarBadge.background#d87898
  • activityBarBadge.foreground#160f14
  • badge.background#8a3860
  • badge.foreground#f0d8e0
  • breadcrumb.activeSelectionForeground#e8d0d8
  • breadcrumb.focusForeground#c07890
  • breadcrumb.foreground#4e2c40
  • breadcrumbPicker.background#180f18
  • button.background#8a3860
  • button.foreground#f0d8e0
  • button.hoverBackground#a84878
  • button.secondaryBackground#301c2c
  • button.secondaryForeground#c07890
  • descriptionForeground#6a3858
  • dropdown.background#180f18
  • dropdown.border#301c2c
  • dropdown.foreground#e8d0d8
  • editor.background#160f14
  • editor.findMatchBackground#7a3060
  • editor.findMatchHighlightBackground#4c1c40
  • editor.foreground#e8d0d8
  • editor.inactiveSelectionBackground#2c1828
  • editor.lineHighlightBackground#1e141a
  • editor.rangeHighlightBackground#1e1220
  • editor.selectionBackground#4a2840
  • editor.selectionHighlightBackground#381e30
  • editor.wordHighlightBackground#3c2238
  • editor.wordHighlightStrongBackground#502c48
  • editorBracketMatch.background#4a2840
  • editorBracketMatch.border#d87898
  • editorCursor.foreground#d87898
  • editorGroupHeader.tabsBackground#100a0e
  • editorGroupHeader.tabsBorder#201420
  • editorGutter.addedBackground#4a6848
  • editorGutter.background#160f14
  • editorGutter.deletedBackground#7a2848
  • editorGutter.modifiedBackground#9a6080
  • editorIndentGuide.activeBackground1#4a2e52
  • editorIndentGuide.background1#342040
  • editorLineNumber.activeForeground#8a5878
  • editorLineNumber.foreground#5a3050
  • editorWhitespace.foreground#281820
  • focusBorder#d87898
  • gitDecoration.addedResourceForeground#6a9870
  • gitDecoration.conflictingResourceForeground#c078c0
  • gitDecoration.deletedResourceForeground#b04068
  • gitDecoration.ignoredResourceForeground#3c2038
  • gitDecoration.modifiedResourceForeground#b07890
  • gitDecoration.untrackedResourceForeground#80a888
  • input.background#180f18
  • input.border#301c2c
  • input.foreground#e8d0d8
  • input.placeholderForeground#2e1828
  • inputOption.activeBackground#301c2c
  • inputOption.activeBorder#d87898
  • list.activeSelectionBackground#301c2c
  • list.activeSelectionForeground#e8d0d8
  • list.focusBackground#301c2c
  • list.highlightForeground#d87898
  • list.hoverBackground#1e141a
  • list.hoverForeground#e8d0d8
  • list.inactiveSelectionBackground#201420
  • list.inactiveSelectionForeground#8a5878
  • notificationLink.foreground#d87898
  • notifications.background#180f18
  • notifications.border#301c2c
  • notifications.foreground#e8d0d8
  • panel.background#120c10
  • panel.border#201420
  • panelTitle.activeBorder#d87898
  • panelTitle.activeForeground#c07890
  • panelTitle.inactiveForeground#2e1828
  • peekView.border#d87898
  • peekViewEditor.background#130d12
  • peekViewEditor.matchHighlightBackground#4a2840
  • peekViewResult.background#120c10
  • peekViewResult.fileForeground#c07890
  • peekViewResult.lineForeground#8a5878
  • peekViewResult.matchHighlightBackground#4a2840
  • peekViewResult.selectionBackground#301c2c
  • peekViewResult.selectionForeground#e8d0d8
  • peekViewTitle.background#180f18
  • peekViewTitleDescription.foreground#6a3858
  • peekViewTitleLabel.foreground#e8d0d8
  • progressBar.background#d87898
  • scrollbarSlider.activeBackground#4c2c44ee
  • scrollbarSlider.background#301c2caa
  • scrollbarSlider.hoverBackground#3e2438cc
  • selection.background#4a2840
  • sideBar.background#120c10
  • sideBar.border#201420
  • sideBar.foreground#8a5878
  • sideBarSectionHeader.background#180f18
  • sideBarSectionHeader.border#281a28
  • sideBarSectionHeader.foreground#a86880
  • sideBarTitle.foreground#c07890
  • statusBar.background#0e090c
  • statusBar.border#201420
  • statusBar.debuggingBackground#501840
  • statusBar.foreground#c07890
  • statusBar.noFolderBackground#200f20
  • statusBarItem.activeBackground#301c2c
  • statusBarItem.hoverBackground#201420
  • statusBarItem.remoteBackground#d87898
  • statusBarItem.remoteForeground#160f14
  • tab.activeBackground#160f14
  • tab.activeBorder#d87898
  • tab.activeForeground#e8d0d8
  • tab.border#201420
  • tab.hoverBackground#1a1218
  • tab.inactiveBackground#120c10
  • tab.inactiveForeground#4e2c40
  • terminal.ansiBlack#201420
  • terminal.ansiBlue#6858a0
  • terminal.ansiBrightBlack#3c2038
  • terminal.ansiBrightBlue#8878c0
  • terminal.ansiBrightCyan#88a0c0
  • terminal.ansiBrightGreen#80a888
  • terminal.ansiBrightMagenta#c078c0
  • terminal.ansiBrightRed#d86088
  • terminal.ansiBrightWhite#f0e0e8
  • terminal.ansiBrightYellow#d8b0a0
  • terminal.ansiCyan#6880a0
  • terminal.ansiGreen#608870
  • terminal.ansiMagenta#9858a0
  • terminal.ansiRed#b04068
  • terminal.ansiWhite#c0a0b0
  • terminal.ansiYellow#c09080
  • terminal.background#120c10
  • terminal.foreground#e8d0d8
  • terminalCursor.foreground#d87898
  • textLink.activeForeground#e898b0
  • textLink.foreground#d87898
  • titleBar.activeBackground#0e090c
  • titleBar.activeForeground#c07890
  • titleBar.border#201420
  • titleBar.inactiveBackground#120c10
  • titleBar.inactiveForeground#2e1828
  • widget.shadow#080408cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a3858italic
string, string.quoted#c89080
constant.character.escape, string.regexp#d87898
constant.numeric#b08090
constant.language#c07890bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#e07898bold
keyword.operator#704858
entity.name.function, meta.function-call entity.name.function, support.function#c888a8
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#b07898bold
variable, variable.other#e8d0d8
variable.language#d87898italic
variable.parameter#d8b8c8
variable.other.property, support.variable.property, meta.object-literal.key#b890a0
entity.name.tag, meta.tag#e07898
entity.other.attribute-name#987080
entity.other.attribute-name.class, entity.other.attribute-name.id#c89080
support.type.property-name#c888a8
support.constant.property-value#c89080
keyword.control.import, keyword.control.from#e07898bold
punctuation.separator, punctuation.terminator, punctuation.accessor#4e2c40
punctuation.definition.parameters, punctuation.definition.block, meta.brace#6a3858
markup.heading, entity.name.section#d87898bold
markup.bold#c89080bold
markup.italic#b890a0italic
markup.inline.raw, markup.fenced_code#c888a8
markup.underline.link#d87898
invalid#e03060underline
invalid.deprecated#603050strikethrough