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#372638
  • activityBar.foreground#ffffff
  • activityBarBadge.background#c89933
  • activityBarBadge.foreground#ffffff
  • badge.background#c89933
  • badge.foreground#ffffff
  • button.background#74526c
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#372638
  • editor.background#ffffff
  • editor.foreground#372638
  • editor.hoverHighlightBackground#c8993322
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#c8993333
  • editor.wordHighlightBackground#dbd05322
  • editor.wordHighlightStrongBackground#74526c22
  • editorBracketMatch.background#c8993344
  • editorBracketMatch.border#74526c
  • editorCursor.foreground#333333
  • 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#c89933
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#74526c55
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#372638
  • editorSuggestWidget.highlightForeground#c89933
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#c89933
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#d5ae59
  • focusBorder#c89933
  • foreground#372638
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#c89933
  • input.background#ffffff
  • input.border#999999
  • input.foreground#372638
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#74526c
  • list.activeSelectionBackground#74526c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#c89933
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#372638
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#c89933
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#c89933
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#74526c55
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#463047
  • peekViewResult.lineForeground#825a84
  • peekViewResult.matchHighlightBackground#74526c55
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#463047
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#2e202f
  • peekViewTitleLabel.foreground#372638
  • progressBar.background#dbd053
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#c89933aa
  • scrollbarSlider.background#37263835
  • scrollbarSlider.hoverBackground#c8993355
  • sideBar.background#f2f2f2
  • sideBar.foreground#372638
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#372638
  • statusBar.background#c89933
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#74526c
  • tab.activeForeground#372638
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#a781a9
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#dbd053
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#ede7a7
  • terminal.ansiBrightCyan#ede7a7
  • terminal.ansiBrightGreen#dfc282
  • terminal.ansiBrightMagenta#dfc282
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#734f75
  • terminal.ansiBrightYellow#a884a0
  • terminal.ansiCyan#dbd053
  • terminal.ansiGreen#c89933
  • terminal.ansiMagenta#c89933
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#463047
  • terminal.ansiYellow#74526c
  • terminal.background#ffffff
  • terminal.foreground#372638
  • titleBar.activeBackground#bc9fbe
  • titleBar.activeForeground#372638
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#372638
comment#cc8ed1
string#baa353
constant.numeric#d8b436
constant.language#74526c
constant.character, constant.other#74526c
variable
keyword#c89933
storage#74526c
storage.type#c89933
entity.name.class#74526cunderline
entity.other.inherited-class#74526c
entity.name.function#dbd053
variable.parameter#372638
entity.name.tag#c89933
entity.other.attribute-name#74526c
support.function#dbd053
support.constant#74526c
support.type, support.class#74526c
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#baa353
meta.diff, meta.diff.header#cc8ed1
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#b358bb
meta.property-value, support.constant.property-value, constant.other.color#baa353
meta.structure.dictionary.json string.quoted.double.json#74526c
meta.structure.dictionary.value.json string.quoted.double.json#baa353
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#372638
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#c89933
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#c89933normal
variable.other#372638normal
variable.parameter.function.coffee#d8b436
entity.name.section.markdown#74526c
punctuation.definition.heading.markdown#c89933
markup.raw.inline.markdown#baa353
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#c89933
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#c89933
punctuation.definition.metadata.markdown#c89933
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#c89933
markup.bold.markdown, markup.italic.markdown#c89933
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#372638

Shiki preview

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

Loading...

Rainglow by Dayle Rees - VS Code Theme