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#879bb0
  • activityBar.foreground#f5f8fc
  • activityBarBadge.background#a8c0e0
  • activityBarBadge.foreground#ffffff
  • badge.background#a8c0e0
  • badge.foreground#ffffff
  • button.background#355b8c
  • button.foreground#ffffff
  • dropdown.background#edf3fa
  • dropdown.border#edf3fa
  • dropdown.foreground#879bb0
  • editor.background#f5f8fc
  • editor.foreground#879bb0
  • editor.hoverHighlightBackground#a8c0e022
  • editor.lineHighlightBackground#e9f0f8
  • editor.selectionBackground#355b8c33
  • editor.wordHighlightBackground#e3bd1422
  • editor.wordHighlightStrongBackground#355b8c22
  • editorBracketMatch.background#a8c0e044
  • editorBracketMatch.border#355b8c
  • editorCursor.foreground#444444
  • editorGroup.background#e9f0f8
  • editorGroupHeader.tabsBackground#e9f0f8
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#edf3fa
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#ceddf0
  • editorLineNumber.foreground#a7c1e4
  • editorLink.activeForeground#a8c0e0
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#355b8c55
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#ceddf0
  • editorSuggestWidget.foreground#879bb0
  • editorSuggestWidget.highlightForeground#a8c0e0
  • editorSuggestWidget.selectedBackground#bacfea
  • editorWhitespace.foreground#ceddf0
  • editorWidget.background#e1eaf6
  • editorWidget.border#a7c1e4
  • extensionButton.prominentBackground#a8c0e0
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#cedbed
  • focusBorder#a8c0e0
  • foreground#879bb0
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#6c98d3
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#a8c0e0
  • input.background#f5f8fc
  • input.border#588acd
  • input.foreground#879bb0
  • input.placeholderForeground#a7c1e4
  • inputOption.activeBorder#355b8c
  • list.activeSelectionBackground#355b8c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#bacfea
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#f5f8fc
  • notification.background#bacfea
  • notification.buttonBackground#a8c0e0
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#879bb0
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#e5edf7
  • panel.border#c6d7ee
  • panelTitle.activeBorder#a8c0e0
  • panelTitle.activeForeground#3264a7
  • panelTitle.inactiveForeground#93b3df
  • peekView.border#a8c0e0
  • peekViewEditor.background#edf3fa
  • peekViewEditor.matchHighlightBackground#355b8c55
  • peekViewEditorGutter.background#dde8f5
  • peekViewResult.background#e1eaf6
  • peekViewResult.fileForeground#96a8ba
  • peekViewResult.lineForeground#d4dbe3
  • peekViewResult.matchHighlightBackground#355b8c55
  • peekViewResult.selectionBackground#fdfdfe
  • peekViewResult.selectionForeground#96a8ba
  • peekViewTitle.background#edf3fa
  • peekViewTitleDescription.foreground#7e93aa
  • peekViewTitleLabel.foreground#879bb0
  • progressBar.background#e3bd14
  • scrollbar.shadow#588acd
  • scrollbarSlider.activeBackground#a8c0e0aa
  • scrollbarSlider.background#879bb035
  • scrollbarSlider.hoverBackground#a8c0e055
  • sideBar.background#e1eaf6
  • sideBar.foreground#879bb0
  • sideBarSectionHeader.background#bacfea
  • sideBarSectionHeader.foreground#879bb0
  • statusBar.background#a8c0e0
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#355b8c
  • tab.activeForeground#879bb0
  • tab.border#c6d7ee
  • tab.inactiveBackground#e5edf7
  • tab.inactiveForeground#ffffff
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#e3bd14
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#f2d96b
  • terminal.ansiBrightCyan#ed9c91
  • terminal.ansiBrightGreen#f3f6fb
  • terminal.ansiBrightMagenta#b9c0c9
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#c5ced8
  • terminal.ansiBrightYellow#638dc4
  • terminal.ansiCyan#de4d3a
  • terminal.ansiGreen#a8c0e0
  • terminal.ansiMagenta#808c9c
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#96a8ba
  • terminal.ansiYellow#355b8c
  • terminal.background#f5f8fc
  • terminal.foreground#879bb0
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#879bb0
  • widget.shadow#a7c1e455

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#879bb0
comment#bbbbbb
string#e3bd14
constant.numeric#de4d3a
constant.language#355b8c
constant.character, constant.other#355b8c
variable
keyword#808c9c
storage#355b8c
storage.type#a8c0e0
entity.name.class#355b8cunderline
entity.other.inherited-class#355b8c
entity.name.function#e3bd14
variable.parameter#879bb0
entity.name.tag#a8c0e0
entity.other.attribute-name#355b8c
support.function#de4d3a
support.constant#355b8c
support.type, support.class#355b8c
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#e3bd14
meta.diff, meta.diff.header#bbbbbb
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#959595
meta.property-value, support.constant.property-value, constant.other.color#e3bd14
meta.structure.dictionary.json string.quoted.double.json#355b8c
meta.structure.dictionary.value.json string.quoted.double.json#e3bd14
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#879bb0
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#a8c0e0
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#a8c0e0normal
variable.other#879bb0normal
variable.parameter.function.coffee#de4d3a
entity.name.section.markdown#355b8c
punctuation.definition.heading.markdown#808c9c
markup.raw.inline.markdown#e3bd14
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#808c9c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#808c9c
punctuation.definition.metadata.markdown#808c9c
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#a8c0e0
markup.bold.markdown, markup.italic.markdown#a8c0e0
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#879bb0

Shiki preview

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

Loading...

Rainglow - Coding Theme