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#333333
  • activityBar.foreground#ffffff
  • activityBarBadge.background#a2a797
  • activityBarBadge.foreground#ffffff
  • badge.background#a2a797
  • badge.foreground#ffffff
  • button.background#516b6b
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#333333
  • editor.background#ffffff
  • editor.foreground#333333
  • editor.hoverHighlightBackground#a2a79722
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#516b6b33
  • editor.wordHighlightBackground#70807b22
  • editor.wordHighlightStrongBackground#516b6b22
  • editorBracketMatch.background#a2a79744
  • editorBracketMatch.border#516b6b
  • editorCursor.foreground#222222
  • editorGroup.background#f7f7f7
  • editorGroupHeader.tabsBackground#f7f7f7
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#fafafa
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#e6e6e6
  • editorLineNumber.foreground#cccccc
  • editorLink.activeForeground#a2a797
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#516b6b55
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#333333
  • editorSuggestWidget.highlightForeground#a2a797
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#a2a797
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#bbbeb3
  • focusBorder#a2a797
  • foreground#333333
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#a2a797
  • input.background#ffffff
  • input.border#999999
  • input.foreground#333333
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#516b6b
  • list.activeSelectionBackground#516b6b
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#a2a797
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#333333
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#a2a797
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#a2a797
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#516b6b55
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#404040
  • peekViewResult.lineForeground#737373
  • peekViewResult.matchHighlightBackground#516b6b55
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#404040
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#2b2b2b
  • peekViewTitleLabel.foreground#333333
  • progressBar.background#70807b
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#a2a797aa
  • scrollbarSlider.background#33333335
  • scrollbarSlider.hoverBackground#a2a79755
  • sideBar.background#f2f2f2
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#333333
  • statusBar.background#a2a797
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#516b6b
  • tab.activeForeground#333333
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#70807b
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#a5b1ad
  • terminal.ansiBrightCyan#e39390
  • terminal.ansiBrightGreen#d3d6ce
  • terminal.ansiBrightMagenta#d3d6ce
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#666666
  • terminal.ansiBrightYellow#82a0a0
  • terminal.ansiCyan#cf433e
  • terminal.ansiGreen#a2a797
  • terminal.ansiMagenta#a2a797
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#404040
  • terminal.ansiYellow#516b6b
  • terminal.background#ffffff
  • terminal.foreground#333333
  • titleBar.activeBackground#b3b3b3
  • titleBar.activeForeground#333333
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#333333
comment#bbbbbb
string#7ebcaa
constant.numeric#7ebcaa
constant.language#516b6b
constant.character, constant.other#516b6b
variable
keyword#a2a797
storage#516b6b
storage.type#a2a797
entity.name.class#516b6bunderline
entity.other.inherited-class#516b6b
entity.name.function#70807b
variable.parameter#bcbbb8
entity.name.tag#a2a797
entity.other.attribute-name#516b6b
support.function#cf433e
support.constant#516b6b
support.type, support.class#516b6b
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#7ebcaa
meta.diff, meta.diff.header#bbbbbb
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#959595
meta.property-value, support.constant.property-value, constant.other.color#7ebcaa
meta.structure.dictionary.json string.quoted.double.json#516b6b
meta.structure.dictionary.value.json string.quoted.double.json#7ebcaa
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#333333
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#a2a797
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#a2a797normal
variable.other#bcbbb8normal
variable.parameter.function.coffee#7ebcaa
entity.name.section.markdown#516b6b
punctuation.definition.heading.markdown#a2a797
markup.raw.inline.markdown#7ebcaa
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#a2a797
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#a2a797
punctuation.definition.metadata.markdown#a2a797
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#a2a797
markup.bold.markdown, markup.italic.markdown#a2a797
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#333333

Shiki preview

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

Loading...