Shadow Theme — VS Code Color & Icon Themes
Publisher: Raza RaheemThemes in package: 30
30 hand-crafted VS Code color themes — dark, light & OLED — plus 450+ file icons. Anime, minimal & pro styles with a built-in theme switcher.
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#181926
- activityBar.border#363A4F
- activityBar.foreground#CAD3F5
- activityBar.inactiveForeground#6E738D
- activityBarBadge.background#8AADF4
- activityBarBadge.foreground#24273A
- badge.background#8AADF4
- badge.foreground#24273A
- breadcrumb.activeSelectionForeground#CAD3F5
- breadcrumb.focusForeground#CAD3F5
- breadcrumb.foreground#6E738D
- button.background#8AADF4
- button.foreground#24273A
- button.hoverBackground#A0C0F8
- descriptionForeground#6E738D
- diffEditor.insertedLineBackground#283A28
- diffEditor.insertedTextBackground#A6DA9533
- diffEditor.modifiedTextBackground#363A4F
- diffEditor.removedLineBackground#3A2830
- diffEditor.removedTextBackground#ED879633
- dropdown.background#363A4F
- dropdown.border#363A4F
- dropdown.foreground#CAD3F5
- editor.background#24273A
- editor.findMatchBackground#F5A97F66
- editor.findMatchBorder#F5A97F
- editor.findMatchHighlightBackground#F5A97F33
- editor.foreground#CAD3F5
- editor.hoverHighlightBackground#494D6466
- editor.inactiveSelectionBackground#363A4F
- editor.lineHighlightBackground#2D3148
- editor.selectionBackground#494D64
- editor.selectionHighlightBackground#494D6466
- editor.wordHighlightBackground#494D6480
- editor.wordHighlightStrongBackground#494D64AA
- editorBracketHighlight.foreground1#8AADF4
- editorBracketHighlight.foreground2#C6A0F6
- editorBracketHighlight.foreground3#A6DA95
- editorBracketHighlight.foreground4#F5A97F
- editorBracketMatch.background#8AADF433
- editorBracketMatch.border#8AADF4
- editorCursor.foreground#F4DBD6
- editorError.foreground#ED8796
- editorGroup.border#363A4F
- editorGroupHeader.tabsBackground#1E2030
- editorGroupHeader.tabsBorder#363A4F
- editorGutter.addedBackground#A6DA95
- editorGutter.deletedBackground#ED8796
- editorGutter.modifiedBackground#EED49F
- editorHint.foreground#A6DA95
- editorIndentGuide.activeBackground1#6E738D
- editorIndentGuide.background1#363A4F
- editorInfo.foreground#8AADF4
- editorLineNumber.activeForeground#CAD3F5
- editorLineNumber.foreground#6E738D
- editorLink.activeForeground#8AADF4
- editorWarning.foreground#EED49F
- errorForeground#ED8796
- focusBorder#8AADF4
- foreground#CAD3F5
- gitDecoration.addedResourceForeground#A6DA95
- gitDecoration.deletedResourceForeground#ED8796
- gitDecoration.ignoredResourceForeground#6E738D
- gitDecoration.modifiedResourceForeground#EED49F
- gitDecoration.untrackedResourceForeground#6E738D
- icon.foreground#CAD3F5
- input.background#363A4F
- input.border#363A4F
- input.foreground#CAD3F5
- input.placeholderForeground#6E738D
- list.activeSelectionBackground#494D64
- list.activeSelectionForeground#CAD3F5
- list.deemphasizedForeground#939AB7
- list.focusOutline#8AADF4
- list.hoverBackground#2D3148
- list.hoverForeground#CAD3F5
- list.inactiveSelectionBackground#363A4F
- list.inactiveSelectionForeground#CAD3F5
- minimap.findMatchHighlight#F5A97F66
- minimap.selectionHighlight#494D64
- notificationCenterHeader.background#24273A
- notifications.background#1E2030
- notifications.border#363A4F
- notifications.foreground#CAD3F5
- panel.background#1E2030
- panel.border#363A4F
- panelTitle.activeForeground#CAD3F5
- panelTitle.inactiveForeground#6E738D
- peekView.border#8AADF4
- peekViewEditor.background#1E2030
- peekViewResult.background#1E2030
- peekViewTitle.background#24273A
- progressBar.background#8AADF4
- scrollbarSlider.activeBackground#FFFFFF44
- scrollbarSlider.background#FFFFFF22
- scrollbarSlider.hoverBackground#FFFFFF33
- sideBar.background#1E2030
- sideBar.border#363A4F
- sideBar.foreground#CAD3F5
- sideBarSectionHeader.background#24273A
- sideBarSectionHeader.foreground#CAD3F5
- sideBarTitle.foreground#CAD3F5
- statusBar.background#1E2030
- statusBar.border#363A4F
- statusBar.debuggingBackground#8AADF4
- statusBar.foreground#CAD3F5
- statusBar.noFolderBackground#1E2030
- tab.activeBackground#24273A
- tab.activeBorder#8AADF4
- tab.activeForeground#CAD3F5
- tab.border#363A4F
- tab.inactiveBackground#1E2030
- tab.inactiveForeground#A5ADCB
- terminal.ansiBlack#181926
- terminal.ansiBlue#8AADF4
- terminal.ansiBrightBlack#6E738D
- terminal.ansiBrightBlue#A8C8F8
- terminal.ansiBrightCyan#A8E8E0
- terminal.ansiBrightGreen#B8EAA8
- terminal.ansiBrightMagenta#D8B8F8
- terminal.ansiBrightRed#EE99A0
- terminal.ansiBrightWhite#E8EEFF
- terminal.ansiBrightYellow#F8E8B8
- terminal.ansiCyan#8BD5CA
- terminal.ansiGreen#A6DA95
- terminal.ansiMagenta#C6A0F6
- terminal.ansiRed#ED8796
- terminal.ansiWhite#CAD3F5
- terminal.ansiYellow#EED49F
- terminal.background#24273A
- terminal.foreground#CAD3F5
- titleBar.activeBackground#181926
- titleBar.activeForeground#CAD3F5
- titleBar.border#363A4F
- titleBar.inactiveBackground#181926
- titleBar.inactiveForeground#A5ADCB
- widget.shadow#00000040
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6E738D | italic |
| string, string.quoted, string.template | #A6DA95 | — |
| constant.numeric | #F5A97F | — |
| constant.language, constant.language.null | #F5A97F | — |
| keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator | #C6A0F6 | — |
| keyword.operator | #939AB7 | — |
| storage.type | #EED49F | — |
| constant.language.boolean | #F5A97F | — |
| string.regexp | #F5BDE6 | — |
| entity.name.function, support.function, meta.function-call | #8AADF4 | — |
| entity.name.type, entity.name.class, support.type, support.class | #EED49F | — |
| variable, variable.other, variable.parameter | #CAD3F5 | — |
| entity.name.tag, meta.tag | #C6A0F6 | — |
| entity.other.attribute-name | #EED49F | — |
| constant.character.escape | #8AADF4 | — |
| invalid, invalid.illegal | #ED8796 | — |
| markup.heading | #8AADF4 | bold |
| markup.bold | #CAD3F5 | bold |
| markup.italic | #C6A0F6 | italic |
| markup.underline.link, string.other.link | #8AADF4 | — |
| markup.inline.raw, markup.fenced_code | #F5A97F | — |
| markup.fenced_code | — | — |
| markup.quote | #6E738D | italic |
| markup.list, punctuation.definition.list | #EED49F | — |
| markup.inserted | #A6DA95 | — |
| markup.deleted | #ED8796 | — |
| punctuation, meta.brace | #939AB7 | — |