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#516172
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ef6462
  • activityBarBadge.foreground#ffffff
  • badge.background#ef6462
  • badge.foreground#ffffff
  • button.background#89a7bc
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#516172
  • editor.background#ffffff
  • editor.foreground#516172
  • editor.hoverHighlightBackground#ef646222
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#ef646233
  • editor.wordHighlightBackground#51617222
  • editor.wordHighlightStrongBackground#89a7bc22
  • editorBracketMatch.background#ef646244
  • editorBracketMatch.border#89a7bc
  • 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#ef6462
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#89a7bc55
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#516172
  • editorSuggestWidget.highlightForeground#ef6462
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#ef6462
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#f49290
  • focusBorder#ef6462
  • foreground#516172
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#ef6462
  • input.background#ffffff
  • input.border#999999
  • input.foreground#516172
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#89a7bc
  • list.activeSelectionBackground#89a7bc
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#ef6462
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#516172
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#ef6462
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#ef6462
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#89a7bc55
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#5c6e81
  • peekViewResult.lineForeground#91a1b1
  • peekViewResult.matchHighlightBackground#89a7bc55
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#5c6e81
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#4b5969
  • peekViewTitleLabel.foreground#516172
  • progressBar.background#516172
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#ef6462aa
  • scrollbarSlider.background#51617235
  • scrollbarSlider.hoverBackground#ef646255
  • sideBar.background#f2f2f2
  • sideBar.foreground#516172
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#516172
  • statusBar.background#ef6462
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#89a7bc
  • tab.activeForeground#516172
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#bec7d1
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#516172
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#8294a7
  • terminal.ansiBrightCyan#cad8e1
  • terminal.ansiBrightGreen#f8bfbf
  • terminal.ansiBrightMagenta#f8bfbf
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#8294a7
  • terminal.ansiBrightYellow#cad8e1
  • terminal.ansiCyan#89a7bc
  • terminal.ansiGreen#ef6462
  • terminal.ansiMagenta#ef6462
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#5c6e81
  • terminal.ansiYellow#89a7bc
  • terminal.background#ffffff
  • terminal.foreground#516172
  • titleBar.activeBackground#dce1e6
  • titleBar.activeForeground#516172
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#516172
comment#44515e
string#afa9e5
constant.numeric#968cea
constant.language#89a7bc
constant.character, constant.other#89a7bc
variable
keyword#ef6462
storage#89a7bc
storage.type#ef6462
entity.name.class#89a7bcunderline
entity.other.inherited-class#89a7bc
entity.name.function#516172
variable.parameter#37414c
entity.name.tag#ef6462
entity.other.attribute-name#89a7bc
support.function#89a7bc
support.constant#89a7bc
support.type, support.class#89a7bc
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#afa9e5
meta.diff, meta.diff.header#44515e
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#242b32
meta.property-value, support.constant.property-value, constant.other.color#afa9e5
meta.structure.dictionary.json string.quoted.double.json#89a7bc
meta.structure.dictionary.value.json string.quoted.double.json#afa9e5
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#516172
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#ef6462
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#ef6462normal
variable.other#37414cnormal
variable.parameter.function.coffee#968cea
entity.name.section.markdown#89a7bc
punctuation.definition.heading.markdown#ef6462
markup.raw.inline.markdown#afa9e5
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#ef6462
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ef6462
punctuation.definition.metadata.markdown#ef6462
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#ef6462
markup.bold.markdown, markup.italic.markdown#ef6462
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#516172

Shiki preview

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

Loading...

Rainglow - Coding Theme