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#101010
  • activityBar.foreground#dad1d1
  • activityBar.inactiveForeground#776e6e
  • activityBarBadge.background#9d372c
  • activityBarBadge.foreground#dad1d1
  • badge.background#9d372c
  • badge.foreground#dad1d1
  • breadcrumb.activeSelectionForeground#fff
  • breadcrumb.focusForeground#fff
  • breadcrumb.foreground#dad1d1
  • breadcrumbPicker.background#201717
  • button.background#9d372c
  • button.foreground#fff
  • button.hoverBackground#9d372c
  • debugToolBar.background#181818ff
  • diffEditor.insertedTextBackground#3b994a1a
  • diffEditor.removedTextBackground#dd5e5e26
  • dropdown.background#101010
  • dropdown.border#110000
  • dropdown.foreground#fff
  • editor.background#101010
  • editor.findMatchBackground#9d372c83
  • editor.findMatchHighlightBackground#dd5e5e26
  • editor.foreground#fff
  • editor.inactiveSelectionBackground#4a535c60
  • editor.lineHighlightBackground#52525255
  • editor.selectionBackground#222222
  • editor.selectionHighlightBackground#3a3a3a8c
  • editorCursor.foreground#cf574a
  • editorError.foreground#9d372c
  • editorGroup.border#363232
  • editorGroupHeader.noTabsBackground#101010
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#00ff6833
  • editorGutter.deletedBackground#9d372c
  • editorGutter.modifiedBackground#fff
  • editorHint.foreground#d1d5da
  • editorInfo.foreground#d1d5da
  • editorLineNumber.activeForeground#d8dce0
  • editorLineNumber.foreground#464646
  • editorOverviewRuler.addedForeground#00ff6833
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#525252
  • editorOverviewRuler.errorForeground#9d372c
  • editorOverviewRuler.infoForeground#eca712
  • editorOverviewRuler.modifiedForeground#fff
  • editorOverviewRuler.warningForeground#ca700b
  • editorSuggestWidget.background#28231f
  • editorWarning.foreground#e8810e
  • editorWidget.background#181818ff
  • errorForeground#d43b3b
  • extensionButton.prominentBackground#9d372c
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#9d372c
  • focusBorder#000
  • foreground#e8e1e1
  • gitDecoration.addedResourceForeground#fff
  • gitDecoration.conflictingResourceForeground#9d372c
  • gitDecoration.deletedResourceForeground#525252
  • gitDecoration.modifiedResourceForeground#fff
  • gitDecoration.untrackedResourceForeground#fff
  • input.background#101010
  • input.border#101010
  • input.foreground#e8e1e1
  • input.placeholderForeground#dad1d16c
  • list.activeSelectionBackground#fff
  • list.activeSelectionForeground#000
  • list.errorForeground#d43b3b
  • list.focusBackground#9d372c80
  • list.focusForeground#fff
  • list.highlightForeground#9d372c
  • list.hoverBackground#222222
  • list.inactiveSelectionBackground#101010
  • list.inactiveSelectionForeground#d8dce0
  • list.warningForeground#e8810e
  • panel.border#000
  • panelTitle.activeBorder#9d372c
  • peekView.border#000
  • peekViewEditor.background#101010
  • peekViewTitle.background#101010
  • scrollbar.shadow#d8dce01a
  • scrollbarSlider.activeBackground#ffffff69
  • scrollbarSlider.background#d8dce013
  • scrollbarSlider.hoverBackground#d8dce026
  • sideBar.background#101010
  • sideBar.border#101010
  • sideBar.foreground#8b8a8a
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#000
  • sideBarSectionHeader.foreground#dad1d1
  • sideBarTitle.foreground#dad1d1
  • statusBar.background#101010
  • statusBar.debuggingBackground#e1e4e8
  • statusBar.debuggingForeground#101010
  • statusBar.foreground#dad1d1
  • statusBar.noFolderBackground#101010
  • statusBar.noFolderForeground#fff
  • tab.activeBackground#000
  • tab.activeForeground#dad1d1
  • tab.border#101010
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#fff
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#dad1d1
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, meta.definition.variable.name, support.variable#b9b9b9
meta.object-literal.key, meta.object-literal.key entity.name.function#b9b9b9
comment, punctuation.comment, punctuation.definition.comment#444444
keyword.operator#b9b9b9
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#b9b9b9
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#ffffffbold
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string#b0583a
constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language#9b6b5d
constant.character, constant.other, entity.name.function, entity.name.class, entity.other.inherited-class, entity.other.attribute-name, entity.name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json#b9b9b9
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#fffbold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag#fffbold
meta.ptr, meta.pointer, meta.address, meta.array.cxx——
meta.preprocessor—
support.type, support.class, support.function, support.constant#b9b9b9—
invalid#ed6e6f—
invalid.deprecated#ed6e6f—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation#b5bbc0
markup.heading, entity.name.section#d8dce0bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code#778089italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline#b5bbc0
variable.language.makefile, variable.other.makefile#b5bbc0
markup.italic—italic
markup.bold—bold
entity.other.attribute-name.class.css#b5bbc0
entity.name.tag.css#d8dce0bold
meta.property-name.css#b5bbc0