Skip to main content
CodingTheme

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#0b1015
  • activityBar.foreground#97a7c8ff
  • activityBarBadge.background#008097
  • activityBarBadge.foreground#000000
  • button.hoverBackground#008097
  • debugToolBar.background#0b1015
  • dropdown.background#0b1015
  • dropdown.border#97a7c8ff
  • editor.background#0b1015
  • editor.findMatchBackground#18222Dff
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#14344B
  • editor.lineHighlightBorder#14344B
  • editor.selectionBackground#18222Dff
  • editorBracketMatch.border#97a7c8ff
  • editorCursor.foreground#008097
  • editorGroup.background#0b1015
  • editorGroup.border#0b1015
  • editorGroupHeader.noTabsBackground#0b1015
  • editorGroupHeader.tabsBackground#0b1015
  • editorGutter.addedBackground#56D6D6
  • editorGutter.deletedBackground#FB467B
  • editorGutter.modifiedBackground#FFCC00
  • editorHoverWidget.background#0b1015
  • editorIndentGuide.activeBackground#495365
  • editorIndentGuide.background#18222Dff
  • editorLineNumber.foreground#5C6370
  • editorOverviewRuler.border#0b1015
  • editorRuler.foreground#18222Dff
  • editorSuggestWidget.background#0b1015
  • editorSuggestWidget.selectedBackground#18222Dff
  • editorWhitespace.foreground#18222Dff
  • editorWidget.background#0b1015
  • focusBorder#97a7c8ff
  • gitDecoration.conflictingResourceForeground#9107c7
  • gitDecoration.deletedResourceForeground#FF3333
  • gitDecoration.ignoredResourceForeground#00B7C9
  • gitDecoration.modifiedResourceForeground#f7f308
  • gitDecoration.untrackedResourceForeground#11eb73
  • input.background#0b1015
  • input.border#008097
  • list.activeSelectionBackground#0b1015
  • list.activeSelectionForeground#008097
  • list.focusBackground#18222Dff
  • list.focusForeground#008097
  • list.highlightForeground#008097
  • list.hoverBackground#18222Dff
  • list.inactiveSelectionBackground#0b1015
  • list.inactiveSelectionForeground#008097
  • notification.background#0b1015
  • panel.background#0b1015
  • panel.border#18222Dff
  • panelTitle.activeForeground#008097
  • panelTitle.inactiveForeground#97a7c8ff
  • peekView.border#97a7c8ff
  • peekViewEditor.background#0b1015
  • peekViewResult.background#0b1015
  • peekViewResult.selectionBackground#0b1015
  • peekViewTitle.background#0b1015
  • peekViewTitleLabel.foreground#008097
  • progressBar.background#008097
  • scrollbar.shadow#00000026
  • scrollbarSlider.background#18222Dff
  • scrollbarSlider.hoverBackground#22303Eff
  • sideBar.background#0b1015
  • sideBarSectionHeader.background#0b1015
  • statusBar.background#0b1015
  • statusBar.debuggingBackground#0b1015
  • statusBar.foreground#97a7c8ff
  • tab.activeBackground#0b1015
  • tab.activeBorder#008097
  • tab.activeForeground#008097
  • tab.border#0b1015
  • tab.inactiveBackground#0b1015
  • tab.inactiveForeground#97a7c8ff
  • tab.unfocusedActiveBorder#97a7c8ff
  • titleBar.activeBackground#0b1015
  • titleBar.inactiveForeground#0b1015
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f8f8f2ff
comment#737b84
string#e9ee00
constant.numeric#8FBE00
constant.language#00A8C6
constant.character, constant.other#00A8C6
variable
keyword#748aa6
storage#00A8C6
storage.type#4ECDC4
entity.name.class#00A8C6underline
entity.other.inherited-class#00A8C6italic underline
entity.name.function#AEE239
variable.parameteritalic
entity.name.tag#4ECDC4
entity.other.attribute-name#00A8C6
support.function#4ECDC4
support.constant#00A8C6
support.type, support.class#00A8C6italic
support.other.variable
invalid#f8f8f0
invalid.deprecated#f8f8f0
meta.structure.dictionary.json string.quoted.double.json#e9ee00
meta.diff, meta.diff.header#75715E
markup.deleted#00A8C6
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#939da8
meta.property-value, support.constant.property-value, constant.other.color#e9ee00
meta.structure.dictionary.json string.quoted.double.json#00A8C6
meta.structure.dictionary.value.json string.quoted.double.json#e9ee00
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#F8F8F2
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#4ECDC4
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#F8F8F2normal
variable.othernormal
variable.parameter.function.coffee#8FBE00italic
entity.name.section.markdown#00A8C6
punctuation.definition.heading.markdown#748aa6
markup.raw.inline.markdown#e9ee00
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#748aa6
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#748aa6
punctuation.definition.metadata.markdown#748aa6
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#4ECDC4italic
markup.bold.markdown, markup.italic.markdown#4ECDC4
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#00a8c6
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
entity.other.attribute-name.class#AEE239
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...