Shadow Theme — VS Code Color & Icon Themes

Color themes

• 

  Shadow Theme OLED Void

• 

  Shadow Theme Onyx

• 

  Shadow Theme Prism

• 

  Shadow Theme Sakura

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#000000
• activityBar.border#1A1A1E
• activityBar.foreground#C0C0C8
• activityBar.inactiveForeground#606068
• activityBarBadge.background#68A0D0
• activityBarBadge.foreground#000000
• badge.background#68A0D0
• badge.foreground#000000
• breadcrumb.activeSelectionForeground#C0C0C8
• breadcrumb.focusForeground#C0C0C8
• breadcrumb.foreground#606068
• button.background#68A0D0
• button.foreground#000000
• button.hoverBackground#80B0E0
• descriptionForeground#606068
• diffEditor.insertedLineBackground#50A8A833
• diffEditor.insertedTextBackground#50A8A833
• diffEditor.modifiedTextBackground#1A1A1E
• diffEditor.removedLineBackground#D0686833
• diffEditor.removedTextBackground#D0686833
• dropdown.background#121214
• dropdown.border#1A1A1E
• dropdown.foreground#C0C0C8
• editor.background#000000
• editor.findMatchBackground#D0885066
• editor.findMatchBorder#C09848
• editor.findMatchHighlightBackground#D0885033
• editor.foreground#C0C0C8
• editor.hoverHighlightBackground#1A1A1E66
• editor.inactiveSelectionBackground#121214
• editor.lineHighlightBackground#0A0A0C
• editor.selectionBackground#1A1A1E
• editor.selectionHighlightBackground#1A1A1E66
• editor.wordHighlightBackground#1A1A1E80
• editor.wordHighlightStrongBackground#1A1A1EAA
• editorBracketHighlight.foreground1#68A0D0
• editorBracketHighlight.foreground2#A888D0
• editorBracketHighlight.foreground3#88B088
• editorBracketHighlight.foreground4#D08850
• editorBracketMatch.background#68A0D033
• editorBracketMatch.border#68A0D0
• editorCursor.foreground#68A0D0
• editorError.foreground#D06868
• editorGroup.border#1A1A1E
• editorGroupHeader.tabsBackground#000000
• editorGroupHeader.tabsBorder#1A1A1E
• editorGutter.addedBackground#50A8A8
• editorGutter.deletedBackground#D06868
• editorGutter.modifiedBackground#C09848
• editorHint.foreground#50A8A8
• editorIndentGuide.activeBackground1#404048
• editorIndentGuide.background1#1A1A1E
• editorInfo.foreground#68A0D0
• editorLineNumber.activeForeground#C0C0C8
• editorLineNumber.foreground#606068
• editorLink.activeForeground#68A0D0
• editorWarning.foreground#C09848
• errorForeground#D06868
• focusBorder#68A0D0
• foreground#C0C0C8
• gitDecoration.addedResourceForeground#50A8A8
• gitDecoration.deletedResourceForeground#D06868
• gitDecoration.ignoredResourceForeground#606068
• gitDecoration.modifiedResourceForeground#C09848
• gitDecoration.untrackedResourceForeground#606068
• icon.foreground#C0C0C8
• input.background#121214
• input.border#1A1A1E
• input.foreground#C0C0C8
• input.placeholderForeground#606068
• list.activeSelectionBackground#1A1A1E
• list.activeSelectionForeground#C0C0C8
• list.deemphasizedForeground#808088
• list.focusOutline#68A0D0
• list.hoverBackground#0A0A0C
• list.hoverForeground#C0C0C8
• list.inactiveSelectionBackground#121214
• list.inactiveSelectionForeground#C0C0C8
• minimap.findMatchHighlight#D0885066
• minimap.selectionHighlight#1A1A1E
• notificationCenterHeader.background#0A0A0C
• notifications.background#0A0A0C
• notifications.border#1A1A1E
• notifications.foreground#C0C0C8
• panel.background#0A0A0C
• panel.border#1A1A1E
• panelTitle.activeForeground#C0C0C8
• panelTitle.inactiveForeground#606068
• peekView.border#68A0D0
• peekViewEditor.background#0A0A0C
• peekViewResult.background#000000
• peekViewTitle.background#0A0A0C
• progressBar.background#68A0D0
• scrollbarSlider.activeBackground#FFFFFF38
• scrollbarSlider.background#FFFFFF18
• scrollbarSlider.hoverBackground#FFFFFF28
• sideBar.background#000000
• sideBar.border#1A1A1E
• sideBar.foreground#C0C0C8
• sideBarSectionHeader.background#0A0A0C
• sideBarSectionHeader.foreground#C0C0C8
• sideBarTitle.foreground#C0C0C8
• statusBar.background#000000
• statusBar.border#1A1A1E
• statusBar.debuggingBackground#68A0D0
• statusBar.foreground#C0C0C8
• statusBar.noFolderBackground#000000
• tab.activeBackground#0A0A0C
• tab.activeBorder#68A0D0
• tab.activeForeground#C0C0C8
• tab.border#1A1A1E
• tab.inactiveBackground#000000
• tab.inactiveForeground#606068
• terminal.ansiBlack#000000
• terminal.ansiBlue#68A0D0
• terminal.ansiBrightBlack#606068
• terminal.ansiBrightBlue#80B0E0
• terminal.ansiBrightCyan#60C0C0
• terminal.ansiBrightGreen#A0C8A0
• terminal.ansiBrightMagenta#B898E8
• terminal.ansiBrightRed#E08080
• terminal.ansiBrightWhite#D8D8E0
• terminal.ansiBrightYellow#E0A060
• terminal.ansiCyan#50A8A8
• terminal.ansiGreen#88B088
• terminal.ansiMagenta#A888D0
• terminal.ansiRed#D06868
• terminal.ansiWhite#C0C0C8
• terminal.ansiYellow#D08850
• terminal.background#000000
• terminal.foreground#C0C0C8
• titleBar.activeBackground#000000
• titleBar.activeForeground#C0C0C8
• titleBar.border#1A1A1E
• titleBar.inactiveBackground#000000
• titleBar.inactiveForeground#606068
• widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).