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#232034
  • activityBar.foreground#dbe7e7
  • activityBarBadge.background#43b6a2
  • activityBarBadge.foreground#F8FAFD
  • button.background#43b6a2
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#0f0d1d
  • dropdown.border#0c0b15
  • editor.background#232034
  • editor.findMatchBackground#3c475b
  • editor.findMatchHighlightBackground#263147
  • editor.lineHighlightBackground#302d43
  • editor.selectionBackground#385d7799
  • editor.wordHighlightBackground#385d7744
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#e23167
  • editorGroup.background#0c0b15
  • editorGroup.border#0c0b15
  • editorGroupHeader.tabsBackground#181627
  • editorHoverWidget.background#181627
  • editorHoverWidget.border#0c0b15
  • editorIndentGuide.background#393553
  • editorInfo.foreground#40b9c1
  • editorLineNumber.foreground#565174
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#181627
  • editorSuggestWidget.border#0c0b15
  • editorSuggestWidget.selectedBackground#232034
  • editorWarning.foreground#e28431
  • editorWhitespace.foreground#393553
  • editorWidget.background#181627
  • input.background#0f0d1d
  • list.activeSelectionBackground#232034
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2c293e
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#272439
  • list.inactiveSelectionBackground#232034
  • list.inactiveSelectionForeground#d7dae0
  • notification.background#181627
  • scrollbarSlider.activeBackground#79749180
  • scrollbarSlider.background#514e6680
  • scrollbarSlider.hoverBackground#5e5a7580
  • sideBar.background#181627
  • sideBarSectionHeader.background#232034
  • statusBar.background#181627
  • statusBar.debuggingBackground#181627
  • statusBar.foreground#a9a8ad
  • statusBar.noFolderBackground#181627
  • statusBarItem.hoverBackground#232034
  • tab.activeBackground#232034
  • tab.border#0c0b15
  • tab.inactiveBackground#181627
  • titleBar.activeBackground#181627
  • titleBar.activeForeground#a9a8ad
  • titleBar.inactiveBackground#232034
  • titleBar.inactiveForeground#717079

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#AEB2B7
comment#5C6370italic
html.doctype#5C6370italic
string#A1D579
string.embedded.begin, string.embedded.end#D3508A
string.embedded#73BEAE
constant.numeric#C27756
constant.language#C27756
constant.character, constant.other#C27756
variable.language#C678DD
variable.readwrite, variable.block, variable.support#D3508A
variable.readwrite.var-single-variable.js#DFC184
variable.readwrite.js#ABB2BF
keyword, keyword.operator.logical, keyword.operator.constructor, keyword.operator.new#B871DE
keyword.operator#61afef
storage#B871DE
storage.type.function#B871DE
entity.name.class, entity.name.module, entity.name.type#DFC184
entity.other.inherited-class#98c379
entity.name.tag#D3508A
entity.other.attribute-name#d19a66
entity.name.function#61AFEF
variable.parameter#D3508Aitalic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#73BEAE
support.function#73BEAE
support.constant#DFC184
support.class#DFC184
support.type#D3508A
support.dictionary.json#D3508A
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#DFC184
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#73BEAE
variable.css, variable.scss, variable.less, variable.sass#AFB2B6
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#98c379
unit.css, unit.scss, unit.less, unit.sass#C27756
function.css, function.scss, function.less, function.sass#73BEAE
variable.other.property, variable.other.object, variable.other.block#D3508A
jade.import.variable, pug.import.variable#D3508A
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#D3508A
string.detected-link#B871DE
meta.diff, meta.diff.header#5E6063
markup.deleted#B871DE
markup.inserted#DFC184
markup.changed#A1D579
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#98c379

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Violet Midnight - Coding Theme