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#1e3b41
  • activityBar.foreground#b1c7cc
  • activityBarBadge.background#43bdb2
  • activityBarBadge.foreground#ffffff
  • badge.background#43bdb2
  • badge.foreground#ffffff
  • button.background#bbd4be
  • button.foreground#ffffff
  • dropdown.background#182f33
  • dropdown.border#182f33
  • dropdown.foreground#b1c7cc
  • editor.background#1b353a
  • editor.foreground#b1c7cc
  • editor.hoverHighlightBackground#43bdb222
  • editor.lineHighlightBackground#203f44
  • editor.selectionBackground#43bdb255
  • editor.wordHighlightBackground#f9d6bc22
  • editor.wordHighlightStrongBackground#bbd4be22
  • editorBracketMatch.background#43bdb244
  • editorBracketMatch.border#bbd4be
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#203f44
  • editorGroupHeader.tabsBackground#203f44
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#182f33
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#2b555d
  • editorLineNumber.foreground#3b7580
  • editorLink.activeForeground#43bdb2
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#bbd4be55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#2b555d
  • editorSuggestWidget.foreground#b1c7cc
  • editorSuggestWidget.highlightForeground#43bdb2
  • editorSuggestWidget.selectedBackground#3b7580
  • editorWhitespace.foreground#2b555d
  • editorWidget.background#2b555d
  • editorWidget.border#3b7580
  • extensionButton.prominentBackground#43bdb2
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#69cac1
  • focusBorder#43bdb2
  • foreground#b1c7cc
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#4c94a2
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#43bdb2
  • input.background#132529
  • input.border#33656e
  • input.foreground#b1c7cc
  • input.placeholderForeground#386e79
  • inputOption.activeBorder#bbd4be
  • list.activeSelectionBackground#bbd4be
  • list.activeSelectionForeground#1b353a
  • list.focusBackground#33656e
  • list.hoverBackground#203f44
  • list.inactiveSelectionBackground#1b353a
  • notification.background#23454b
  • notification.buttonBackground#43bdb2
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#b1c7cc
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#2b555d
  • panel.border#3b7580
  • panelTitle.activeBorder#43bdb2
  • panelTitle.inactiveForeground#57a2b1
  • peekView.border#43bdb2
  • peekViewEditor.background#15282c
  • peekViewEditor.matchHighlightBackground#bbd4be55
  • peekViewEditorGutter.background#182f33
  • peekViewResult.background#23454b
  • peekViewResult.fileForeground#a5bec4
  • peekViewResult.lineForeground#92b1b8
  • peekViewResult.matchHighlightBackground#bbd4be55
  • peekViewResult.selectionBackground#1e3b41
  • peekViewResult.selectionForeground#b1c7cc
  • peekViewTitle.background#182f33
  • peekViewTitleDescription.foreground#a8c0c6
  • peekViewTitleLabel.foreground#b1c7cc
  • progressBar.background#f9d6bc
  • scrollbar.shadow#0b1517
  • scrollbarSlider.activeBackground#43bdb2aa
  • scrollbarSlider.background#3b7580aa
  • scrollbarSlider.hoverBackground#43bdb255
  • sideBar.background#23454b
  • sideBar.foreground#b1c7cc
  • sideBarSectionHeader.background#284e56
  • sideBarSectionHeader.foreground#b1c7cc
  • statusBar.background#43bdb2
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#bbd4be
  • tab.inactiveBackground#214248
  • tab.inactiveForeground#68acb9
  • terminal.ansiBlack#23454b
  • terminal.ansiBlue#f9d6bc
  • terminal.ansiBrightBlack#3b7580
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#8ed7d1
  • terminal.ansiBrightGreen#8ed7d1
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#eff3f4
  • terminal.ansiBrightYellow#f9fcfa
  • terminal.ansiCyan#43bdb2
  • terminal.ansiGreen#43bdb2
  • terminal.ansiMagenta#f7a8a5
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#c0d2d6
  • terminal.ansiYellow#bbd4be
  • terminal.background#132529
  • terminal.foreground#b1c7cc
  • titleBar.activeBackground#15282c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b1c7cc
comment#3b6361
string#c5d671
constant.numeric#e4f279
constant.language#bbd4be
constant.character, constant.other#bbd4be
variable
keyword#f7a8a5
storage#bbd4be
storage.type#43bdb2
entity.name.class#bbd4beunderline
entity.other.inherited-class#bbd4be
entity.name.function#f9d6bc
variable.parameter#d2ecf2
entity.name.tag#43bdb2
entity.other.attribute-name#bbd4be
support.function#43bdb2
support.constant#bbd4be
support.type, support.class#bbd4be
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#c5d671
meta.diff, meta.diff.header#3b6361
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#589390
meta.property-value, support.constant.property-value, constant.other.color#c5d671
meta.structure.dictionary.json string.quoted.double.json#bbd4be
meta.structure.dictionary.value.json string.quoted.double.json#c5d671
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#b1c7cc
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#43bdb2
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#43bdb2normal
variable.other#d2ecf2normal
variable.parameter.function.coffee#e4f279
entity.name.section.markdown#bbd4be
punctuation.definition.heading.markdown#f7a8a5
markup.raw.inline.markdown#c5d671
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#f7a8a5
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#f7a8a5
punctuation.definition.metadata.markdown#f7a8a5
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#43bdb2
markup.bold.markdown, markup.italic.markdown#43bdb2
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#b1c7cc

Shiki preview

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

Loading...

Rainglow - Coding Theme