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#2a2c2c
  • activityBar.foreground#e8e1de
  • activityBarBadge.background#6c8375
  • activityBarBadge.foreground#ffffff
  • badge.background#6c8375
  • badge.foreground#ffffff
  • button.background#a0afa1
  • button.foreground#ffffff
  • dropdown.background#202222
  • dropdown.border#202222
  • dropdown.foreground#e8e1de
  • editor.background#252727
  • editor.foreground#e8e1de
  • editor.hoverHighlightBackground#6c837522
  • editor.lineHighlightBackground#2c2f2f
  • editor.selectionBackground#a2d66b55
  • editor.wordHighlightBackground#f0f5f522
  • editor.wordHighlightStrongBackground#a0afa122
  • editorBracketMatch.background#6c837544
  • editorBracketMatch.border#a0afa1
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#2c2f2f
  • editorGroupHeader.tabsBackground#2c2f2f
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#202222
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#3e4141
  • editorLineNumber.foreground#575b5b
  • editorLink.activeForeground#6c8375
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#a0afa155
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#3e4141
  • editorSuggestWidget.foreground#e8e1de
  • editorSuggestWidget.highlightForeground#6c8375
  • editorSuggestWidget.selectedBackground#575b5b
  • editorWhitespace.foreground#3e4141
  • editorWidget.background#3e4141
  • editorWidget.border#575b5b
  • extensionButton.prominentBackground#6c8375
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#869c8f
  • focusBorder#6c8375
  • foreground#e8e1de
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#6f7676
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#6c8375
  • input.background#191a1a
  • input.border#4a4e4e
  • input.foreground#e8e1de
  • input.placeholderForeground#525656
  • inputOption.activeBorder#a0afa1
  • list.activeSelectionBackground#a0afa1
  • list.activeSelectionForeground#252727
  • list.focusBackground#4a4e4e
  • list.hoverBackground#2c2f2f
  • list.inactiveSelectionBackground#252727
  • notification.background#313434
  • notification.buttonBackground#6c8375
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#e8e1de
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#3e4141
  • panel.border#575b5b
  • panelTitle.activeBorder#6c8375
  • panelTitle.inactiveForeground#7c8383
  • peekView.border#6c8375
  • peekViewEditor.background#1b1d1d
  • peekViewEditor.matchHighlightBackground#a0afa155
  • peekViewEditorGutter.background#202222
  • peekViewResult.background#313434
  • peekViewResult.fileForeground#e0d6d2
  • peekViewResult.lineForeground#d3c6c0
  • peekViewResult.matchHighlightBackground#a0afa155
  • peekViewResult.selectionBackground#2a2c2c
  • peekViewResult.selectionForeground#e8e1de
  • peekViewTitle.background#202222
  • peekViewTitleDescription.foreground#e2d9d5
  • peekViewTitleLabel.foreground#e8e1de
  • progressBar.background#f0f5f5
  • scrollbar.shadow#0c0d0d
  • scrollbarSlider.activeBackground#6c8375aa
  • scrollbarSlider.background#575b5baa
  • scrollbarSlider.hoverBackground#6c837555
  • sideBar.background#313434
  • sideBar.foreground#e8e1de
  • sideBarSectionHeader.background#393c3c
  • sideBarSectionHeader.foreground#e8e1de
  • statusBar.background#6c8375
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#a0afa1
  • tab.inactiveBackground#2f3131
  • tab.inactiveForeground#898f8f
  • terminal.ansiBlack#313434
  • terminal.ansiBlue#f0f5f5
  • terminal.ansiBrightBlack#575b5b
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#a2b3a9
  • terminal.ansiBrightGreen#a2b3a9
  • terminal.ansiBrightMagenta#d7ded8
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d7ded8
  • terminal.ansiCyan#6c8375
  • terminal.ansiGreen#6c8375
  • terminal.ansiMagenta#a0afa1
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#f2efed
  • terminal.ansiYellow#a0afa1
  • terminal.background#191a1a
  • terminal.foreground#e8e1de
  • titleBar.activeBackground#1b1d1d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e8e1de
comment#4b5656
string#a2d66b
constant.numeric#88c448
constant.language#a0afa1
constant.character, constant.other#a0afa1
variable
keyword#a0afa1
storage#a0afa1
storage.type#6c8375
entity.name.class#a0afa1underline
entity.other.inherited-class#a0afa1
entity.name.function#f0f5f5
variable.parameter#ffffff
entity.name.tag#6c8375
entity.other.attribute-name#a0afa1
support.function#6c8375
support.constant#a0afa1
support.type, support.class#a0afa1
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#a2d66b
meta.diff, meta.diff.header#4b5656
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#6f7f7f
meta.property-value, support.constant.property-value, constant.other.color#a2d66b
meta.structure.dictionary.json string.quoted.double.json#a0afa1
meta.structure.dictionary.value.json string.quoted.double.json#a2d66b
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#e8e1de
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#6c8375
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#6c8375normal
variable.other#ffffffnormal
variable.parameter.function.coffee#88c448
entity.name.section.markdown#a0afa1
punctuation.definition.heading.markdown#a0afa1
markup.raw.inline.markdown#a2d66b
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#a0afa1
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#a0afa1
punctuation.definition.metadata.markdown#a0afa1
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#6c8375
markup.bold.markdown, markup.italic.markdown#6c8375
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#e8e1de

Shiki preview

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

Loading...