Skip to main content
Coding Theme

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#FF82B2
  • activityBar.background#231D30
  • activityBar.foreground#B7AFC9
  • activityBarBadge.background#FF82B2
  • button.background#FF82B2
  • button.foreground#16131D
  • descriptionForeground#B7AFC9
  • dropdown.background#1C1826
  • dropdown.foreground#F5EEF8
  • editor.background#16131D
  • editor.foreground#F5EEF8
  • editor.lineHighlightBackground#2C2540
  • editor.selectionBackground#FF82B240
  • editor.selectionHighlightBackground#FF82B220
  • editorBracketMatch.background#FF82B240
  • editorBracketMatch.border#FF82B2
  • editorCursor.foreground#FF82B2
  • editorGroup.border#322A47
  • editorLineNumber.foreground#7C7696
  • errorForeground#FF9AC6
  • focusBorder#FF82B2
  • foreground#F5EEF8
  • input.background#16131D
  • input.foreground#F5EEF8
  • list.activeSelectionBackground#FF82B240
  • list.activeSelectionForeground#F5EEF8
  • list.hoverBackground#FF82B220
  • list.inactiveSelectionBackground#2C2540
  • list.inactiveSelectionForeground#F5EEF8
  • sideBar.background#1C1826
  • sideBar.foreground#B7AFC9
  • sideBarSectionHeader.background#1C1826
  • sideBarSectionHeader.foreground#FFB7D5
  • statusBar.background#1C1826
  • statusBar.foreground#B7AFC9
  • statusBarItem.prominentBackground#FFB7D5
  • tab.activeBackground#16131D
  • tab.activeBorderTop#FF82B2
  • tab.activeForeground#FFB7D5
  • tab.border#322A47
  • tab.inactiveBackground#1C1826
  • tab.inactiveForeground#7C7696
  • terminal.ansiBlack#16131D
  • terminal.ansiBlue#D4B8FF
  • terminal.ansiBrightBlack#322A47
  • terminal.ansiBrightBlue#D4B8FF
  • terminal.ansiBrightCyan#A8E6CF
  • terminal.ansiBrightGreen#A8E6CF
  • terminal.ansiBrightMagenta#FFB7D5
  • terminal.ansiBrightRed#FF82B2
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD48A
  • terminal.ansiCyan#A8E6CF
  • terminal.ansiGreen#A8E6CF
  • terminal.ansiMagenta#FF82B2
  • terminal.ansiRed#FF9AC6
  • terminal.ansiWhite#F5EEF8
  • terminal.ansiYellow#FFD48A
  • terminal.background#16131D
  • terminal.foreground#F5EEF8
  • titleBar.activeBackground#1C1826
  • titleBar.activeForeground#F5EEF8
  • tree.indentGuidesStroke#7C7696

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#FF82B2
storage.type#FF82B2
entity.name.function, support.function#FFB7D5
variable, identifier#F8D8E8
entity.name.type, support.type, storage.type.class#D4B8FF
string, constant.other.symbol#A8E6CF
constant.numeric#FFD48A
constant.language.boolean#FF9AC6
constant.language#D4B8FF
keyword.operator#F5EEF8
comment#7C7696italic
entity.name.tag#FF82B2
entity.other.attribute-name#FFB7D5
string.quoted.double.html, string.quoted.single.html#A8E6CF
punctuation.definition.tag#FFB7D5
meta.structure.dictionary.json key#FF82B2
support.constant.property-value.json#A8E6CF
markup.heading#FFB7D5bold
markup.underline.link#FF82B2
markup.inline.raw#FFD48A
markup.bold#FFB7D5bold
markup.italic#FFB7D5italic
f0510 by yumsha - VS Code Theme