Colortastic

Color themes

• 

  Colortastic Dark

• 

  Colortastic Light

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#FF66B2
• activityBar.border#E64D99
• activityBar.foreground#00E5FF
• activityBar.inactiveForeground#99FFFF
• activityBarBadge.background#00E5FF
• activityBarBadge.foreground#003344
• badge.background#FF007F
• badge.foreground#FFFFFF
• button.background#FF007F
• button.foreground#FFFFFF
• button.hoverBackground#D00068
• button.secondaryBackground#8000E0
• button.secondaryForeground#FFFFFF
• descriptionForeground#702080
• disabledForeground#A078A8
• dropdown.background#FFF6EC
• dropdown.border#FF007F
• dropdown.foreground#200830
• editor.background#FFF6EC
• editor.findMatchBackground#FFD00088
• editor.findMatchHighlightBackground#FFD00044
• editor.foreground#200830
• editor.inactiveSelectionBackground#FFD00033
• editor.lineHighlightBackground#FFEAD8
• editor.selectionBackground#FF007F3B
• editor.selectionHighlightBackground#00E0D033
• editor.wordHighlightBackground#30E03033
• editor.wordHighlightStrongBackground#FF007F44
• editorBracketMatch.background#00E0FF44
• editorBracketMatch.border#00B0E0
• editorCursor.foreground#FF007F
• editorGroupHeader.tabsBackground#FFE2EC
• editorGroupHeader.tabsBorder#FFB3D1
• editorIndentGuide.activeBackground1#FF007FCC
• editorIndentGuide.background1#FF007F22
• editorLineNumber.activeForeground#FF007F
• editorLineNumber.dimmedForeground#E090B0
• editorLineNumber.foreground#D070A0
• editorWhitespace.foreground#FF007F33
• errorForeground#FF0033
• focusBorder#FF007F
• foreground#200830
• input.background#FFF6EC
• input.border#FF007F
• input.foreground#200830
• input.placeholderForeground#C07090
• list.activeSelectionBackground#F0A3C455
• list.activeSelectionForeground#E02B7B
• list.focusBackground#F0A3C477
• list.highlightForeground#E02B7B
• list.hoverBackground#CEF0DD
• panel.background#FFF6EC
• panel.border#FFB3D1
• panelTitle.activeBorder#FF007F
• panelTitle.activeForeground#FF007F
• panelTitle.inactiveForeground#800050
• selection.background#FF007F44
• sideBar.background#E2F7EB
• sideBar.border#BCE3CB
• sideBar.foreground#200830
• sideBarSectionHeader.background#CEF0DD
• sideBarSectionHeader.border#BCE3CB
• sideBarSectionHeader.foreground#E02B7B
• sideBarTitle.foreground#E02B7B
• statusBar.background#00C8B4
• statusBar.border#00B0A0
• statusBar.foreground#FFFFFF
• statusBar.noFolderBackground#00C8B4
• statusBarItem.remoteBackground#9000E0
• statusBarItem.remoteForeground#FFFFFF
• tab.activeBackground#FFF6EC
• tab.activeBorderTop#FF007F
• tab.activeForeground#FF007F
• tab.border#FFB3D1
• tab.inactiveBackground#FFD0E0
• tab.inactiveForeground#800050
• terminal.ansiBlack#200830
• terminal.ansiBlue#0070F0
• terminal.ansiBrightBlack#603070
• terminal.ansiBrightBlue#3090FF
• terminal.ansiBrightCyan#00E0FF
• terminal.ansiBrightGreen#00E040
• terminal.ansiBrightMagenta#FF40B0
• terminal.ansiBrightRed#FF3060
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#FFD000
• terminal.ansiCyan#00B0D0
• terminal.ansiGreen#00B030
• terminal.ansiMagenta#FF007F
• terminal.ansiRed#FF0033
• terminal.ansiWhite#FFFFFF
• terminal.ansiYellow#E08000
• terminal.background#FFF6EC
• terminal.foreground#200830
• titleBar.activeBackground#FFE2EC
• titleBar.activeForeground#200830
• titleBar.border#FFB3D1
• titleBar.inactiveBackground#FFD0E0
• titleBar.inactiveForeground#800050
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).