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.background#202020
  • activityBar.foreground#ffffff
  • activityBarBadge.background#775aff
  • activityBarBadge.foreground#ffffff
  • button.background#775aff
  • button.foreground#ffffff
  • button.hoverBackground#5c37fd
  • editor.background#000000
  • editor.findMatchBackground#850585
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#300C3A
  • editor.lineHighlightBackground#101010
  • editor.rangeHighlightBackground#ffffff0b
  • editor.selectionBackground#581254
  • editor.selectionHighlightBackground#701C2A70
  • editor.wordHighlightBackground#775aff40
  • editor.wordHighlightStrongBackground#490000b8
  • editorCursor.foreground#dfdfdf
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#202020
  • editorWhitespace.foreground#101010
  • foreground#ffffff
  • input.background#000000
  • input.foreground#cccccc
  • sideBar.background#101010
  • sideBar.dropBackground#ffffff1f
  • sideBarSectionHeader.background#202020
  • statusBar.background#392b79
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#388a34
  • statusBarItem.prominentHoverBackground#369432
  • tab.activeBackground#000000
  • tab.activeForeground#ffffff
  • tab.border#181818
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedInactiveForeground#ffffff40
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#ffffff80
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#ffffff50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source#ffffff
git_changes_change#A29F46
git_changes_add#1f9a12
git_changes_del-#A72822
comment, punctuation.definition.comment#ff0000
constant.numeric#a6e22e
constant.language#775aff
constant.character, constant.other#9a79d7
variable
keyword, storage.type, storage.modifier#775aff
keyword.operator.logical.python#775aff
keyword.operator, punctuation#625b88
string.quoted, punctuation.definition.string, storage.type.string#d3c970
string.quoted.docstring#7c9f57
meta.fstring.python storage.type.string.python, meta.fstring.python punctuation.definition string.quoted.single.python, meta.fstring.python punctuation.definition string.quoted.multi.python, , meta.fstring.python punctuation.definition string.quoted.raw.single.python, meta.fstring.python punctuation.definition string.quoted.raw.multi.python#FFED44
string.quoted.single.python constant.character.format.placeholder.other.python#9C9130
comment.line.note, string.quoted.docstring.note#b14a58
storage#e8364f
entity.name.function.decorator#8abeb7
entity.name.class#A6E22E
entity.other.inherited-class#c5c8f6
entity.name.function, entity.name.type.class#ffffffbold
variable.parameter#c5c8f6
entity.name.tag.namespace#00cbcb
entity.name.tag, keyword.doctype.xml#775aff
entity.other.attribute-name#D77C23
support.function#66D9EF
support.constant#66D9EF
support.type#66D9EF
support.class, support.other, support.variable#66D9EF
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#e8364f
markup.inserted#A6E22E
markup.changed#E6DB74
variable.language.special, variable.parameter.function.language.special#b0af95
comment.typehint#ff0080
comment.typehint.ignore#ff00a0
comment.typehint.type#ff00f0
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#775affbold
markup.italic#66D9EFitalic
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22E
theme-chromodynamics-delek by ambv - VS Code Theme