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#191d22
  • activityBar.foreground#dce2e8
  • activityBarBadge.background#a8c0e0
  • activityBarBadge.foreground#ffffff
  • badge.background#a8c0e0
  • badge.foreground#ffffff
  • button.background#507db7
  • button.foreground#ffffff
  • dropdown.background#111316
  • dropdown.border#111316
  • dropdown.foreground#dce2e8
  • editor.background#15181c
  • editor.foreground#dce2e8
  • editor.hoverHighlightBackground#a8c0e022
  • editor.lineHighlightBackground#1c1f25
  • editor.selectionBackground#355b8c55
  • editor.wordHighlightBackground#e3bd1422
  • editor.wordHighlightStrongBackground#507db722
  • editorBracketMatch.background#a8c0e044
  • editorBracketMatch.border#507db7
  • editorCursor.foreground#ffffff
  • editorGroup.background#1c1f25
  • editorGroupHeader.tabsBackground#1c1f25
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#111316
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#2b3139
  • editorLineNumber.foreground#414a56
  • editorLink.activeForeground#a8c0e0
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#507db755
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#2b3139
  • editorSuggestWidget.foreground#dce2e8
  • editorSuggestWidget.highlightForeground#a8c0e0
  • editorSuggestWidget.selectedBackground#414a56
  • editorWhitespace.foreground#2b3139
  • editorWidget.background#2b3139
  • editorWidget.border#414a56
  • extensionButton.prominentBackground#a8c0e0
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#cedbed
  • focusBorder#a8c0e0
  • foreground#dce2e8
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#576373
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#a8c0e0
  • input.background#0a0b0d
  • input.border#363d48
  • input.foreground#dce2e8
  • input.placeholderForeground#3c4550
  • inputOption.activeBorder#507db7
  • list.activeSelectionBackground#507db7
  • list.activeSelectionForeground#15181c
  • list.focusBackground#363d48
  • list.hoverBackground#1c1f25
  • list.inactiveSelectionBackground#15181c
  • notification.background#20242b
  • notification.buttonBackground#a8c0e0
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#dce2e8
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#2b3139
  • panel.border#414a56
  • panelTitle.activeBorder#a8c0e0
  • panelTitle.inactiveForeground#616f82
  • peekView.border#a8c0e0
  • peekViewEditor.background#0c0e10
  • peekViewEditor.matchHighlightBackground#507db755
  • peekViewEditorGutter.background#111316
  • peekViewResult.background#20242b
  • peekViewResult.fileForeground#d0d8e0
  • peekViewResult.lineForeground#bdc8d4
  • peekViewResult.matchHighlightBackground#507db755
  • peekViewResult.selectionBackground#191d22
  • peekViewResult.selectionForeground#dce2e8
  • peekViewTitle.background#111316
  • peekViewTitleDescription.foreground#d3dae2
  • peekViewTitleLabel.foreground#dce2e8
  • progressBar.background#e3bd14
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#a8c0e0aa
  • scrollbarSlider.background#414a56aa
  • scrollbarSlider.hoverBackground#a8c0e055
  • sideBar.background#20242b
  • sideBar.foreground#dce2e8
  • sideBarSectionHeader.background#262c33
  • sideBarSectionHeader.foreground#dce2e8
  • statusBar.background#a8c0e0
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#507db7
  • tab.inactiveBackground#1e2228
  • tab.inactiveForeground#6c7c91
  • terminal.ansiBlack#20242b
  • terminal.ansiBlue#e3bd14
  • terminal.ansiBrightBlack#414a56
  • terminal.ansiBrightBlue#f2d96b
  • terminal.ansiBrightCyan#ed9c91
  • terminal.ansiBrightGreen#f3f6fb
  • terminal.ansiBrightMagenta#f0f2f5
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#98b3d5
  • terminal.ansiCyan#de4d3a
  • terminal.ansiGreen#a8c0e0
  • terminal.ansiMagenta#b3becc
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#ebeff2
  • terminal.ansiYellow#507db7
  • terminal.background#0a0b0d
  • terminal.foreground#dce2e8
  • titleBar.activeBackground#0c0e10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#dce2e8
comment#728496
string#e3bd14
constant.numeric#de4d3a
constant.language#507db7
constant.character, constant.other#507db7
variable
keyword#b3becc
storage#507db7
storage.type#a8c0e0
entity.name.class#507db7underline
entity.other.inherited-class#507db7
entity.name.function#e3bd14
variable.parameter#dce2e8
entity.name.tag#a8c0e0
entity.other.attribute-name#507db7
support.function#de4d3a
support.constant#507db7
support.type, support.class#507db7
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#e3bd14
meta.diff, meta.diff.header#728496
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#9eaab7
meta.property-value, support.constant.property-value, constant.other.color#e3bd14
meta.structure.dictionary.json string.quoted.double.json#507db7
meta.structure.dictionary.value.json string.quoted.double.json#e3bd14
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#dce2e8
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#dce2e8normal
variable.parameter.function.coffee#de4d3a
entity.name.section.markdown#507db7
punctuation.definition.heading.markdown#b3becc
markup.raw.inline.markdown#e3bd14
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#b3becc
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#b3becc
punctuation.definition.metadata.markdown#b3becc
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#dce2e8

Shiki preview

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

Loading...

Rainglow - Coding Theme