PastelPunk

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.activeBorder#459c8b
• activityBar.background#121c28
• activityBar.foreground#ddecff
• activityBarBadge.background#7ff9e4
• activityBarBadge.foreground#12171e
• badge.background#ff9a9a
• badge.foreground#12171e
• button.background#7ff9e4
• button.foreground#12171e
• button.hoverBackground#62dfc5
• button.secondaryBackground#ff9a9a
• button.secondaryForeground#12171e
• button.secondaryHoverBackground#ff6060
• checkbox.background#459c8b
• checkbox.border#ff9a9a
• descriptionForeground#b1c0d1
• editor.background#12171e
• editor.foreground#e0e6f1
• editor.lineHighlightBackground#2d3f55b9
• editor.selectionBackground#3a4f70d4
• editor.selectionHighlightBackground#507e96b4
• editor.selectionHighlightBorder#49667a
• editorBracketHighlight.foreground1#ff7e98
• editorBracketHighlight.foreground2#7ff9e4
• editorBracketHighlight.foreground3#ffcea1
• editorBracketHighlight.foreground4#aac8ff
• editorBracketHighlight.foreground5#91ffa6
• editorBracketHighlight.foreground6#ffc8a2
• editorBracketHighlight.unexpectedBracket.foreground#ff6767
• editorBracketMatch.background#3d617b
• editorBracketMatch.border#ffb1b166
• editorCursor.foreground#ff9a9a
• editorGroup.border#384959
• editorGroup.dropBackground#506a7a77
• editorGroupHeader.tabsBackground#1f3044
• editorGroupHeader.tabsBorder#526985
• editorGutter.background#1a2736
• editorLineNumber.activeForeground#f36969
• editorLineNumber.foreground#EFB495
• focusBorder#459c8b
• foreground#e0e6f1
• input.background#2d4355
• input.border#526985
• input.foreground#ffffff
• input.placeholderForeground#93a5b8
• list.activeSelectionBackground#3a4f70d4
• list.activeSelectionForeground#ffffff
• list.focusBackground#45638177
• list.focusForeground#ffffff
• list.highlightForeground#7ff9e4
• list.hoverBackground#2b3c50
• list.hoverForeground#ffffff
• list.inactiveSelectionBackground#2a3d55
• list.inactiveSelectionForeground#e0e6f1
• menu.background#12171e
• menu.foreground#e0e6f1
• menu.selectionBackground#3a4f70d4
• menu.selectionForeground#ffffff
• menu.separatorBackground#456381
• menubar.selectionBackground#3a4f70d4
• menubar.selectionForeground#ffffff
• notifications.background#12171e
• notifications.border#456381
• notifications.foreground#e0e6f1
• notificationsErrorIcon.foreground#ff6060
• notificationsInfoIcon.foreground#7ff9e4
• notificationsWarningIcon.foreground#ffce96
• panel.background#12171e
• panel.border#456381
• panelTitle.activeBorder#7ff9e4
• panelTitle.activeForeground#ff7e98
• panelTitle.inactiveForeground#a7bfd2
• pickerGroup.border#7ff9e4
• pickerGroup.foreground#ff7e98
• profileBadge.background#7ff9e4
• progressBar.background#ff9a9a
• quickInput.background#12171e
• quickInput.foreground#e0e6f1
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#459c8b
• scrollbarSlider.background#5b6c7e80
• scrollbarSlider.hoverBackground#6b8094bb
• settings.dropdownBackground#2d4355
• settings.dropdownForeground#e0e6f1
• settings.headerForeground#e0e6f1
• settings.modifiedItemIndicator#ff9a9a
• settings.numberInputBackground#2d4355
• settings.numberInputForeground#ffffff
• settings.textInputBackground#2d4355
• settings.textInputForeground#ffffff
• sideBar.background#10151e
• sideBar.border#456381
• sideBar.foreground#e0e6f1
• sideBarSectionHeader.background#1c2a3f
• sideBarSectionHeader.foreground#ddecff
• sideBarTitle.border#456381
• sideBarTitle.foreground#b9d9ff
• statusBar.background#1c2a3f
• statusBar.border#456381
• statusBar.foreground#b9d9ff
• statusBarItem.activeBackground#3a5873
• statusBarItem.hoverBackground#29415c
• statusBarItem.remoteBackground#459c8b
• statusBarItem.remoteHoverBackground#384959
• tab.activeBackground#202f47
• tab.activeBorder#7ff9e4
• tab.activeBorderTop#ff9a9a
• tab.activeForeground#ff7e98
• tab.border#7ff9e4
• tab.hoverForeground#ffc0e8
• tab.inactiveBackground#12171e
• tab.inactiveForeground#a7bfd2
• terminal.ansiBlack#252525
• terminal.ansiBlue#78aaff
• terminal.ansiBrightBlack#7c7c7c
• terminal.ansiBrightBlue#b5d7ff
• terminal.ansiBrightCyan#92fff5
• terminal.ansiBrightGreen#cfffcf
• terminal.ansiBrightMagenta#ffc5f5
• terminal.ansiBrightRed#ffc0c0
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#fff3d1
• terminal.ansiCyan#7beff4
• terminal.ansiGreen#afffa6
• terminal.ansiMagenta#ff9a9a
• terminal.ansiRed#ff6060
• terminal.ansiWhite#ffffff
• terminal.ansiYellow#ffeb9f
• terminal.background#12171e
• terminal.foreground#e0e6f1
• textLink.activeForeground#79ffe6
• textLink.foreground#24e4c1
• textSeparator.foreground#7ff9e4
• titleBar.activeBackground#12171e
• titleBar.activeForeground#e0f1ff
• titleBar.border#456381
• toolbar.activeBackground#507083
• toolbar.hoverBackground#3d5570
• welcomePage.background#12171e
• welcomePage.progress.background#384959
• welcomePage.progress.foreground#ff9a9a
• welcomePage.tileBackground#203049
• welcomePage.tileHoverBackground#2e4358

tokenColors

TextMate scopes and font styles (syntax highlighting rules).