Skip to main content
CodingTheme

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#3e3e3e
  • activityBar.foreground#e3e2e0
  • activityBarBadge.background#4ea1df
  • activityBarBadge.foreground#ffffff
  • badge.background#4ea1df
  • badge.foreground#ffffff
  • button.background#f66153
  • button.foreground#ffffff
  • dropdown.background#343434
  • dropdown.border#343434
  • dropdown.foreground#e3e2e0
  • editor.background#393939
  • editor.foreground#e3e2e0
  • editor.hoverHighlightBackground#4ea1df22
  • editor.lineHighlightBackground#414141
  • editor.selectionBackground#f6615355
  • editor.wordHighlightBackground#808dd322
  • editor.wordHighlightStrongBackground#f6615322
  • editorBracketMatch.background#4ea1df44
  • editorBracketMatch.border#f66153
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#414141
  • editorGroupHeader.tabsBackground#414141
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#343434
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#525252
  • editorLineNumber.foreground#6c6c6c
  • editorLink.activeForeground#4ea1df
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#f6615355
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#525252
  • editorSuggestWidget.foreground#e3e2e0
  • editorSuggestWidget.highlightForeground#4ea1df
  • editorSuggestWidget.selectedBackground#6c6c6c
  • editorWhitespace.foreground#525252
  • editorWidget.background#525252
  • editorWidget.border#6c6c6c
  • extensionButton.prominentBackground#4ea1df
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#79b8e7
  • focusBorder#4ea1df
  • foreground#e3e2e0
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#858585
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.background#2c2c2c
  • input.border#5f5f5f
  • input.foreground#e3e2e0
  • input.placeholderForeground#676767
  • inputOption.activeBorder#f66153
  • list.activeSelectionBackground#f66153
  • list.activeSelectionForeground#393939
  • list.focusBackground#5f5f5f
  • list.hoverBackground#414141
  • list.inactiveSelectionBackground#393939
  • panel.background#525252
  • panel.border#6c6c6c
  • panelTitle.activeBorder#4ea1df
  • panelTitle.inactiveForeground#929292
  • peekView.border#4ea1df
  • peekViewEditor.background#2f2f2f
  • peekViewEditor.matchHighlightBackground#f6615355
  • peekViewEditorGutter.background#343434
  • peekViewResult.background#464646
  • peekViewResult.fileForeground#d9d8d5
  • peekViewResult.lineForeground#cbc9c5
  • peekViewResult.matchHighlightBackground#f6615355
  • peekViewResult.selectionBackground#3e3e3e
  • peekViewResult.selectionForeground#e3e2e0
  • peekViewTitle.background#343434
  • peekViewTitleDescription.foreground#dcdad8
  • peekViewTitleLabel.foreground#e3e2e0
  • progressBar.background#808dd3
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#4ea1dfaa
  • scrollbarSlider.background#6c6c6caa
  • scrollbarSlider.hoverBackground#4ea1df55
  • sideBar.background#464646
  • sideBar.foreground#e3e2e0
  • sideBarSectionHeader.background#4d4d4d
  • sideBarSectionHeader.foreground#e3e2e0
  • statusBar.background#4ea1df
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#f66153
  • tab.inactiveBackground#434343
  • tab.inactiveForeground#9f9f9f
  • terminal.ansiBlack#464646
  • terminal.ansiBlue#808dd3
  • terminal.ansiBrightBlack#6c6c6c
  • terminal.ansiBrightBlue#ccd1ed
  • terminal.ansiBrightCyan#ccd1ed
  • terminal.ansiBrightGreen#a4cfef
  • terminal.ansiBrightMagenta#fbbab4
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fbbab4
  • terminal.ansiCyan#808dd3
  • terminal.ansiGreen#4ea1df
  • terminal.ansiMagenta#f66153
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#efefed
  • terminal.ansiYellow#f66153
  • terminal.background#2c2c2c
  • terminal.foreground#e3e2e0
  • titleBar.activeBackground#2f2f2f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e3e2e0ff
comment#696969
string#4ea1df
constant.numeric#4ea1df
constant.language#f66153
constant.character, constant.other#f66153
variable
keyword#f66153
storage#f66153
storage.type#4ea1df
entity.name.class#f66153underline
entity.other.inherited-class#f66153
entity.name.function#808dd3
variable.parameter#e3e2e0
entity.name.tag#4ea1df
entity.other.attribute-name#f66153
support.function#808dd3
support.constant#f66153
support.type, support.class#f66153
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#4ea1df
meta.diff, meta.diff.header#696969
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#8f8f8f
meta.property-value, support.constant.property-value, constant.other.color#4ea1df
meta.structure.dictionary.json string.quoted.double.json#f66153
meta.structure.dictionary.value.json string.quoted.double.json#4ea1df
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#e3e2e0
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#4ea1df
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#4ea1dfnormal
variable.other#e3e2e0normal
variable.parameter.function.coffee#4ea1df
entity.name.section.markdown#f66153
punctuation.definition.heading.markdown#f66153
markup.raw.inline.markdown#4ea1df
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#f66153
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#f66153
punctuation.definition.metadata.markdown#f66153
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#4ea1df
markup.bold.markdown, markup.italic.markdown#4ea1df
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#e3e2e0
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.other#ffd34e
keyword.other.unit#ffffff
entity.name.function#90d029
entity.name.tag#ffd34e
meta.property-name support.type.property-name#ffd34e
support.function#90d029
storage.type#f66153

Shiki preview

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

Loading...

Snappier by Bertie Blackman - VS Code Theme