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#00f5d4
• activityBar.background#10071f
• activityBar.foreground#f6eaff
• activityBar.inactiveForeground#9d7bc7
• activityBarBadge.background#00f5d4
• activityBarBadge.foreground#08040f
• badge.background#00f5d4
• badge.foreground#08040f
• breadcrumb.activeSelectionForeground#00f5d4
• breadcrumb.background#08040f
• breadcrumb.focusForeground#f6eaff
• breadcrumb.foreground#9d7bc7
• button.background#00f5d4
• button.foreground#08040f
• button.hoverBackground#f9f871
• button.secondaryBackground#241047
• button.secondaryForeground#f6eaff
• button.secondaryHoverBackground#4d1d8c
• checkbox.background#08040f
• checkbox.border#4d1d8c
• checkbox.foreground#f6eaff
• descriptionForeground#9d7bc7
• diffEditor.border#4d1d8c
• diffEditor.insertedTextBackground#7cfca422
• diffEditor.removedTextBackground#ff386422
• disabledForeground#9d7bc7
• dropdown.background#08040f
• dropdown.border#4d1d8c
• dropdown.foreground#f6eaff
• editor.background#08040f
• editor.findMatchBackground#f9f87166
• editor.findMatchHighlightBackground#00f5d433
• editor.findRangeHighlightBackground#ff2a6d22
• editor.foreground#f6eaff
• editor.hoverHighlightBackground#00f5d418
• editor.inactiveSelectionBackground#00f5d422
• editor.lineHighlightBackground#10071f
• editor.lineHighlightBorder#4d1d8c
• editor.selectionBackground#00f5d444
• editor.selectionHighlightBackground#ff2a6d33
• editor.wordHighlightBackground#00f5d422
• editor.wordHighlightStrongBackground#ff2a6d22
• editorBracketMatch.background#00f5d422
• editorBracketMatch.border#00f5d4
• editorCursor.foreground#00f5d4
• editorGroup.border#4d1d8c
• editorGroupHeader.tabsBackground#10071f
• editorGroupHeader.tabsBorder#4d1d8c
• editorGutter.addedBackground#7cfca4
• editorGutter.background#08040f
• editorGutter.deletedBackground#ff3864
• editorGutter.modifiedBackground#f9f871
• editorHoverWidget.background#0d0618
• editorHoverWidget.border#4d1d8c
• editorHoverWidget.foreground#f6eaff
• editorIndentGuide.activeBackground1#00f5d4
• editorIndentGuide.background1#4d1d8c
• editorLineNumber.activeForeground#00f5d4
• editorLineNumber.foreground#9d7bc7
• editorOverviewRuler.addedForeground#7cfca4
• editorOverviewRuler.border#08040f
• editorOverviewRuler.deletedForeground#ff3864
• editorOverviewRuler.errorForeground#ff3864
• editorOverviewRuler.infoForeground#00f5d4
• editorOverviewRuler.modifiedForeground#f9f871
• editorOverviewRuler.warningForeground#f9f871
• editorRuler.foreground#4d1d8c
• editorSuggestWidget.background#0d0618
• editorSuggestWidget.border#4d1d8c
• editorSuggestWidget.foreground#f6eaff
• editorSuggestWidget.highlightForeground#00f5d4
• editorSuggestWidget.selectedBackground#241047
• editorWhitespace.foreground#4d1d8c
• errorForeground#ff3864
• focusBorder#00f5d4
• foreground#f6eaff
• gitDecoration.addedResourceForeground#7cfca4
• gitDecoration.conflictingResourceForeground#ff2a6d
• gitDecoration.deletedResourceForeground#ff3864
• gitDecoration.ignoredResourceForeground#9d7bc7
• gitDecoration.modifiedResourceForeground#f9f871
• gitDecoration.untrackedResourceForeground#7cfca4
• icon.foreground#f6eaff
• input.background#08040f
• input.border#4d1d8c
• input.foreground#f6eaff
• input.placeholderForeground#9d7bc7
• inputOption.activeBackground#00f5d422
• inputOption.activeBorder#00f5d4
• inputValidation.errorBackground#10071f
• inputValidation.errorBorder#ff3864
• inputValidation.infoBackground#10071f
• inputValidation.infoBorder#00f5d4
• inputValidation.warningBackground#10071f
• inputValidation.warningBorder#f9f871
• list.activeSelectionBackground#241047
• list.activeSelectionForeground#f6eaff
• list.focusOutline#00f5d4
• list.highlightForeground#00f5d4
• list.hoverBackground#10071f
• list.inactiveSelectionBackground#10071f
• list.inactiveSelectionForeground#f6eaff
• menu.background#0d0618
• menu.foreground#f6eaff
• menu.selectionBackground#241047
• menu.selectionForeground#f6eaff
• menu.separatorBackground#4d1d8c
• minimap.background#08040f
• minimap.errorHighlight#ff3864
• minimap.findMatchHighlight#f9f871
• minimap.selectionHighlight#00f5d470
• minimap.warningHighlight#f9f871
• notificationCenter.border#4d1d8c
• notificationCenterHeader.background#241047
• notificationCenterHeader.foreground#f6eaff
• notifications.background#0d0618
• notifications.border#4d1d8c
• notifications.foreground#f6eaff
• notificationToast.border#4d1d8c
• panel.background#0d0618
• panel.border#4d1d8c
• panel.foreground#f6eaff
• panelTitle.activeBorder#00f5d4
• panelTitle.activeForeground#f6eaff
• panelTitle.inactiveForeground#9d7bc7
• peekView.border#00f5d4
• peekViewEditor.background#08040f
• peekViewResult.background#0d0618
• peekViewTitle.background#241047
• peekViewTitleDescription.foreground#9d7bc7
• peekViewTitleLabel.foreground#f6eaff
• pickerGroup.border#4d1d8c
• pickerGroup.foreground#00f5d4
• progressBar.background#00f5d4
• quickInput.background#0d0618
• quickInput.foreground#f6eaff
• quickInputList.focusBackground#241047
• quickInputList.focusForeground#f6eaff
• quickInputTitle.background#241047
• sash.hoverBorder#00f5d4
• scrollbarSlider.activeBackground#00f5d488
• scrollbarSlider.background#4d1d8c55
• scrollbarSlider.hoverBackground#00f5d455
• selection.background#00f5d444
• settings.dropdownBackground#08040f
• settings.dropdownBorder#4d1d8c
• settings.dropdownForeground#f6eaff
• settings.headerForeground#f6eaff
• settings.modifiedItemIndicator#00f5d4
• settings.textInputBackground#08040f
• settings.textInputBorder#4d1d8c
• settings.textInputForeground#f6eaff
• sideBar.background#0d0618
• sideBar.border#4d1d8c
• sideBar.foreground#f6eaff
• sideBarSectionHeader.background#241047
• sideBarSectionHeader.border#4d1d8c
• sideBarSectionHeader.foreground#f6eaff
• sideBarTitle.foreground#f6eaff
• statusBar.background#241047
• statusBar.border#4d1d8c
• statusBar.debuggingBackground#00f5d4
• statusBar.debuggingForeground#08040f
• statusBar.foreground#f6eaff
• statusBar.noFolderBackground#10071f
• statusBarItem.hoverBackground#4d1d8c
• statusBarItem.remoteBackground#00f5d4
• statusBarItem.remoteForeground#08040f
• symbolIcon.classForeground#9b5cff
• symbolIcon.functionForeground#00f5d4
• symbolIcon.methodForeground#00f5d4
• symbolIcon.propertyForeground#ff7ab6
• symbolIcon.variableForeground#f6eaff
• tab.activeBackground#08040f
• tab.activeBorderTop#00f5d4
• tab.activeForeground#f6eaff
• tab.border#4d1d8c
• tab.inactiveBackground#10071f
• tab.inactiveForeground#9d7bc7
• tab.unfocusedActiveBorderTop#9d7bc7
• terminal.ansiBlack#08040f
• terminal.ansiBlue#00f5d4
• terminal.ansiBrightBlack#9d7bc7
• terminal.ansiBrightBlue#00f5d4
• terminal.ansiBrightCyan#00f5d4
• terminal.ansiBrightGreen#7cfca4
• terminal.ansiBrightMagenta#ff2a6d
• terminal.ansiBrightRed#ff3864
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#f9f871
• terminal.ansiCyan#00f5d4
• terminal.ansiGreen#7cfca4
• terminal.ansiMagenta#ff2a6d
• terminal.ansiRed#ff3864
• terminal.ansiWhite#f6eaff
• terminal.ansiYellow#f9f871
• terminal.background#08040f
• terminal.foreground#f6eaff
• textBlockQuote.background#10071f
• textBlockQuote.border#00f5d4
• textCodeBlock.background#10071f
• textLink.activeForeground#f9f871
• textLink.foreground#00f5d4
• titleBar.activeBackground#10071f
• titleBar.activeForeground#f6eaff
• titleBar.border#4d1d8c
• titleBar.inactiveBackground#0d0618
• titleBar.inactiveForeground#9d7bc7
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).