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#383333
  • activityBar.foreground#edebe6
  • activityBarBadge.background#a2a797
  • activityBarBadge.foreground#ffffff
  • badge.background#a2a797
  • badge.foreground#ffffff
  • button.background#516b6b
  • button.foreground#ffffff
  • dropdown.background#2e2929
  • dropdown.border#2e2929
  • dropdown.foreground#edebe6
  • editor.background#332e2e
  • editor.foreground#edebe6
  • editor.hoverHighlightBackground#a2a79722
  • editor.lineHighlightBackground#3b3535
  • editor.selectionBackground#516b6b55
  • editor.wordHighlightBackground#70807b22
  • editor.wordHighlightStrongBackground#516b6b22
  • editorBracketMatch.background#a2a79744
  • editorBracketMatch.border#516b6b
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#3b3535
  • editorGroupHeader.tabsBackground#3b3535
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#2e2929
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#4e4646
  • editorLineNumber.foreground#695e5e
  • editorLink.activeForeground#a2a797
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#516b6b55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#4e4646
  • editorSuggestWidget.foreground#edebe6
  • editorSuggestWidget.highlightForeground#a2a797
  • editorSuggestWidget.selectedBackground#695e5e
  • editorWhitespace.foreground#4e4646
  • editorWidget.background#4e4646
  • editorWidget.border#695e5e
  • extensionButton.prominentBackground#a2a797
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#bbbeb3
  • focusBorder#a2a797
  • foreground#edebe6
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#837777
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#a2a797
  • input.background#262222
  • input.border#5b5252
  • input.foreground#edebe6
  • input.placeholderForeground#635a5a
  • inputOption.activeBorder#516b6b
  • list.activeSelectionBackground#516b6b
  • list.activeSelectionForeground#332e2e
  • list.focusBackground#5b5252
  • list.hoverBackground#3b3535
  • list.inactiveSelectionBackground#332e2e
  • notification.background#403a3a
  • notification.buttonBackground#a2a797
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#edebe6
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#4e4646
  • panel.border#695e5e
  • panelTitle.activeBorder#a2a797
  • panelTitle.inactiveForeground#908484
  • peekView.border#a2a797
  • peekViewEditor.background#282424
  • peekViewEditor.matchHighlightBackground#516b6b55
  • peekViewEditorGutter.background#2e2929
  • peekViewResult.background#403a3a
  • peekViewResult.fileForeground#e4e1da
  • peekViewResult.lineForeground#d8d3c8
  • peekViewResult.matchHighlightBackground#516b6b55
  • peekViewResult.selectionBackground#383333
  • peekViewResult.selectionForeground#edebe6
  • peekViewTitle.background#2e2929
  • peekViewTitleDescription.foreground#e7e4dd
  • peekViewTitleLabel.foreground#edebe6
  • progressBar.background#70807b
  • scrollbar.shadow#181616
  • scrollbarSlider.activeBackground#a2a797aa
  • scrollbarSlider.background#695e5eaa
  • scrollbarSlider.hoverBackground#a2a79755
  • sideBar.background#403a3a
  • sideBar.foreground#edebe6
  • sideBarSectionHeader.background#484141
  • sideBarSectionHeader.foreground#edebe6
  • statusBar.background#a2a797
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#516b6b
  • tab.inactiveBackground#3e3838
  • tab.inactiveForeground#9c9191
  • terminal.ansiBlack#403a3a
  • terminal.ansiBlue#70807b
  • terminal.ansiBrightBlack#695e5e
  • terminal.ansiBrightBlue#a5b1ad
  • terminal.ansiBrightCyan#e39390
  • terminal.ansiBrightGreen#d3d6ce
  • terminal.ansiBrightMagenta#d3d6ce
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#82a0a0
  • terminal.ansiCyan#cf433e
  • terminal.ansiGreen#a2a797
  • terminal.ansiMagenta#a2a797
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#f8f7f5
  • terminal.ansiYellow#516b6b
  • terminal.background#262222
  • terminal.foreground#edebe6
  • titleBar.activeBackground#282424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#edebe6
comment#6b625b
string#a5e3d0
constant.numeric#a5e3d0
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#edebe6
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#a5e3d0
meta.diff, meta.diff.header#6b625b
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#938880
meta.property-value, support.constant.property-value, constant.other.color#a5e3d0
meta.structure.dictionary.json string.quoted.double.json#516b6b
meta.structure.dictionary.value.json string.quoted.double.json#a5e3d0
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#edebe6
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#edebe6normal
variable.parameter.function.coffee#a5e3d0
entity.name.section.markdown#516b6b
punctuation.definition.heading.markdown#a2a797
markup.raw.inline.markdown#a5e3d0
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#edebe6

Shiki preview

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

Loading...

Rainglow - Coding Theme