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.activeBackground#272E4C
  • activityBar.activeForeground#B3C3D5
  • activityBar.background#0D1228
  • activityBar.foreground#576C7B
  • breadcrumb.foreground#576C7B
  • button.background#57B980
  • button.foreground#F7FCF9
  • button.hoverBackground#57B980
  • debugToolBar.background#272E4C
  • dropdown.background#272E4C
  • dropdown.border#272E4C
  • dropdown.foreground#576C7B
  • dropdown.listBackground#272E4C
  • editor.background#1A2035
  • editor.foreground#8795A3
  • editor.lineHighlightBackground#0D1228
  • editor.selectionBackground#0D1228
  • editorCursor.foreground#5E3ED4
  • editorGroupHeader.tabsBackground#1A2035
  • editorIndentGuide.background#181C31
  • editorLineNumber.activeForeground#434758
  • editorLineNumber.background#
  • editorLineNumber.foreground#5D606E
  • editorWhitespace.foreground#272E4C
  • editorWidget.background#272E4C
  • editorWidget.border#272E4C
  • editorWidget.foreground#BBBDC6
  • extensionButton.background#fff
  • focusBorder#272E4C
  • icon.foreground#576C7B
  • input.background#0D1228
  • input.border#1A2035
  • input.foreground#E6E7E9
  • input.placeholderForeground#616570
  • inputOption.activeBackground#272E4C
  • inputOption.activeBorder#272E4C
  • list.activeSelectionBackground#272E4C
  • list.activeSelectionForeground#FFFFFF
  • list.focusAndSelectionOutline#272E4C
  • list.focusBackground#272E4C
  • list.focusForeground#BDBFC8
  • list.focusOutline#272E4C
  • list.highlightForeground#
  • list.hoverBackground#272E4C
  • list.inactiveSelectionBackground#272E4C
  • notification.background#272E4C
  • panel.background#1A2035
  • panel.border#272E4C
  • peekView.border#272E4C
  • peekViewEditor.background#1A2035
  • peekViewEditor.matchHighlightBackground#57B980
  • peekViewResult.background#272E4C
  • peekViewTitle.background#1A2035
  • scrollbarSlider.activeBackground#576C7B
  • scrollbarSlider.background#272E4C
  • scrollbarSlider.hoverBackground#272E4C
  • settings.dropdownBorder#272E4C
  • sideBar.background#1A2035
  • sideBar.border#272E4C
  • sideBar.dropBackground#272E4C
  • sideBar.foreground#576C7B
  • sideBarSectionHeader.background#0D1228
  • sideBarSectionHeader.foreground#F6F6F7
  • sideBarTitle.activeForeground#
  • statusBar.background#1A2035
  • statusBar.border#272E4C
  • statusBar.foreground#576C7B
  • tab.activeBackground#1A2035
  • tab.activeBorder#272E4C
  • tab.activeForeground#999BA3
  • tab.border#272E4C
  • tab.inactiveBackground#0D1228
  • tab.inactiveForeground#999BA3
  • terminal.ansiBlack#1E1E30
  • terminal.ansiBlue#6F9ED9
  • terminal.ansiBrightBlack#696980
  • terminal.ansiBrightBlue#81A2BE
  • terminal.ansiBrightCyan#8ABEB7
  • terminal.ansiBrightGreen#9EC49E
  • terminal.ansiBrightMagenta#B294BB
  • terminal.ansiBrightRed#E87474
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0C674
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#69BB7B
  • terminal.ansiMagenta#C586C0
  • terminal.ansiRed#D74E4E
  • terminal.ansiWhite#C7C7D8
  • terminal.ansiYellow#E7BE67
  • terminal.background#1A2035
  • terminal.border#2D3846
  • terminal.foreground#576C7B
  • terminalCursor.foreground#5E3ED4
  • textLink.activeForeground#57B980
  • textLink.foreground#C8CACE
  • titleBar.activeBackground#070B1E
  • titleBar.activeForeground#576C7B
  • titleBar.inactiveBackground#070B1E
  • titleBar.inactiveForeground#576C7B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#96CE83—
variable, string constant.other.placeholder#C7C7D8—
constant, support.constant#B573C9—
string#B573C9—
comment#576C7B—
entity.name.function#C7C7D8—
entity.name.type, support.type, support.class#C586C0—
keyword.operator#C7C7D8—
entity.name.tag.tsx#E7BE67—
entity.other.attribute-name.tsx#60B3D4default
source.css, source.scss#C7C7D8
support.constant.property-value.css#64BCDF—
keyword.control.css#56B6C2bold
keyword.other.unit.css#E7BE67—
support.type.property-name.css#69BB7B—
support.type.property-value.css, support.constant.color#DC8CC3—
entity.name.tag.css#81A2BEbold
support.type.vendor.property-name.css#5AC1C7—
entity.other.attribute-name.class.css#B271C6—
entity.name.tag.css, entity.name.tag.scss#81A2BEitalic
entity.name.tag.css#81A2BEbold
entity.other.attribute-name.css - entity.other.attribute-name.css support#C586C0—
entity.other.attribute-name.scss - entity.other.attribute-name.scss support#C586C0—
entity.name.tag#81A2BE—
entity.other.attribute-name#C586C0italic
string.quoted.double.json#E2E2E5—
constant.numeric.json#69BB7B—
keyword.json#56B6C2—
support.type.property-name.json#95CC82—
meta.structure.dictionary.json meta.structure.dictionary.value.json#C7C7D8—
punctuation.definition.string.json#8484A2—
comment.block.json#696980italic
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#95CC82—
punctuation.separator.dictionary.key-value.json#95CC82—
punctuation.separator.dictionary.pair.json——
markup.heading#81A2BEbold
markup.bold—bold
markup.italic—italic
markup.code#C7C7D8bold
markup.quote#C586C0—
markup.list#69BB7B—
markup.link#56B6C2underline
meta.separator#8484A2—
meta.paragraph#C7C7D8—
meta.image#DC8CC3—
meta.link#56B6C2—
punctuation.definition.string.end.tsx, punctuation.definition.string.begin.tsx#96CE83—
string.quoted.single.tsx#C586C0—
keyword.control.default.tsx#60B3D4—
Mystic MoonShadow Theme by TechArtem - VS Code Theme