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#ff4e5f
• activityBar.background#1f0b0c
• activityBar.foreground#ffe2d0
• activityBar.inactiveForeground#bd7b71
• activityBarBadge.background#ff4e5f
• activityBarBadge.foreground#140607
• badge.background#ff4e5f
• badge.foreground#140607
• breadcrumb.activeSelectionForeground#ff4e5f
• breadcrumb.background#140607
• breadcrumb.focusForeground#ffe2d0
• breadcrumb.foreground#bd7b71
• button.background#ff4e5f
• button.foreground#140607
• button.hoverBackground#ffd08a
• button.secondaryBackground#3a1215
• button.secondaryForeground#ffe2d0
• button.secondaryHoverBackground#6e2529
• checkbox.background#140607
• checkbox.border#6e2529
• checkbox.foreground#ffe2d0
• descriptionForeground#bd7b71
• diffEditor.border#6e2529
• diffEditor.insertedTextBackground#c7d36f22
• diffEditor.removedTextBackground#ff304f22
• disabledForeground#bd7b71
• dropdown.background#140607
• dropdown.border#6e2529
• dropdown.foreground#ffe2d0
• editor.background#140607
• editor.findMatchBackground#ffd08a66
• editor.findMatchHighlightBackground#ff4e5f33
• editor.findRangeHighlightBackground#d9995b22
• editor.foreground#ffe2d0
• editor.hoverHighlightBackground#ff4e5f18
• editor.inactiveSelectionBackground#ff4e5f22
• editor.lineHighlightBackground#1f0b0c
• editor.lineHighlightBorder#6e2529
• editor.selectionBackground#ff4e5f44
• editor.selectionHighlightBackground#d9995b33
• editor.wordHighlightBackground#ff4e5f22
• editor.wordHighlightStrongBackground#d9995b22
• editorBracketMatch.background#ff4e5f22
• editorBracketMatch.border#ff4e5f
• editorCursor.foreground#ff4e5f
• editorGroup.border#6e2529
• editorGroupHeader.tabsBackground#1f0b0c
• editorGroupHeader.tabsBorder#6e2529
• editorGutter.addedBackground#c7d36f
• editorGutter.background#140607
• editorGutter.deletedBackground#ff304f
• editorGutter.modifiedBackground#ffd08a
• editorHoverWidget.background#1a0809
• editorHoverWidget.border#6e2529
• editorHoverWidget.foreground#ffe2d0
• editorIndentGuide.activeBackground1#ff4e5f
• editorIndentGuide.background1#6e2529
• editorLineNumber.activeForeground#ff4e5f
• editorLineNumber.foreground#bd7b71
• editorOverviewRuler.addedForeground#c7d36f
• editorOverviewRuler.border#140607
• editorOverviewRuler.deletedForeground#ff304f
• editorOverviewRuler.errorForeground#ff304f
• editorOverviewRuler.infoForeground#ff4e5f
• editorOverviewRuler.modifiedForeground#ffd08a
• editorOverviewRuler.warningForeground#ffd08a
• editorRuler.foreground#6e2529
• editorSuggestWidget.background#1a0809
• editorSuggestWidget.border#6e2529
• editorSuggestWidget.foreground#ffe2d0
• editorSuggestWidget.highlightForeground#ff4e5f
• editorSuggestWidget.selectedBackground#3a1215
• editorWhitespace.foreground#6e2529
• errorForeground#ff304f
• focusBorder#ff4e5f
• foreground#ffe2d0
• gitDecoration.addedResourceForeground#c7d36f
• gitDecoration.conflictingResourceForeground#d9995b
• gitDecoration.deletedResourceForeground#ff304f
• gitDecoration.ignoredResourceForeground#bd7b71
• gitDecoration.modifiedResourceForeground#ffd08a
• gitDecoration.untrackedResourceForeground#c7d36f
• icon.foreground#ffe2d0
• input.background#140607
• input.border#6e2529
• input.foreground#ffe2d0
• input.placeholderForeground#bd7b71
• inputOption.activeBackground#ff4e5f22
• inputOption.activeBorder#ff4e5f
• inputValidation.errorBackground#1f0b0c
• inputValidation.errorBorder#ff304f
• inputValidation.infoBackground#1f0b0c
• inputValidation.infoBorder#ff4e5f
• inputValidation.warningBackground#1f0b0c
• inputValidation.warningBorder#ffd08a
• list.activeSelectionBackground#3a1215
• list.activeSelectionForeground#ffe2d0
• list.focusOutline#ff4e5f
• list.highlightForeground#ff4e5f
• list.hoverBackground#1f0b0c
• list.inactiveSelectionBackground#1f0b0c
• list.inactiveSelectionForeground#ffe2d0
• menu.background#1a0809
• menu.foreground#ffe2d0
• menu.selectionBackground#3a1215
• menu.selectionForeground#ffe2d0
• menu.separatorBackground#6e2529
• minimap.background#140607
• minimap.errorHighlight#ff304f
• minimap.findMatchHighlight#ffd08a
• minimap.selectionHighlight#ff4e5f70
• minimap.warningHighlight#ffd08a
• notificationCenter.border#6e2529
• notificationCenterHeader.background#3a1215
• notificationCenterHeader.foreground#ffe2d0
• notifications.background#1a0809
• notifications.border#6e2529
• notifications.foreground#ffe2d0
• notificationToast.border#6e2529
• panel.background#1a0809
• panel.border#6e2529
• panel.foreground#ffe2d0
• panelTitle.activeBorder#ff4e5f
• panelTitle.activeForeground#ffe2d0
• panelTitle.inactiveForeground#bd7b71
• peekView.border#ff4e5f
• peekViewEditor.background#140607
• peekViewResult.background#1a0809
• peekViewTitle.background#3a1215
• peekViewTitleDescription.foreground#bd7b71
• peekViewTitleLabel.foreground#ffe2d0
• pickerGroup.border#6e2529
• pickerGroup.foreground#ff4e5f
• progressBar.background#ff4e5f
• quickInput.background#1a0809
• quickInput.foreground#ffe2d0
• quickInputList.focusBackground#3a1215
• quickInputList.focusForeground#ffe2d0
• quickInputTitle.background#3a1215
• sash.hoverBorder#ff4e5f
• scrollbarSlider.activeBackground#ff4e5f88
• scrollbarSlider.background#6e252955
• scrollbarSlider.hoverBackground#ff4e5f55
• selection.background#ff4e5f44
• settings.dropdownBackground#140607
• settings.dropdownBorder#6e2529
• settings.dropdownForeground#ffe2d0
• settings.headerForeground#ffe2d0
• settings.modifiedItemIndicator#ff4e5f
• settings.textInputBackground#140607
• settings.textInputBorder#6e2529
• settings.textInputForeground#ffe2d0
• sideBar.background#1a0809
• sideBar.border#6e2529
• sideBar.foreground#ffe2d0
• sideBarSectionHeader.background#3a1215
• sideBarSectionHeader.border#6e2529
• sideBarSectionHeader.foreground#ffe2d0
• sideBarTitle.foreground#ffe2d0
• statusBar.background#3a1215
• statusBar.border#6e2529
• statusBar.debuggingBackground#ff4e5f
• statusBar.debuggingForeground#140607
• statusBar.foreground#ffe2d0
• statusBar.noFolderBackground#1f0b0c
• statusBarItem.hoverBackground#6e2529
• statusBarItem.remoteBackground#ff4e5f
• statusBarItem.remoteForeground#140607
• symbolIcon.classForeground#ffc1ad
• symbolIcon.functionForeground#ff8a65
• symbolIcon.methodForeground#ff8a65
• symbolIcon.propertyForeground#ff9e80
• symbolIcon.variableForeground#ffe2d0
• tab.activeBackground#140607
• tab.activeBorderTop#ff4e5f
• tab.activeForeground#ffe2d0
• tab.border#6e2529
• tab.inactiveBackground#1f0b0c
• tab.inactiveForeground#bd7b71
• tab.unfocusedActiveBorderTop#bd7b71
• terminal.ansiBlack#140607
• terminal.ansiBlue#ff8a65
• terminal.ansiBrightBlack#bd7b71
• terminal.ansiBrightBlue#ff8a65
• terminal.ansiBrightCyan#ff4e5f
• terminal.ansiBrightGreen#c7d36f
• terminal.ansiBrightMagenta#d9995b
• terminal.ansiBrightRed#ff304f
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffd08a
• terminal.ansiCyan#ff4e5f
• terminal.ansiGreen#c7d36f
• terminal.ansiMagenta#d9995b
• terminal.ansiRed#ff304f
• terminal.ansiWhite#ffe2d0
• terminal.ansiYellow#ffd08a
• terminal.background#140607
• terminal.foreground#ffe2d0
• textBlockQuote.background#1f0b0c
• textBlockQuote.border#ff4e5f
• textCodeBlock.background#1f0b0c
• textLink.activeForeground#ffd08a
• textLink.foreground#ff4e5f
• titleBar.activeBackground#1f0b0c
• titleBar.activeForeground#ffe2d0
• titleBar.border#6e2529
• titleBar.inactiveBackground#1a0809
• titleBar.inactiveForeground#bd7b71
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).