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.activeBorder#6D57FFBB
  • activityBar.background#0a0a0a
  • activityBar.border#0a0a0a
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#000000
  • badge.background#88c0d0
  • button.background#2b313c
  • button.secondaryBackground#1e0c31
  • contrastBorder#232530
  • debugToolBar.background#101316
  • diffEditor.border#232530
  • diffEditor.diagonalFill#22222275
  • diffEditor.insertedTextBackground#0c2c2071
  • diffEditor.removedTextBackground#36050c3f
  • dropdown.background#101316
  • dropdown.border#232530
  • dropdown.listBackground#101316
  • editor.background#0f0f0f
  • editor.findMatchBackground#61AFEF4F
  • editor.findMatchHighlightBackground#000000
  • editor.findMatchHighlightBorder#61AFEF9F
  • editor.foreground#AAB1C0
  • editor.lineHighlightBackground#024f5940
  • editor.lineHighlightBorder#000000
  • editor.selectionBackground#add6ff26
  • editor.wordHighlightBackground#61AFEF4F
  • editor.wordHighlightBorder#61AFEF9F
  • editor.wordHighlightStrongBackground#61AFEF4F
  • editor.wordHighlightStrongBorder#61AFEF9F
  • editorCursor.background#000000
  • editorCursor.foreground#008097
  • editorGroup.border#0a0a0a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.background#0a0a0a
  • editorIndentGuide.activeBackground#6D57FFBB
  • editorLineNumber.foreground#495162
  • editorLink.activeForeground#008097
  • editorWidget.background#101316
  • focusBorder#008097
  • foreground#AAB1C0
  • gitDecoration.conflictingResourceForeground#ff5e5f
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#afae5e
  • gitDecoration.untrackedResourceForeground#00875e
  • input.background#101316
  • input.border#232530
  • inputOption.activeBackground#101316
  • list.activeSelectionBackground#4c5ead58
  • list.dropBackground#67769640
  • list.focusBackground#4c5ead58
  • list.highlightForeground#80CBC4
  • list.hoverBackground#1b2432
  • list.inactiveSelectionBackground#101316
  • list.inactiveSelectionForeground#80CBC4
  • panel.background#0a0a0a
  • panelTitle.activeBorder#6D57FFBB
  • selection.background#88c0d099
  • sideBar.background#101316
  • sideBar.border#232530
  • sideBar.dropBackground#67769640
  • sideBarSectionHeader.background#0a0a0a
  • statusBar.background#0a0a0a
  • statusBar.border#364958
  • statusBar.debuggingBackground#101316
  • statusBar.debuggingForeground#009688
  • statusBar.noFolderBackground#0a0a0a
  • statusBar.noFolderBorder#232530
  • statusBarItem.hoverBackground#67769640
  • statusBarItem.remoteBackground#88c0d0
  • tab.activeBackground#0a0a0a
  • tab.activeBorder#6D57FFBB
  • tab.inactiveBackground#1f2326
  • textBlockQuote.background#242938
  • textBlockQuote.border#6D57FFBB
  • textCodeBlock.background#242938
  • textLink.activeForeground#008097
  • textLink.foreground#80CBC4
  • tree.indentGuidesStroke#6D57FFBB
  • widget.shadow#008097

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#898e9a—
string.quoted.docstring.multi#9AC4D7—
string#BDD6DB—
constant.numeric#15b8ae—
meta.member.access#AAB1C0—
support.function.builtin#AA8888—
constant.language#594B87—
constant.character, constant.other#52708b—
variable#019d76
variable.language.special#C0B7F9
keyword#017c9d—
storage#D4D4D4
storage.type#6AB0A3
entity.name.class#019d76underline
entity.other.inherited-class#019d76
entity.name.function—
source.python meta.function-call, source.python meta.function-call.generic—
variable.parameter#898e9a
entity.name.tag#017c9d
entity.other.attribute-name#019d76
support.function—
support.constant#019d76
support.type, support.class#019d76
support.other.variable#ffffff—
invalid#cf433e—
invalid.deprecated#cf433e—
meta.structure.dictionary.json string.quoted.double.json#15b8ae—
meta.diff, meta.diff.header#60778c—
markup.deleted#e61f44—
markup.inserted#A6E22E—
markup.changed#f7b83d—
constant.numeric.line-number.find-in-files - match#8FBE00A0—
entity.name.filename.find-in-files#E6DB74—
keyword.other#8a9daf—
#C0B7F9—
meta.property-value, support.constant.property-value, constant.other.color#15b8ae—
meta.structure.dictionary.json string.quoted.double.json#019d76—
meta.structure.dictionary.value.json string.quoted.double.json#15b8ae—
meta.property-name support.type.property-name—italic
meta.property-value punctuation.separator.key-value#ffffff—
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#017c9d—
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#017c9d—
variable.other#ffffff—
variable.parameter.function.coffee#15b8ae
entity.name.section.markdown#019d76—
punctuation.definition.heading.markdown#017c9d—
markup.raw.inline.markdown#15b8ae—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#017c9d—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#017c9d—
punctuation.definition.metadata.markdown#017c9d—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#017c9d
markup.bold.markdown, markup.italic.markdown#017c9d—
markup.italic.markdown—italic
markup.bold.markdown—bold
markup.raw.block.markdown#664e4d—
markup.deleted.git_gutter#e61f44—
markup.inserted.git_gutter#a7da1e—
markup.changed.git_gutter#f7b83d—
meta.template.expression#ffffff—