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.activeBackground#660029
  • activityBar.activeBorder#ffb3cc
  • activityBar.activeFocusBorder#ff66b2
  • activityBar.background#800033
  • activityBar.border#b30047
  • activityBar.dropBorder#ffb3cc
  • activityBar.foreground#ffccd6
  • activityBar.inactiveForeground#ffcce6
  • activityBarBadge.background#ff6699
  • activityBarBadge.foreground#ffffff
  • button.background#ff6699
  • button.foreground#ffffff
  • button.hoverBackground#ff85b3
  • dropdown.background#2c001e
  • dropdown.border#660029
  • dropdown.foreground#f4e1e9
  • editor.background#2c001e
  • editor.foreground#f4e1e9
  • editor.lineHighlightBackground#b3004d33
  • editor.selectionBackground#ff99cc44
  • editorCursor.foreground#ff66b2
  • editorGutter.background#4d002e
  • editorIndentGuide.activeBackground#ff99cc
  • editorIndentGuide.background#661a33
  • scrollbarSlider.activeBackground#b30047cc
  • scrollbarSlider.background#b3004766
  • scrollbarSlider.hoverBackground#b3004799
  • sideBar.background#40001a
  • sideBar.border#b30047
  • sideBar.foreground#e6ccd6
  • sideBarSectionHeader.background#660029
  • sideBarSectionHeader.foreground#f4e1e9
  • sideBarTitle.foreground#ff6699
  • statusBar.background#800033
  • statusBar.border#b30047
  • statusBar.debuggingBackground#b3004d
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f4e1e9
  • statusBar.noFolderBackground#590026
  • tab.activeBackground#800033
  • tab.activeForeground#f4e1e9
  • tab.border#b30047
  • tab.hoverBackground#b3004d
  • tab.inactiveBackground#590026
  • tab.inactiveForeground#e6b3c6
  • terminal.ansiBlack#2c001e
  • terminal.ansiBlue#cc66ff
  • terminal.ansiCyan#ff66ff
  • terminal.ansiGreen#ff99cc
  • terminal.ansiMagenta#ff66b2
  • terminal.ansiRed#ff6699
  • terminal.ansiWhite#f4e1e9
  • terminal.ansiYellow#ffccff
  • terminal.foreground#f4e1e9
  • titleBar.activeBackground#800033
  • titleBar.activeForeground#f4e1e9
  • titleBar.border#b30047
  • titleBar.inactiveBackground#590026
  • titleBar.inactiveForeground#e6b3c6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#000080
comment#7ca668
constant.language#569cd6
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#b5cea8
constant.regexp#b46695
entity.name.tag#569cd6
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#d7ba7d
invalid#f44747
markup.underlineunderline
markup.boldbold
markup.heading#6796e6
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
meta.selector#d7ba7d
punctuation.definition.tag#808080
meta.preprocessor#569cd6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
storage#569cd6
storage.type#569cd6
storage.modifier#569cd6
string#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end#ce9178
support.type#569cd6
support.function#dcdcaa
support.constant#569cd6
support.class#4ec9b0
support.variable#569cd6
variable#9cdcfe
variable.parameter#9cdcfe
variable.language#569cd6
variable.function#dcdcaa
Misty Dust by Sayam - VS Code Theme