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#282122
  • activityBar.foreground#f4f2f2
  • activityBarBadge.background#0a9f9b
  • activityBarBadge.foreground#ffffff
  • badge.background#0a9f9b
  • badge.foreground#ffffff
  • button.background#282122
  • button.foreground#ffffff
  • dropdown.background#efecec
  • dropdown.border#efecec
  • dropdown.foreground#282122
  • editor.background#f4f2f2
  • editor.foreground#282122
  • editor.hoverHighlightBackground#0a9f9b22
  • editor.lineHighlightBackground#edeaea
  • editor.selectionBackground#0a9f9b33
  • editor.wordHighlightBackground#e7775722
  • editor.wordHighlightStrongBackground#28212222
  • editorBracketMatch.background#0a9f9b44
  • editorBracketMatch.border#282122
  • editorCursor.foreground#222222
  • editorGroup.background#edeaea
  • editorGroupHeader.tabsBackground#edeaea
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#efecec
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#ddd6d6
  • editorLineNumber.foreground#c5bbbb
  • editorLink.activeForeground#0a9f9b
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#28212255
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#ddd6d6
  • editorSuggestWidget.foreground#282122
  • editorSuggestWidget.highlightForeground#0a9f9b
  • editorSuggestWidget.selectedBackground#d1c9c9
  • editorWhitespace.foreground#ddd6d6
  • editorWidget.background#e8e4e4
  • editorWidget.border#c5bbbb
  • extensionButton.prominentBackground#0a9f9b
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#0dcfca
  • focusBorder#0a9f9b
  • foreground#282122
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a29191
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#0a9f9b
  • input.background#f4f2f2
  • input.border#968383
  • input.foreground#282122
  • input.placeholderForeground#c5bbbb
  • inputOption.activeBorder#282122
  • list.activeSelectionBackground#282122
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d1c9c9
  • list.hoverBackground#fbfafa
  • list.inactiveSelectionBackground#f4f2f2
  • notification.background#d1c9c9
  • notification.buttonBackground#0a9f9b
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#282122
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#ebe7e7
  • panel.border#d8d1d1
  • panelTitle.activeBorder#0a9f9b
  • panelTitle.activeForeground#6f5e5e
  • panelTitle.inactiveForeground#baadad
  • peekView.border#0a9f9b
  • peekViewEditor.background#efecec
  • peekViewEditor.matchHighlightBackground#28212255
  • peekViewEditorGutter.background#e6e1e1
  • peekViewResult.background#e8e4e4
  • peekViewResult.fileForeground#362d2e
  • peekViewResult.lineForeground#6e5b5d
  • peekViewResult.matchHighlightBackground#28212255
  • peekViewResult.selectionBackground#f9f8f8
  • peekViewResult.selectionForeground#362d2e
  • peekViewTitle.background#efecec
  • peekViewTitleDescription.foreground#201a1b
  • peekViewTitleLabel.foreground#282122
  • progressBar.background#e77757
  • scrollbar.shadow#968383
  • scrollbarSlider.activeBackground#0a9f9baa
  • scrollbarSlider.background#28212235
  • scrollbarSlider.hoverBackground#0a9f9b55
  • sideBar.background#e8e4e4
  • sideBar.foreground#282122
  • sideBarSectionHeader.background#d1c9c9
  • sideBarSectionHeader.foreground#282122
  • statusBar.background#0a9f9b
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#282122
  • tab.activeForeground#282122
  • tab.border#d8d1d1
  • tab.inactiveBackground#ebe7e7
  • tab.inactiveForeground#967f83
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#e77757
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#f4bfb0
  • terminal.ansiBrightCyan#f4bfb0
  • terminal.ansiBrightGreen#1ef1eb
  • terminal.ansiBrightMagenta#c0d8d7
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#604f52
  • terminal.ansiBrightYellow#604f52
  • terminal.ansiCyan#e77757
  • terminal.ansiGreen#0a9f9b
  • terminal.ansiMagenta#80b2b0
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#362d2e
  • terminal.ansiYellow#282122
  • terminal.background#f4f2f2
  • terminal.foreground#282122
  • titleBar.activeBackground#ad9b9e
  • titleBar.activeForeground#282122
  • widget.shadow#c5bbbb55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#282122
comment#a59d9e
string#a58163
constant.numeric#cc8f5d
constant.language#282122
constant.character, constant.other#282122
variable
keyword#80b2b0
storage#282122
storage.type#0a9f9b
entity.name.class#282122underline
entity.other.inherited-class#282122
entity.name.function#e77757
variable.parameter#56484a
entity.name.tag#0a9f9b
entity.other.attribute-name#282122
support.function#e77757
support.constant#282122
support.type, support.class#282122
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#a58163
meta.diff, meta.diff.header#a59d9e
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#807677
meta.property-value, support.constant.property-value, constant.other.color#a58163
meta.structure.dictionary.json string.quoted.double.json#282122
meta.structure.dictionary.value.json string.quoted.double.json#a58163
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#282122
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#0a9f9b
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#0a9f9bnormal
variable.other#56484anormal
variable.parameter.function.coffee#cc8f5d
entity.name.section.markdown#282122
punctuation.definition.heading.markdown#80b2b0
markup.raw.inline.markdown#a58163
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#80b2b0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#80b2b0
punctuation.definition.metadata.markdown#80b2b0
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#0a9f9b
markup.bold.markdown, markup.italic.markdown#0a9f9b
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#282122

Shiki preview

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

Loading...