Colin's VS Code Themes

Color themes

• 

  Valentine Glow

• 

  Voxel Craft

• 

  Winter Aurora

• 

  XP Dark

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#7dd3fc
• activityBar.background#0a1a2f
• activityBar.foreground#e8fbff
• activityBar.inactiveForeground#7fb0c7
• activityBarBadge.background#7dd3fc
• activityBarBadge.foreground#06111f
• badge.background#7dd3fc
• badge.foreground#06111f
• breadcrumb.activeSelectionForeground#7dd3fc
• breadcrumb.background#06111f
• breadcrumb.focusForeground#e8fbff
• breadcrumb.foreground#7fb0c7
• button.background#7dd3fc
• button.foreground#06111f
• button.hoverBackground#bff7e8
• button.secondaryBackground#123052
• button.secondaryForeground#e8fbff
• button.secondaryHoverBackground#255b7a
• checkbox.background#06111f
• checkbox.border#255b7a
• checkbox.foreground#e8fbff
• descriptionForeground#7fb0c7
• diffEditor.border#255b7a
• diffEditor.insertedTextBackground#a7f3d022
• diffEditor.removedTextBackground#f8717122
• disabledForeground#7fb0c7
• dropdown.background#06111f
• dropdown.border#255b7a
• dropdown.foreground#e8fbff
• editor.background#06111f
• editor.findMatchBackground#bff7e866
• editor.findMatchHighlightBackground#7dd3fc33
• editor.findRangeHighlightBackground#a78bfa22
• editor.foreground#e8fbff
• editor.hoverHighlightBackground#7dd3fc18
• editor.inactiveSelectionBackground#7dd3fc22
• editor.lineHighlightBackground#0a1a2f
• editor.lineHighlightBorder#255b7a
• editor.selectionBackground#7dd3fc44
• editor.selectionHighlightBackground#a78bfa33
• editor.wordHighlightBackground#7dd3fc22
• editor.wordHighlightStrongBackground#a78bfa22
• editorBracketMatch.background#7dd3fc22
• editorBracketMatch.border#7dd3fc
• editorCursor.foreground#7dd3fc
• editorGroup.border#255b7a
• editorGroupHeader.tabsBackground#0a1a2f
• editorGroupHeader.tabsBorder#255b7a
• editorGutter.addedBackground#a7f3d0
• editorGutter.background#06111f
• editorGutter.deletedBackground#f87171
• editorGutter.modifiedBackground#bff7e8
• editorHoverWidget.background#081729
• editorHoverWidget.border#255b7a
• editorHoverWidget.foreground#e8fbff
• editorIndentGuide.activeBackground1#7dd3fc
• editorIndentGuide.background1#255b7a
• editorLineNumber.activeForeground#7dd3fc
• editorLineNumber.foreground#7fb0c7
• editorOverviewRuler.addedForeground#a7f3d0
• editorOverviewRuler.border#06111f
• editorOverviewRuler.deletedForeground#f87171
• editorOverviewRuler.errorForeground#f87171
• editorOverviewRuler.infoForeground#7dd3fc
• editorOverviewRuler.modifiedForeground#bff7e8
• editorOverviewRuler.warningForeground#bff7e8
• editorRuler.foreground#255b7a
• editorSuggestWidget.background#081729
• editorSuggestWidget.border#255b7a
• editorSuggestWidget.foreground#e8fbff
• editorSuggestWidget.highlightForeground#7dd3fc
• editorSuggestWidget.selectedBackground#123052
• editorWhitespace.foreground#255b7a
• errorForeground#f87171
• focusBorder#7dd3fc
• foreground#e8fbff
• gitDecoration.addedResourceForeground#a7f3d0
• gitDecoration.conflictingResourceForeground#a78bfa
• gitDecoration.deletedResourceForeground#f87171
• gitDecoration.ignoredResourceForeground#7fb0c7
• gitDecoration.modifiedResourceForeground#bff7e8
• gitDecoration.untrackedResourceForeground#a7f3d0
• icon.foreground#e8fbff
• input.background#06111f
• input.border#255b7a
• input.foreground#e8fbff
• input.placeholderForeground#7fb0c7
• inputOption.activeBackground#7dd3fc22
• inputOption.activeBorder#7dd3fc
• inputValidation.errorBackground#0a1a2f
• inputValidation.errorBorder#f87171
• inputValidation.infoBackground#0a1a2f
• inputValidation.infoBorder#7dd3fc
• inputValidation.warningBackground#0a1a2f
• inputValidation.warningBorder#bff7e8
• list.activeSelectionBackground#123052
• list.activeSelectionForeground#e8fbff
• list.focusOutline#7dd3fc
• list.highlightForeground#7dd3fc
• list.hoverBackground#0a1a2f
• list.inactiveSelectionBackground#0a1a2f
• list.inactiveSelectionForeground#e8fbff
• menu.background#081729
• menu.foreground#e8fbff
• menu.selectionBackground#123052
• menu.selectionForeground#e8fbff
• menu.separatorBackground#255b7a
• minimap.background#06111f
• minimap.errorHighlight#f87171
• minimap.findMatchHighlight#bff7e8
• minimap.selectionHighlight#7dd3fc70
• minimap.warningHighlight#bff7e8
• notificationCenter.border#255b7a
• notificationCenterHeader.background#123052
• notificationCenterHeader.foreground#e8fbff
• notifications.background#081729
• notifications.border#255b7a
• notifications.foreground#e8fbff
• notificationToast.border#255b7a
• panel.background#081729
• panel.border#255b7a
• panel.foreground#e8fbff
• panelTitle.activeBorder#7dd3fc
• panelTitle.activeForeground#e8fbff
• panelTitle.inactiveForeground#7fb0c7
• peekView.border#7dd3fc
• peekViewEditor.background#06111f
• peekViewResult.background#081729
• peekViewTitle.background#123052
• peekViewTitleDescription.foreground#7fb0c7
• peekViewTitleLabel.foreground#e8fbff
• pickerGroup.border#255b7a
• pickerGroup.foreground#7dd3fc
• progressBar.background#7dd3fc
• quickInput.background#081729
• quickInput.foreground#e8fbff
• quickInputList.focusBackground#123052
• quickInputList.focusForeground#e8fbff
• quickInputTitle.background#123052
• sash.hoverBorder#7dd3fc
• scrollbarSlider.activeBackground#7dd3fc88
• scrollbarSlider.background#255b7a55
• scrollbarSlider.hoverBackground#7dd3fc55
• selection.background#7dd3fc44
• settings.dropdownBackground#06111f
• settings.dropdownBorder#255b7a
• settings.dropdownForeground#e8fbff
• settings.headerForeground#e8fbff
• settings.modifiedItemIndicator#7dd3fc
• settings.textInputBackground#06111f
• settings.textInputBorder#255b7a
• settings.textInputForeground#e8fbff
• sideBar.background#081729
• sideBar.border#255b7a
• sideBar.foreground#e8fbff
• sideBarSectionHeader.background#123052
• sideBarSectionHeader.border#255b7a
• sideBarSectionHeader.foreground#e8fbff
• sideBarTitle.foreground#e8fbff
• statusBar.background#123052
• statusBar.border#255b7a
• statusBar.debuggingBackground#7dd3fc
• statusBar.debuggingForeground#06111f
• statusBar.foreground#e8fbff
• statusBar.noFolderBackground#0a1a2f
• statusBarItem.hoverBackground#255b7a
• statusBarItem.remoteBackground#7dd3fc
• statusBarItem.remoteForeground#06111f
• symbolIcon.classForeground#c4b5fd
• symbolIcon.functionForeground#67e8f9
• symbolIcon.methodForeground#67e8f9
• symbolIcon.propertyForeground#99f6e4
• symbolIcon.variableForeground#e8fbff
• tab.activeBackground#06111f
• tab.activeBorderTop#7dd3fc
• tab.activeForeground#e8fbff
• tab.border#255b7a
• tab.inactiveBackground#0a1a2f
• tab.inactiveForeground#7fb0c7
• tab.unfocusedActiveBorderTop#7fb0c7
• terminal.ansiBlack#06111f
• terminal.ansiBlue#67e8f9
• terminal.ansiBrightBlack#7fb0c7
• terminal.ansiBrightBlue#67e8f9
• terminal.ansiBrightCyan#7dd3fc
• terminal.ansiBrightGreen#a7f3d0
• terminal.ansiBrightMagenta#a78bfa
• terminal.ansiBrightRed#f87171
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#bff7e8
• terminal.ansiCyan#7dd3fc
• terminal.ansiGreen#a7f3d0
• terminal.ansiMagenta#a78bfa
• terminal.ansiRed#f87171
• terminal.ansiWhite#e8fbff
• terminal.ansiYellow#bff7e8
• terminal.background#06111f
• terminal.foreground#e8fbff
• textBlockQuote.background#0a1a2f
• textBlockQuote.border#7dd3fc
• textCodeBlock.background#0a1a2f
• textLink.activeForeground#bff7e8
• textLink.foreground#7dd3fc
• titleBar.activeBackground#0a1a2f
• titleBar.activeForeground#e8fbff
• titleBar.border#255b7a
• titleBar.inactiveBackground#081729
• titleBar.inactiveForeground#7fb0c7
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).