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#011627
  • activityBar.border#219fd544
  • activityBar.foreground#99d0f7
  • activityBarBadge.background#219fd5
  • activityBarBadge.foreground#ffffff
  • badge.background#219fd5
  • badge.foreground#ffffff
  • button.background#03648a
  • button.foreground#ffffff
  • button.hoverBackground#219fd5
  • contrastActiveBorder#122d42
  • contrastBorder#122d42
  • debugExceptionWidget.background#011627
  • debugToolBar.background#022846
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • editor.background#011627
  • editor.findMatchHighlightBackground#1033627f
  • editor.foreground#a7dbf7
  • editor.hoverHighlightBackground#0c49947f
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0c499477
  • editor.rangeHighlightBackground#1033627f
  • editor.selectionBackground#103362
  • editor.selectionHighlightBackground#1033627f
  • editor.wordHighlightBackground#1033627f
  • editor.wordHighlightStrongBackground#1033627f
  • editorBracketMatch.background#219fd54d
  • editorCursor.foreground#219fd5
  • editorError.foreground#ef5350
  • editorGroup.border#219fd544
  • editorGroupHeader.tabsBackground#011627
  • editorGutter.background#011627
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground1#C792EA
  • editorIndentGuide.background1#0e2c45
  • editorLineNumber.foreground#219fd5
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#0b2942
  • editorWidget.border#262A39
  • errorForeground#EF5350
  • foreground#d6deeb
  • gitDecoration.modifiedResourceForeground#219fd5
  • gitDecoration.untrackedResourceForeground#5ABEB0
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBackground#ef5350
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#219fd5
  • inputValidation.infoBorder#219fd5
  • inputValidation.warningBackground#f7ecb5
  • inputValidation.warningBorder#f7ecb5
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#219fd5
  • list.dropBackground#011627
  • list.focusBackground#03648a
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#011627
  • list.hoverForeground#219fd5
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • notificationLink.foreground#80CBC4
  • notifications.background#011627
  • notifications.foreground#ffffffcc
  • notificationToast.border#219fd544
  • panel.background#011627
  • panel.border#219fd5
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#219fd5
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#f7ecb5
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#011627
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#011627
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#219fd544
  • quickInputList.focusBackground#219fd5
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • sideBar.background#011627
  • sideBar.border#219fd544
  • sideBar.foreground#7799bb
  • sideBarSectionHeader.background#011627
  • sideBarSectionHeader.foreground#7799bb
  • sideBarTitle.foreground#7799bb
  • statusBar.background#219fd5
  • statusBar.debuggingBackground#b15a91
  • statusBar.noFolderBackground#011627
  • statusBarItem.activeBackground#03648a
  • statusBarItem.hoverBackground#03648a
  • statusBarItem.prominentBackground#03648a
  • statusBarItem.prominentHoverBackground#03648a
  • tab.activeBackground#0b2942
  • tab.activeBorderTop#219fd5
  • tab.activeForeground#d2dee7
  • tab.inactiveBackground#010e1a
  • tab.inactiveForeground#5f7e97
  • terminal.ansiBlack#011627
  • textLink.activeForeground#98c8ed
  • textLink.foreground#219fd5
  • titleBar.activeBackground#112233
  • titleBar.activeForeground#eeefff
  • titleBar.border#303030
  • titleBar.inactiveBackground#000a11
  • walkThrough.embeddedEditorBackground#001111
  • widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bce7ff
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF
markup.quote.markdown#82AAFF
markup.bold.markdown, punctuation.definition.bold.markdown#57cdffbold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EAitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f7ecb5
punctuation.definition.metadata.markdown#f3b8c2
markup.underline.link.image.markdown, markup.underline.link.markdown#6dbdfa
comment#999999
string#d69d85
string.quoted#ffd68f
constant.character.escape#ffeccc
constant.numeric#b5cea8
constant.language.boolean#c9ffab
constant#dcdcdc
constant.language, punctuation.definition.constant#c0c0dc
constant.character#ff8754
constant.other#9cdcfeitalic
variable#9cdcfe
variable.other.object.property#b4d2ff
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#b4c8ff
variable.parameter#78b4ff
variable.other.constant#c0dcdc
entity.name.function.preprocessor#6ec0ffitalic
storage#7878ffbold
storage.type, storage.modifier#50c0ffbold
keyword, variable.language.this#00a0ff
keyword.operator#ffffdc
entity.name.tag#60ffdf
entity.name.namespace#86c5b8
entity.name.type#4ec9b0
entity.name.type.class#4ec9b0
entity.name.type.enum#4ec985
entity.name.type.struct#4ec95e
entity.name.type.interface#75c94e
variable.other.event#94c94e
entity.name.function#dcdcaa
entity.other#aec94e
punctuation.definition.tag#ffffff
punctuation.definition.block#acbbff
punctuation.definition.string#beacff
punctuation.decorator#daacff
support.variable#60c7ff
support.function#dada6f
support.constant#dbb8b8
support.type#1cc9a6
support.class#00c9a1
support.other.variable#97dada
invalid#fa6d84bold underline
invalid.deprecated#fa6d97 bold underline
markup.list#6dbdfa
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78bd65
meta.paragraph.markdown#ffffff
markup.quote#78bd65
meta.link#78BD65
source.dockerfile#99d0f7

Shiki preview

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

Loading...

Rain Theme - Coding Theme