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#221a22
  • activityBar.foreground#ffffff
  • activityBarBadge.background#99769b
  • activityBarBadge.foreground#ffffff
  • badge.background#99769b
  • badge.foreground#ffffff
  • button.background#765478
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#221a22
  • editor.background#ffffff
  • editor.foreground#221a22
  • editor.hoverHighlightBackground#99769b22
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#fc6a0f33
  • editor.wordHighlightBackground#fc6a0f22
  • editor.wordHighlightStrongBackground#76547822
  • editorBracketMatch.background#99769b44
  • editorBracketMatch.border#765478
  • 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#99769b
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#76547855
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#221a22
  • editorSuggestWidget.highlightForeground#99769b
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#99769b
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#af93b0
  • focusBorder#99769b
  • foreground#221a22
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#99769b
  • input.background#ffffff
  • input.border#999999
  • input.foreground#221a22
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#765478
  • list.activeSelectionBackground#765478
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#99769b
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#221a22
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#99769b
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#99769b
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#76547855
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#302530
  • peekViewResult.lineForeground#6a516a
  • peekViewResult.matchHighlightBackground#76547855
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#302530
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#191319
  • peekViewTitleLabel.foreground#221a22
  • progressBar.background#fc6a0f
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#99769baa
  • scrollbarSlider.background#221a2235
  • scrollbarSlider.hoverBackground#99769b55
  • sideBar.background#f2f2f2
  • sideBar.foreground#221a22
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#221a22
  • statusBar.background#99769b
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#765478
  • tab.activeForeground#221a22
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#947494
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#fc6a0f
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#fda974
  • terminal.ansiBrightCyan#c5b1c6
  • terminal.ansiBrightGreen#c5b1c6
  • terminal.ansiBrightMagenta#fda974
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#5c465c
  • terminal.ansiBrightYellow#a987ab
  • terminal.ansiCyan#99769b
  • terminal.ansiGreen#99769b
  • terminal.ansiMagenta#fc6a0f
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#302530
  • terminal.ansiYellow#765478
  • terminal.background#ffffff
  • terminal.foreground#221a22
  • titleBar.activeBackground#aa90aa
  • titleBar.activeForeground#221a22
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#221a22
comment#c6a7c6
string#fc9a0f
constant.numeric#fc9a0f
constant.language#765478
constant.character, constant.other#765478
variable
keyword#fc6a0f
storage#765478
storage.type#99769b
entity.name.class#765478underline
entity.other.inherited-class#765478
entity.name.function#fc6a0f
variable.parameter#4f3c4f
entity.name.tag#99769b
entity.other.attribute-name#765478
support.function#99769b
support.constant#765478
support.type, support.class#765478
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#fc9a0f
meta.diff, meta.diff.header#c6a7c6
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#a879a8
meta.property-value, support.constant.property-value, constant.other.color#fc9a0f
meta.structure.dictionary.json string.quoted.double.json#765478
meta.structure.dictionary.value.json string.quoted.double.json#fc9a0f
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#221a22
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#99769b
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#99769bnormal
variable.other#4f3c4fnormal
variable.parameter.function.coffee#fc9a0f
entity.name.section.markdown#765478
punctuation.definition.heading.markdown#fc6a0f
markup.raw.inline.markdown#fc9a0f
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#fc6a0f
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#fc6a0f
punctuation.definition.metadata.markdown#fc6a0f
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#99769b
markup.bold.markdown, markup.italic.markdown#99769b
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#221a22

Shiki preview

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

Loading...

Rainglow - Coding Theme