Colin's VS Code Themes

Color themes

• 

  Cherry Cola

• 

  Cotton Candy Terminal

• 

  Cyber Grape

• 

  Cyber Runner

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#ff9de2
• activityBar.background#171b38
• activityBar.foreground#f7eaff
• activityBar.inactiveForeground#9aa4d8
• activityBarBadge.background#ff9de2
• activityBarBadge.foreground#0d1024
• badge.background#ff9de2
• badge.foreground#0d1024
• breadcrumb.activeSelectionForeground#ff9de2
• breadcrumb.background#0d1024
• breadcrumb.focusForeground#f7eaff
• breadcrumb.foreground#9aa4d8
• button.background#ff9de2
• button.foreground#0d1024
• button.hoverBackground#fff0a6
• button.secondaryBackground#252b55
• button.secondaryForeground#f7eaff
• button.secondaryHoverBackground#465189
• checkbox.background#0d1024
• checkbox.border#465189
• checkbox.foreground#f7eaff
• descriptionForeground#9aa4d8
• diffEditor.border#465189
• diffEditor.insertedTextBackground#b9fbc022
• diffEditor.removedTextBackground#ff719a22
• disabledForeground#9aa4d8
• dropdown.background#0d1024
• dropdown.border#465189
• dropdown.foreground#f7eaff
• editor.background#0d1024
• editor.findMatchBackground#fff0a666
• editor.findMatchHighlightBackground#ff9de233
• editor.findRangeHighlightBackground#9adfff22
• editor.foreground#f7eaff
• editor.hoverHighlightBackground#ff9de218
• editor.inactiveSelectionBackground#ff9de222
• editor.lineHighlightBackground#171b38
• editor.lineHighlightBorder#465189
• editor.selectionBackground#ff9de244
• editor.selectionHighlightBackground#9adfff33
• editor.wordHighlightBackground#ff9de222
• editor.wordHighlightStrongBackground#9adfff22
• editorBracketMatch.background#ff9de222
• editorBracketMatch.border#ff9de2
• editorCursor.foreground#ff9de2
• editorGroup.border#465189
• editorGroupHeader.tabsBackground#171b38
• editorGroupHeader.tabsBorder#465189
• editorGutter.addedBackground#b9fbc0
• editorGutter.background#0d1024
• editorGutter.deletedBackground#ff719a
• editorGutter.modifiedBackground#fff0a6
• editorHoverWidget.background#11142d
• editorHoverWidget.border#465189
• editorHoverWidget.foreground#f7eaff
• editorIndentGuide.activeBackground1#ff9de2
• editorIndentGuide.background1#465189
• editorLineNumber.activeForeground#ff9de2
• editorLineNumber.foreground#9aa4d8
• editorOverviewRuler.addedForeground#b9fbc0
• editorOverviewRuler.border#0d1024
• editorOverviewRuler.deletedForeground#ff719a
• editorOverviewRuler.errorForeground#ff719a
• editorOverviewRuler.infoForeground#ff9de2
• editorOverviewRuler.modifiedForeground#fff0a6
• editorOverviewRuler.warningForeground#fff0a6
• editorRuler.foreground#465189
• editorSuggestWidget.background#11142d
• editorSuggestWidget.border#465189
• editorSuggestWidget.foreground#f7eaff
• editorSuggestWidget.highlightForeground#ff9de2
• editorSuggestWidget.selectedBackground#252b55
• editorWhitespace.foreground#465189
• errorForeground#ff719a
• focusBorder#ff9de2
• foreground#f7eaff
• gitDecoration.addedResourceForeground#b9fbc0
• gitDecoration.conflictingResourceForeground#9adfff
• gitDecoration.deletedResourceForeground#ff719a
• gitDecoration.ignoredResourceForeground#9aa4d8
• gitDecoration.modifiedResourceForeground#fff0a6
• gitDecoration.untrackedResourceForeground#b9fbc0
• icon.foreground#f7eaff
• input.background#0d1024
• input.border#465189
• input.foreground#f7eaff
• input.placeholderForeground#9aa4d8
• inputOption.activeBackground#ff9de222
• inputOption.activeBorder#ff9de2
• inputValidation.errorBackground#171b38
• inputValidation.errorBorder#ff719a
• inputValidation.infoBackground#171b38
• inputValidation.infoBorder#ff9de2
• inputValidation.warningBackground#171b38
• inputValidation.warningBorder#fff0a6
• list.activeSelectionBackground#252b55
• list.activeSelectionForeground#f7eaff
• list.focusOutline#ff9de2
• list.highlightForeground#ff9de2
• list.hoverBackground#171b38
• list.inactiveSelectionBackground#171b38
• list.inactiveSelectionForeground#f7eaff
• menu.background#11142d
• menu.foreground#f7eaff
• menu.selectionBackground#252b55
• menu.selectionForeground#f7eaff
• menu.separatorBackground#465189
• minimap.background#0d1024
• minimap.errorHighlight#ff719a
• minimap.findMatchHighlight#fff0a6
• minimap.selectionHighlight#ff9de270
• minimap.warningHighlight#fff0a6
• notificationCenter.border#465189
• notificationCenterHeader.background#252b55
• notificationCenterHeader.foreground#f7eaff
• notifications.background#11142d
• notifications.border#465189
• notifications.foreground#f7eaff
• notificationToast.border#465189
• panel.background#11142d
• panel.border#465189
• panel.foreground#f7eaff
• panelTitle.activeBorder#ff9de2
• panelTitle.activeForeground#f7eaff
• panelTitle.inactiveForeground#9aa4d8
• peekView.border#ff9de2
• peekViewEditor.background#0d1024
• peekViewResult.background#11142d
• peekViewTitle.background#252b55
• peekViewTitleDescription.foreground#9aa4d8
• peekViewTitleLabel.foreground#f7eaff
• pickerGroup.border#465189
• pickerGroup.foreground#ff9de2
• progressBar.background#ff9de2
• quickInput.background#11142d
• quickInput.foreground#f7eaff
• quickInputList.focusBackground#252b55
• quickInputList.focusForeground#f7eaff
• quickInputTitle.background#252b55
• sash.hoverBorder#ff9de2
• scrollbarSlider.activeBackground#ff9de288
• scrollbarSlider.background#46518955
• scrollbarSlider.hoverBackground#ff9de255
• selection.background#ff9de244
• settings.dropdownBackground#0d1024
• settings.dropdownBorder#465189
• settings.dropdownForeground#f7eaff
• settings.headerForeground#f7eaff
• settings.modifiedItemIndicator#ff9de2
• settings.textInputBackground#0d1024
• settings.textInputBorder#465189
• settings.textInputForeground#f7eaff
• sideBar.background#11142d
• sideBar.border#465189
• sideBar.foreground#f7eaff
• sideBarSectionHeader.background#252b55
• sideBarSectionHeader.border#465189
• sideBarSectionHeader.foreground#f7eaff
• sideBarTitle.foreground#f7eaff
• statusBar.background#252b55
• statusBar.border#465189
• statusBar.debuggingBackground#ff9de2
• statusBar.debuggingForeground#0d1024
• statusBar.foreground#f7eaff
• statusBar.noFolderBackground#171b38
• statusBarItem.hoverBackground#465189
• statusBarItem.remoteBackground#ff9de2
• statusBarItem.remoteForeground#0d1024
• symbolIcon.classForeground#c8b6ff
• symbolIcon.functionForeground#9adfff
• symbolIcon.methodForeground#9adfff
• symbolIcon.propertyForeground#ffc2f0
• symbolIcon.variableForeground#f7eaff
• tab.activeBackground#0d1024
• tab.activeBorderTop#ff9de2
• tab.activeForeground#f7eaff
• tab.border#465189
• tab.inactiveBackground#171b38
• tab.inactiveForeground#9aa4d8
• tab.unfocusedActiveBorderTop#9aa4d8
• terminal.ansiBlack#0d1024
• terminal.ansiBlue#9adfff
• terminal.ansiBrightBlack#9aa4d8
• terminal.ansiBrightBlue#9adfff
• terminal.ansiBrightCyan#ff9de2
• terminal.ansiBrightGreen#b9fbc0
• terminal.ansiBrightMagenta#9adfff
• terminal.ansiBrightRed#ff719a
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#fff0a6
• terminal.ansiCyan#ff9de2
• terminal.ansiGreen#b9fbc0
• terminal.ansiMagenta#9adfff
• terminal.ansiRed#ff719a
• terminal.ansiWhite#f7eaff
• terminal.ansiYellow#fff0a6
• terminal.background#0d1024
• terminal.foreground#f7eaff
• textBlockQuote.background#171b38
• textBlockQuote.border#ff9de2
• textCodeBlock.background#171b38
• textLink.activeForeground#fff0a6
• textLink.foreground#ff9de2
• titleBar.activeBackground#171b38
• titleBar.activeForeground#f7eaff
• titleBar.border#465189
• titleBar.inactiveBackground#11142d
• titleBar.inactiveForeground#9aa4d8
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).