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#121212
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#f97e72
  • activityBarBadge.foreground#2a2139
  • badge.background#2a2139
  • badge.foreground#ffffff
  • breadcrumbPicker.background#121212
  • button.background#3d3c3a
  • diffEditor.insertedTextBackground#0beb9935
  • diffEditor.removedTextBackground#fe4450
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#171520
  • editor.findMatchBackground#0059ab
  • editor.foreground#fff
  • editorError.foreground#fe4450
  • editorGroup.dropBackground#4954954a
  • editorGroupHeader.tabsBackground#20252b
  • editorGutter.addedBackground#1ed760
  • editorGutter.deletedBackground#fa2e46aa
  • editorGutter.modifiedBackground#ff557f
  • editorLineNumber.foreground#fff
  • editorSuggestWidget.highlightForeground#faae3e
  • editorSuggestWidget.selectedBackground#ffffff36
  • editorWidget.background#121212
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#ED4337
  • focusBorder#323232
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#03c04a
  • gitDecoration.deletedResourceForeground#fe4450
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#e7e53b
  • gitDecoration.untrackedResourceForeground#B2D3C2
  • input.background#1e1e1e
  • inputValidation.errorBackground#fe445080
  • inputValidation.errorBorder#fe445000
  • list.activeSelectionBackground#ffffff20
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#24292e
  • list.errorForeground#fe4450E6
  • list.focusBackground#ffffff20
  • list.focusForeground#ffffff
  • list.highlightForeground#fa3940
  • list.hoverBackground#323232
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#2a213999
  • list.inactiveSelectionBackground#ffffff20
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#F0DB4F
  • progressBar.background#1ED760
  • scrollbar.shadow#1b1c1c
  • scrollbarSlider.activeBackground#0058ab
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca20
  • selection.background#0568ab
  • sideBar.background#0c1117
  • sideBar.border#0000
  • sideBar.dropBackground#34294f4c
  • sideBar.foreground#ffff
  • sideBarSectionHeader.background#241b2f
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#2e3436
  • statusBar.debuggingBackground#fe8090
  • statusBar.debuggingForeground#fff
  • tab.activeBackground#000
  • tab.activeBorder#CE120A
  • tab.inactiveBackground#0C1117
  • terminal.background#121212
  • terminal.foreground#fff
  • textLink.activeForeground#ff7edb
  • textLink.foreground#0080FF
  • titleBar.activeBackground#121212
  • widget.shadow#614d85aa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#848bbditalic
keyword#fede5d
constant.numeric#f97e72
support#fe4450
string.quoted, string.template, punctuation.definition.string#ea8b44italic
keyword.operator#fede5d
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#fede5d
entity.name.function, variable.function#36f9f6
keyword.other.unit#f97e72
entity.name.tag#e86c77
punctuation.definition.tag#36f9f6
entity.other.attribute-name#ff0000
entity.other.attribute-name.id#36f9f6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D50
support.function.misc.css#fe4450
support.type.property-name.css, support.type.property-name.json#72f1b8
entity.other.attribute-name#ffde6a
keyword.control.export.js, keyword.control.import.js#72f1b8
variable, entity.name.variable#ff7edb
storage.type, storage.modifier#fede5d
entity.name.type, meta.attribute.class.html#fe4450
punctuation.separator.key-value#b6b1b1
entity.other.attribute-name.html#5af1babold