Shadow Theme — VS Code Color & Icon Themes

Color themes

• 

  Shadow Theme Catppuccin Latte

• 

  Shadow Theme Catppuccin Macchiato

• 

  Shadow Theme Catppuccin Mocha

• 

  Shadow Theme Dusk

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#DCE0E8
• activityBar.border#CCD0DA
• activityBar.foreground#4C4F69
• activityBar.inactiveForeground#9CA0B0
• activityBarBadge.background#1E66F5
• activityBarBadge.foreground#EFF1F5
• badge.background#1E66F5
• badge.foreground#EFF1F5
• breadcrumb.activeSelectionForeground#4C4F69
• breadcrumb.focusForeground#4C4F69
• breadcrumb.foreground#9CA0B0
• button.background#1E66F5
• button.foreground#EFF1F5
• button.hoverBackground#3670E0
• descriptionForeground#9CA0B0
• diffEditor.insertedLineBackground#E8F5E6
• diffEditor.insertedTextBackground#40A02B33
• diffEditor.modifiedTextBackground#E6E9EF
• diffEditor.removedLineBackground#FCE8EC
• diffEditor.removedTextBackground#D20F3933
• dropdown.background#FFFFFF
• dropdown.border#CCD0DA
• dropdown.foreground#4C4F69
• editor.background#EFF1F5
• editor.findMatchBackground#FE640B66
• editor.findMatchBorder#FE640B
• editor.findMatchHighlightBackground#FE640B33
• editor.foreground#4C4F69
• editor.hoverHighlightBackground#BCC0CC66
• editor.inactiveSelectionBackground#CCD0DA
• editor.lineHighlightBackground#E6E9EF
• editor.selectionBackground#BCC0CC
• editor.selectionHighlightBackground#BCC0CC66
• editor.wordHighlightBackground#BCC0CC80
• editor.wordHighlightStrongBackground#BCC0CCAA
• editorBracketHighlight.foreground1#1E66F5
• editorBracketHighlight.foreground2#8839EF
• editorBracketHighlight.foreground3#40A02B
• editorBracketHighlight.foreground4#FE640B
• editorBracketMatch.background#1E66F533
• editorBracketMatch.border#1E66F5
• editorCursor.foreground#8839EF
• editorError.foreground#D20F39
• editorGroup.border#CCD0DA
• editorGroupHeader.tabsBackground#E6E9EF
• editorGroupHeader.tabsBorder#CCD0DA
• editorGutter.addedBackground#40A02B
• editorGutter.deletedBackground#D20F39
• editorGutter.modifiedBackground#DF8E1D
• editorHint.foreground#40A02B
• editorIndentGuide.activeBackground1#9CA0B0
• editorIndentGuide.background1#CCD0DA
• editorInfo.foreground#1E66F5
• editorLineNumber.activeForeground#4C4F69
• editorLineNumber.foreground#9CA0B0
• editorLink.activeForeground#1E66F5
• editorWarning.foreground#DF8E1D
• errorForeground#D20F39
• focusBorder#1E66F5
• foreground#4C4F69
• gitDecoration.addedResourceForeground#40A02B
• gitDecoration.deletedResourceForeground#D20F39
• gitDecoration.ignoredResourceForeground#9CA0B0
• gitDecoration.modifiedResourceForeground#DF8E1D
• gitDecoration.untrackedResourceForeground#9CA0B0
• icon.foreground#4C4F69
• input.background#FFFFFF
• input.border#CCD0DA
• input.foreground#4C4F69
• input.placeholderForeground#9CA0B0
• list.activeSelectionBackground#BCC0CC
• list.activeSelectionForeground#4C4F69
• list.deemphasizedForeground#7C7F93
• list.focusOutline#1E66F5
• list.hoverBackground#E6E9EF
• list.hoverForeground#4C4F69
• list.inactiveSelectionBackground#CCD0DA
• list.inactiveSelectionForeground#4C4F69
• minimap.findMatchHighlight#FE640B66
• minimap.selectionHighlight#BCC0CC
• notificationCenterHeader.background#EFF1F5
• notifications.background#E6E9EF
• notifications.border#CCD0DA
• notifications.foreground#4C4F69
• panel.background#E6E9EF
• panel.border#CCD0DA
• panelTitle.activeForeground#4C4F69
• panelTitle.inactiveForeground#9CA0B0
• peekView.border#1E66F5
• peekViewEditor.background#E6E9EF
• peekViewResult.background#E6E9EF
• peekViewTitle.background#EFF1F5
• progressBar.background#1E66F5
• scrollbarSlider.activeBackground#00000044
• scrollbarSlider.background#00000022
• scrollbarSlider.hoverBackground#00000033
• sideBar.background#E6E9EF
• sideBar.border#CCD0DA
• sideBar.foreground#4C4F69
• sideBarSectionHeader.background#EFF1F5
• sideBarSectionHeader.foreground#4C4F69
• sideBarTitle.foreground#4C4F69
• statusBar.background#E6E9EF
• statusBar.border#CCD0DA
• statusBar.debuggingBackground#1E66F5
• statusBar.foreground#4C4F69
• statusBar.noFolderBackground#E6E9EF
• tab.activeBackground#EFF1F5
• tab.activeBorder#1E66F5
• tab.activeForeground#4C4F69
• tab.border#CCD0DA
• tab.inactiveBackground#E6E9EF
• tab.inactiveForeground#6C6F85
• terminal.ansiBlack#4C4F69
• terminal.ansiBlue#1E66F5
• terminal.ansiBrightBlack#9CA0B0
• terminal.ansiBrightBlue#3670E0
• terminal.ansiBrightCyan#20A0A8
• terminal.ansiBrightGreen#50B040
• terminal.ansiBrightMagenta#9A50F0
• terminal.ansiBrightRed#E64553
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#F0A030
• terminal.ansiCyan#179299
• terminal.ansiGreen#40A02B
• terminal.ansiMagenta#8839EF
• terminal.ansiRed#D20F39
• terminal.ansiWhite#EFF1F5
• terminal.ansiYellow#DF8E1D
• terminal.background#EFF1F5
• terminal.foreground#4C4F69
• titleBar.activeBackground#DCE0E8
• titleBar.activeForeground#4C4F69
• titleBar.border#CCD0DA
• titleBar.inactiveBackground#DCE0E8
• titleBar.inactiveForeground#6C6F85
• widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).