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#1D1826
  • activityBar.foreground#D8D0E0
  • activityBar.inactiveForeground#8F84A3
  • activityBarBadge.background#E07BAE
  • activityBarBadge.foreground#14101A
  • badge.background#E07BAE
  • badge.foreground#14101A
  • button.background#E07BAE
  • button.foreground#14101A
  • button.hoverBackground#DF88B6
  • diffEditor.insertedTextBackground#8FD9A024
  • diffEditor.removedTextBackground#E0849424
  • editor.background#14101A
  • editor.findMatchBackground#E0B07259
  • editor.findMatchHighlightBackground#E0B07233
  • editor.foreground#D8D0E0
  • editor.lineHighlightBackground#1D182699
  • editor.selectionBackground#3A2F4E
  • editor.selectionHighlightBackground#3A2F4E80
  • editor.wordHighlightBackground#3A2F4E73
  • editorBracketMatch.background#6FCEDE33
  • editorBracketMatch.border#6FCEDE
  • editorCursor.foreground#E07BAE
  • editorError.foreground#E08494
  • editorGroupHeader.tabsBackground#1D1826
  • editorGroupHeader.tabsBorder#2E2740
  • editorGutter.addedBackground#8FD9A0
  • editorGutter.deletedBackground#E08494
  • editorGutter.modifiedBackground#6FCEDE
  • editorHoverWidget.background#262034
  • editorHoverWidget.border#2E2740
  • editorIndentGuide.activeBackground1#8F84A3
  • editorIndentGuide.background1#2E2740
  • editorInfo.foreground#6FCEDE
  • editorLineNumber.activeForeground#D8D0E0
  • editorLineNumber.foreground#ADA2C0
  • editorSuggestWidget.background#262034
  • editorSuggestWidget.selectedBackground#312D3A
  • editorWarning.foreground#E0B072
  • editorWhitespace.foreground#2E2740
  • editorWidget.background#262034
  • editorWidget.border#2E2740
  • focusBorder#E07BAE
  • gitDecoration.addedResourceForeground#8FD9A0
  • gitDecoration.deletedResourceForeground#E08494
  • gitDecoration.ignoredResourceForeground#8F84A3
  • gitDecoration.modifiedResourceForeground#6FCEDE
  • gitDecoration.untrackedResourceForeground#8FD9A0
  • input.background#262034
  • input.border#2E2740
  • input.foreground#D8D0E0
  • list.activeSelectionBackground#312D3A
  • list.activeSelectionForeground#F0EAF7
  • list.highlightForeground#E07BAE
  • list.hoverBackground#282431
  • list.inactiveSelectionBackground#282431
  • panel.background#1D1826
  • panel.border#2E2740
  • panelTitle.activeForeground#D8D0E0
  • panelTitle.inactiveForeground#8F84A3
  • peekView.border#E07BAE
  • progressBar.background#E07BAE
  • scrollbarSlider.activeBackground#8F84A38C
  • scrollbarSlider.background#8F84A340
  • scrollbarSlider.hoverBackground#8F84A366
  • selection.background#3A2F4ECC
  • sideBar.background#1D1826
  • sideBar.border#2E2740
  • sideBar.foreground#ADA2C0
  • sideBarSectionHeader.background#1D1826
  • sideBarSectionHeader.foreground#D8D0E0
  • sideBarTitle.foreground#D8D0E0
  • statusBar.background#1D1826
  • statusBar.border#2E2740
  • statusBar.debuggingBackground#E07BAE
  • statusBar.debuggingForeground#14101A
  • statusBar.foreground#ADA2C0
  • statusBar.noFolderBackground#1D1826
  • tab.activeBackground#14101A
  • tab.activeBorderTop#E07BAE
  • tab.activeForeground#F0EAF7
  • tab.border#2E2740
  • tab.inactiveBackground#1D1826
  • tab.inactiveForeground#8F84A3
  • terminal.ansiBlack#1D1826
  • terminal.ansiBlue#8AAEE0
  • terminal.ansiBrightBlack#8F84A3
  • terminal.ansiBrightBlue#A7C2E8
  • terminal.ansiBrightCyan#93DAE6
  • terminal.ansiBrightGreen#ABE3B8
  • terminal.ansiBrightMagenta#E89CC2
  • terminal.ansiBrightRed#E8A3AF
  • terminal.ansiBrightWhite#F0EAF7
  • terminal.ansiBrightYellow#E8C495
  • terminal.ansiCyan#6FCEDE
  • terminal.ansiGreen#8FD9A0
  • terminal.ansiMagenta#E07BAE
  • terminal.ansiRed#E08494
  • terminal.ansiWhite#D8D0E0
  • terminal.ansiYellow#E0B072
  • terminal.background#14101A
  • terminal.foreground#D8D0E0
  • textLink.activeForeground#F0EAF7
  • textLink.foreground#6FCEDE
  • titleBar.activeBackground#1D1826
  • titleBar.activeForeground#D8D0E0
  • titleBar.border#2E2740
  • titleBar.inactiveBackground#1D1826
  • titleBar.inactiveForeground#8F84A3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8F84A3italic
string, string.quoted, punctuation.definition.string#8FD9A0
string.regexp, constant.character.escape#6FCEDE
constant.numeric, constant.language, constant.language.boolean#E0B072
keyword, keyword.control, storage, storage.type, storage.modifier#E07BAE
keyword.operator#D69AC0
entity.name.function, support.function, meta.function-call.generic#6FCEDE
entity.name.type, entity.name.class, support.class, support.type#C9A0E0
variable, meta.definition.variable.name, support.variable#D8D0E0
variable.parameter, meta.parameter#ADA2C0
variable.other.property, meta.object-literal.key#6FCEDE
entity.name.tag, punctuation.definition.tag#E08494
entity.other.attribute-name#C9A0E0
punctuation, meta.brace#ADA2C0
invalid, invalid.illegal#E08494underline
markup.heading, entity.name.section#E07BAEbold
markup.bold#D8D0E0bold
markup.italic#D8D0E0italic
markup.inline.raw, markup.fenced_code#8FD9A0
markup.inserted#8FD9A0
markup.deleted#E08494
markup.changed#6FCEDE
markup.underline.link#6FCEDEunderline