Shadow Theme — VS Code Color & Icon Themes

Color themes

• 

  Shadow Theme Velvet

• 

  Shadow Theme Water

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#08101A
• activityBar.border#1A2C3E
• activityBar.foreground#C8DFF0
• activityBar.inactiveForeground#4D6878
• activityBarBadge.background#45C9E0
• activityBarBadge.foreground#0C1420
• badge.background#45C9E0
• badge.foreground#0C1420
• breadcrumb.activeSelectionForeground#C8DFF0
• breadcrumb.focusForeground#C8DFF0
• breadcrumb.foreground#4D6878
• button.background#45C9E0
• button.foreground#0C1420
• button.hoverBackground#7ADCEC
• descriptionForeground#4D6878
• diffEditor.insertedLineBackground#0E2A1A
• diffEditor.insertedTextBackground#5EC48A33
• diffEditor.modifiedTextBackground#0E2038
• diffEditor.removedLineBackground#2A0E18
• diffEditor.removedTextBackground#FF6B7833
• dropdown.background#111C2A
• dropdown.border#1A2C3E
• dropdown.foreground#C8DFF0
• editor.background#0C1420
• editor.findMatchBackground#D8A05055
• editor.findMatchBorder#D8A050
• editor.findMatchHighlightBackground#D8A05033
• editor.foreground#C8DFF0
• editor.hoverHighlightBackground#1A355055
• editor.inactiveSelectionBackground#142840
• editor.lineHighlightBackground#111C2A
• editor.selectionBackground#1A3550
• editor.selectionHighlightBackground#1A355055
• editor.wordHighlightBackground#1A355066
• editor.wordHighlightStrongBackground#1A355099
• editorBracketHighlight.foreground1#45C9E0
• editorBracketHighlight.foreground2#D8A050
• editorBracketHighlight.foreground3#3EB8D8
• editorBracketHighlight.foreground4#62E8F5
• editorBracketMatch.background#45C9E033
• editorBracketMatch.border#45C9E0
• editorCursor.foreground#45C9E0
• editorError.foreground#FF6B78
• editorGroup.border#1A2C3E
• editorGroupHeader.tabsBackground#0A111B
• editorGroupHeader.tabsBorder#1A2C3E
• editorGutter.addedBackground#5EC48A
• editorGutter.deletedBackground#FF6B78
• editorGutter.modifiedBackground#D8A050
• editorHint.foreground#5EC48A
• editorIndentGuide.activeBackground1#2E4A60
• editorIndentGuide.background1#1A2C3E
• editorInfo.foreground#45C9E0
• editorLineNumber.activeForeground#C8DFF0
• editorLineNumber.foreground#4D6878
• editorLink.activeForeground#62E8F5
• editorWarning.foreground#D8A050
• errorForeground#FF6B78
• focusBorder#45C9E0
• foreground#C8DFF0
• gitDecoration.addedResourceForeground#5EC48A
• gitDecoration.deletedResourceForeground#FF6B78
• gitDecoration.ignoredResourceForeground#4D6878
• gitDecoration.modifiedResourceForeground#D8A050
• gitDecoration.untrackedResourceForeground#6888A0
• icon.foreground#C8DFF0
• input.background#111C2A
• input.border#1A2C3E
• input.foreground#C8DFF0
• input.placeholderForeground#4D6878
• list.activeSelectionBackground#1A3550
• list.activeSelectionForeground#C8DFF0
• list.deemphasizedForeground#7A98B0
• list.focusOutline#45C9E0
• list.hoverBackground#111C2A
• list.hoverForeground#C8DFF0
• list.inactiveSelectionBackground#142840
• list.inactiveSelectionForeground#C8DFF0
• minimap.findMatchHighlight#D8A05055
• minimap.selectionHighlight#1A3550
• notificationCenterHeader.background#0C1420
• notifications.background#0A111B
• notifications.border#1A2C3E
• notifications.foreground#C8DFF0
• panel.background#0A111B
• panel.border#1A2C3E
• panelTitle.activeForeground#C8DFF0
• panelTitle.inactiveForeground#4D6878
• peekView.border#45C9E0
• peekViewEditor.background#0A111B
• peekViewResult.background#0A111B
• peekViewTitle.background#0C1420
• progressBar.background#45C9E0
• scrollbarSlider.activeBackground#4A6878
• scrollbarSlider.background#2A4050
• scrollbarSlider.hoverBackground#3A5868
• sideBar.background#0A111B
• sideBar.border#1A2C3E
• sideBar.foreground#C8DFF0
• sideBarSectionHeader.background#0C1420
• sideBarSectionHeader.foreground#C8DFF0
• sideBarTitle.foreground#C8DFF0
• statusBar.background#0A111B
• statusBar.border#1A2C3E
• statusBar.debuggingBackground#45C9E0
• statusBar.foreground#C8DFF0
• statusBar.noFolderBackground#0A111B
• tab.activeBackground#0C1420
• tab.activeBorder#45C9E0
• tab.activeForeground#C8DFF0
• tab.border#1A2C3E
• tab.inactiveBackground#0A111B
• tab.inactiveForeground#7A98B0
• terminal.ansiBlack#0C1420
• terminal.ansiBlue#3EB8D8
• terminal.ansiBrightBlack#4D6878
• terminal.ansiBrightBlue#58C8E8
• terminal.ansiBrightCyan#80F0F8
• terminal.ansiBrightGreen#78D8A0
• terminal.ansiBrightMagenta#88A8D0
• terminal.ansiBrightRed#FF8898
• terminal.ansiBrightWhite#E0EFFA
• terminal.ansiBrightYellow#E8B870
• terminal.ansiCyan#45C9E0
• terminal.ansiGreen#5EC48A
• terminal.ansiMagenta#6888B8
• terminal.ansiRed#FF6B78
• terminal.ansiWhite#C8DFF0
• terminal.ansiYellow#D8A050
• terminal.background#0C1420
• terminal.foreground#C8DFF0
• titleBar.activeBackground#0A1420
• titleBar.activeForeground#C8DFF0
• titleBar.border#1A2C3E
• titleBar.inactiveBackground#0A1420
• titleBar.inactiveForeground#7A98B0
• widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).