Skip to main content
Home Theme VS Code Rave Night A vibrant dark theme inspired by rave culture with electric neon colors - featuring hot pink accents, electric blue highlights, and neon green elements against deep black backgrounds for an energetic coding experience.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #242424 activityBar.activeBackground #1a0d1a activityBar.activeBorder #ff0080 activityBar.activeFocusBorder #ff40a0 activityBar.background #000000 activityBar.border #333333 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #929292 italic variable, string constant.other.placeholder #00ff80 — constant.other.color #ffffff — invalid, invalid.illegal, invalid.deprecated #da0000 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.dropBorder
#00ffff
activityBar.foreground #00ff00
activityBar.inactiveForeground #666666
activityBarBadge.background #ff0040
activityBarBadge.foreground #ffffff
activityBarTop.activeBackground #1a0d1a
activityBarTop.activeBorder #ff0080
activityBarTop.background #0a0a0a
activityBarTop.dropBorder #00ffff
activityBarTop.foreground #00ff00
activityBarTop.inactiveForeground #666666
activityErrorBadge.background #ff0044
activityErrorBadge.foreground #ffffff
activityWarningBadge.background #ff9900
activityWarningBadge.foreground #000000
badge.background #ff00ff
badge.foreground #000000
banner.background #242424
banner.foreground #f6fcfc
banner.iconForeground #f904cc
breadcrumb.activeSelectionForeground #e4f403
breadcrumb.background #1a1a1a
breadcrumb.focusForeground #f904cc
breadcrumb.foreground #f6fcfc
breadcrumbPicker.background #242424
button.background #00ff00
button.border #f904cc
button.foreground #000000
button.hoverBackground #40ff40
button.secondaryBackground #ff0080
button.secondaryForeground #ffffff
button.secondaryHoverBackground #ff40a0
button.separator #929292
chart.axis #929292
chart.guide #494949
chart.line #f6fcfc
charts.blue #0013ea
charts.foreground #f6fcfc
charts.green #00ff00
charts.lines #6d6d6d
charts.orange #ff8000
charts.purple #8000ff
charts.red #da0000
charts.yellow #e4f403
chat.avatarBackground #494949
chat.avatarForeground #f6fcfc
chat.editedFileForeground #e4f403
chat.linesAddedForeground #00cc0080
chat.linesRemovedForeground #da000080
chat.requestBackground #1a1a1a
chat.requestBorder #6d6d6d
chat.requestBubbleBackground #f904cc22
chat.requestBubbleHoverBackground #f904cc33
chat.requestCodeBorder #f904cc44
chat.slashCommandBackground #f904cc33
chat.slashCommandForeground #f904cc
checkbox.background #242424
checkbox.border #929292
checkbox.disabled.background #494949
checkbox.disabled.foreground #929292
checkbox.foreground #00ff80
checkbox.selectBackground #f904cc
checkbox.selectBorder #f904cc
commandCenter.activeBackground #242424
commandCenter.activeBorder #f904cc
commandCenter.activeForeground #f904cc
commandCenter.background #1a1a1a
commandCenter.border #929292
commandCenter.debuggingBackground #da000033
commandCenter.foreground #f6fcfc
commandCenter.inactiveBorder #6d6d6d
commandCenter.inactiveForeground #929292
commentsView.resolvedIcon #00cc00
commentsView.unresolvedIcon #da0000
contrastActiveBorder #f904cc
contrastBorder #6d6d6d
debugConsole.errorForeground #da0000
debugConsole.infoForeground #0013ea
debugConsole.sourceForeground #929292
debugConsole.warningForeground #e4f403
debugConsoleInputIcon.foreground #f904cc
debugExceptionWidget.background #242424
debugExceptionWidget.border #da0000
debugIcon.breakpointCurrentStackframeForeground #f904cc
debugIcon.breakpointDisabledForeground #929292
debugIcon.breakpointForeground #da0000
debugIcon.breakpointStackframeForeground #0013ea
debugIcon.breakpointUnverifiedForeground #e4f403
debugIcon.continueForeground #f904cc
debugIcon.disconnectForeground #929292
debugIcon.pauseForeground #e4f403
debugIcon.restartForeground #0013ea
debugIcon.startForeground #f904cc
debugIcon.stepBackForeground #f6fcfc
debugIcon.stepIntoForeground #f6fcfc
debugIcon.stepOutForeground #f6fcfc
debugIcon.stepOverForeground #f6fcfc
debugIcon.stopForeground #da0000
debugTokenExpression.boolean #00ffff
debugTokenExpression.error #da0000
debugTokenExpression.name #00ff80
debugTokenExpression.number #80ff00
debugTokenExpression.string #ff0080
debugTokenExpression.type #8000ff
debugTokenExpression.value #ff0080
debugToolBar.background #242424
debugToolBar.border #f904cc
debugView.exceptionLabelBackground #da000033
debugView.exceptionLabelForeground #da0000
debugView.stateLabelBackground #1a1a1a
debugView.stateLabelForeground #00ff80
debugView.valueChangedHighlight #ff008033
descriptionForeground #cccccc
diffEditor.border #6d6d6d
diffEditor.diagonalFill #494949
diffEditor.insertedLineBackground #00cc0022
diffEditor.insertedTextBackground #00cc0033
diffEditor.insertedTextBorder #00cc00
diffEditor.move.border #f904cc
diffEditor.moveActive.border #e4f403
diffEditor.removedLineBackground #ff444422
diffEditor.removedTextBackground #ff444433
diffEditor.removedTextBorder #ff4444
diffEditor.unchangedCodeBackground #242424
diffEditor.unchangedRegionBackground #1a1a1a
diffEditor.unchangedRegionForeground #929292
diffEditor.unchangedRegionShadow #000000
diffEditorGutter.insertedLineBackground #00cc0044
diffEditorGutter.removedLineBackground #ff444444
diffEditorOverview.insertedForeground #00cc00
diffEditorOverview.removedForeground #ff4444
disabledForeground #808080
dropdown.background #242424
dropdown.border #6d6d6d
dropdown.foreground #f6fcfc
dropdown.listBackground #000000
editor.background #000000
editor.compositionBorder #f904cc
editor.findMatchBackground #00ff00
editor.findMatchBorder #00ff00
editor.findMatchForeground #000000
editor.findMatchHighlightBackground #00ff0055
editor.findMatchHighlightBorder #00ff00
editor.findMatchHighlightForeground #00000000
editor.findRangeHighlightBackground #ff00ff33
editor.findRangeHighlightBorder #ff00ff00
editor.focusedStackFrameHighlightBackground #0013ea33
editor.foldBackground #00ffff44
editor.foldPlaceholderForeground #929292
editor.foreground #f6fcfc
editor.hoverHighlightBackground #49494955
editor.inactiveSelectionBackground #6d6d6d44
editor.inlineValuesBackground #24242433
editor.inlineValuesForeground #f6fcfc
editor.lineHighlightBackground #1a1a1a
editor.lineHighlightBorder #494949
editor.linkedEditingBackground #f904cc22
editor.placeholder.foreground #929292
editor.rangeHighlightBackground #0013ea22
editor.rangeHighlightBorder #0013ea
editor.selectionBackground #0013ea44
editor.selectionForeground #ffffff
editor.selectionHighlightBackground #e4f40333
editor.selectionHighlightBorder #e4f403
editor.snippetFinalTabstopHighlightBackground #00ff8033
editor.snippetFinalTabstopHighlightBorder #00ff80
editor.snippetTabstopHighlightBackground #ff008033
editor.snippetTabstopHighlightBorder #ff0080
editor.stackFrameHighlightBackground #e4f40333
editor.symbolHighlightBackground #f904cc22
editor.symbolHighlightBorder #f904cc
editor.wordHighlightBackground #e4f40322
editor.wordHighlightBorder #e4f403
editor.wordHighlightStrongBackground #f904cc33
editor.wordHighlightStrongBorder #f904cc
editor.wordHighlightTextBackground #92929233
editor.wordHighlightTextBorder #929292
editorActionList.background #242424
editorActionList.focusBackground #494949
editorActionList.focusForeground #f6fcfc
editorActionList.foreground #f6fcfc
editorBracketHighlight.foreground1 #ff0080
editorBracketHighlight.foreground2 #00ff80
editorBracketHighlight.foreground3 #8000ff
editorBracketHighlight.foreground4 #ffff00
editorBracketHighlight.foreground5 #00ffff
editorBracketHighlight.foreground6 #ff00ff
editorBracketHighlight.unexpectedBracket.foreground #da0000
editorBracketMatch.background #494949
editorBracketMatch.border #6d6d6d
editorBracketPairGuide.activeBackground1 #ff008033
editorBracketPairGuide.activeBackground2 #00ff8033
editorBracketPairGuide.activeBackground3 #8000ff33
editorBracketPairGuide.activeBackground4 #ffff0033
editorBracketPairGuide.activeBackground5 #00ffff33
editorBracketPairGuide.activeBackground6 #ff00ff33
editorBracketPairGuide.background1 #ff008022
editorBracketPairGuide.background2 #00ff8022
editorBracketPairGuide.background3 #8000ff22
editorBracketPairGuide.background4 #ffff0022
editorBracketPairGuide.background5 #00ffff22
editorBracketPairGuide.background6 #ff00ff22
editorCodeLens.foreground #929292
editorCommentsWidget.rangeActiveBackground #0013ea44
editorCommentsWidget.rangeBackground #0013ea22
editorCommentsWidget.replyInputBackground #1a1a1a
editorCommentsWidget.resolvedBorder #00cc00
editorCommentsWidget.unresolvedBorder #e4f403
editorCursor.background #000000
editorCursor.foreground #00ffff
editorError.background #da000022
editorError.border #da0000
editorError.foreground #da0000
editorGhostText.background #24242433
editorGhostText.border #929292
editorGhostText.foreground #929292
editorGroup.border #6d6d6d
editorGroup.dropBackground #929292
editorGroup.dropIntoPromptBackground #ff008033
editorGroup.dropIntoPromptBorder #ff0080
editorGroup.dropIntoPromptForeground #f6fcfc
editorGroup.emptyBackground #0a0a0a
editorGroup.focusedEmptyBorder #f904cc
editorGroupHeader.border #6d6d6d
editorGroupHeader.noTabsBackground #000000
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #333333
editorGutter.addedBackground #00cc00
editorGutter.addedSecondaryBackground #00cc0044
editorGutter.background #000000
editorGutter.commentGlyphForeground #e4f403
editorGutter.commentRangeForeground #929292
editorGutter.commentUnresolvedGlyphForeground #f904cc
editorGutter.deletedBackground #ff4444
editorGutter.deletedSecondaryBackground #ff444444
editorGutter.foldingControlForeground #929292
editorGutter.itemBackground #1a1a1a
editorGutter.itemGlyphForeground #929292
editorGutter.modifiedBackground #ffaa00
editorGutter.modifiedSecondaryBackground #ffaa0044
editorHint.border #929292
editorHint.foreground #e4f403
editorHoverWidget.background #1a1a1a
editorHoverWidget.border #f904cc
editorHoverWidget.foreground #f6fcfc
editorHoverWidget.highlightForeground #f904cc
editorHoverWidget.statusBarBackground #242424
editorIndentGuide.activeBackground1 #929292
editorIndentGuide.activeBackground2 #929292
editorIndentGuide.activeBackground3 #929292
editorIndentGuide.activeBackground4 #929292
editorIndentGuide.activeBackground5 #929292
editorIndentGuide.activeBackground6 #929292
editorIndentGuide.background1 #6d6d6d
editorIndentGuide.background2 #6d6d6d
editorIndentGuide.background3 #6d6d6d
editorIndentGuide.background4 #6d6d6d
editorIndentGuide.background5 #6d6d6d
editorIndentGuide.background6 #6d6d6d
editorInfo.background #0013ea22
editorInfo.border #0013ea
editorInfo.foreground #0013ea
editorInlayHint.background #6d6d6d
editorInlayHint.foreground #fffeff
editorInlayHint.parameterBackground #6d6d6d
editorInlayHint.parameterForeground #fffeff
editorInlayHint.typeBackground #6d6d6d
editorInlayHint.typeForeground #f6fcfc
editorLightBulb.foreground #e4f403
editorLightBulbAi.foreground #0013ea
editorLightBulbAutoFix.foreground #00cc00
editorLineNumber.activeForeground #f6fcfc
editorLineNumber.dimmedForeground #6d6d6d
editorLineNumber.foreground #929292
editorLink.activeForeground #ff0099
editorMarkerNavigation.background #242424
editorMarkerNavigationError.background #da0000
editorMarkerNavigationError.headerBackground #da000066
editorMarkerNavigationInfo.background #0013ea
editorMarkerNavigationInfo.headerBackground #0013ea66
editorMarkerNavigationWarning.background #e4f403
editorMarkerNavigationWarning.headerBackground #e4f40366
editorMinimap.inlineChatInserted #00ff0033
editorMultiCursor.primary.background #000000
editorMultiCursor.primary.foreground #00ffff
editorMultiCursor.secondary.background #000000
editorMultiCursor.secondary.foreground #00ff80
editorOverviewRuler.addedForeground #00cc00
editorOverviewRuler.background #1a1a1a
editorOverviewRuler.border #6d6d6d
editorOverviewRuler.bracketMatchForeground #6d6d6d
editorOverviewRuler.commentForeground #f904cc
editorOverviewRuler.commentUnresolvedForeground #da0000
editorOverviewRuler.commonContentForeground #929292
editorOverviewRuler.currentContentForeground #0013ea
editorOverviewRuler.deletedForeground #ff4444
editorOverviewRuler.errorForeground #da0000
editorOverviewRuler.findMatchForeground #00ff0040
editorOverviewRuler.incomingContentForeground #00cc00
editorOverviewRuler.infoForeground #0013ea
editorOverviewRuler.inlineChatInserted #00ff0040
editorOverviewRuler.inlineChatRemoved #ff444440
editorOverviewRuler.modifiedForeground #ffaa00
editorOverviewRuler.rangeHighlightForeground #ff00ff40
editorOverviewRuler.selectionHighlightForeground #0013ea40
editorOverviewRuler.warningForeground #e4f403
editorOverviewRuler.wordHighlightForeground #e4f40340
editorOverviewRuler.wordHighlightStrongForeground #f904cc40
editorOverviewRuler.wordHighlightTextForeground #92929240
editorPane.background #000000
editorRuler.foreground #6d6d6d
editorStickyScroll.background #000000
editorStickyScroll.border #f904cc
editorStickyScroll.shadow #000000
editorStickyScrollGutter.background #000000
editorStickyScrollHover.background #242424
editorSuggestWidget.background #000000
editorSuggestWidget.border #f904cc
editorSuggestWidget.focusHighlightForeground #f904cc
editorSuggestWidget.foreground #f6fcfc
editorSuggestWidget.highlightForeground #e4f403
editorSuggestWidget.selectedBackground #f904cc33
editorSuggestWidget.selectedForeground #f6fcfc
editorSuggestWidgetStatus.foreground #929292
editorUnicodeHighlight.background #f904cc22
editorUnicodeHighlight.border #f904cc
editorUnnecessaryCode.border #929292
editorUnnecessaryCode.opacity #92929260
editorWarning.background #e4f40322
editorWarning.border #e4f403
editorWarning.foreground #e4f403
editorWatermark.foreground #929292
editorWhitespace.foreground #494949
editorWidget.background #242424
editorWidget.border #6d6d6d
editorWidget.foreground #f6fcfc
editorWidget.resizeBorder #f904cc
errorForeground #da0000
extensionBadge.remoteBackground #f904cc
extensionBadge.remoteForeground #000000
extensionButton.background #242424
extensionButton.foreground #f6fcfc
extensionButton.hoverBackground #494949
extensionButton.prominentBackground #e4f403
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #f6fcfc
extensionButton.separator #929292
extensionIcon.preReleaseForeground #f904cc
extensionIcon.privateForeground #929292
extensionIcon.sponsorForeground #da0000
extensionIcon.starForeground #e4f403
extensionIcon.verifiedForeground #00cc00
focusBorder #f904cc
foreground #f6fcfc
gauge.background #242424
gauge.border #929292
gauge.errorBackground #da000033
gauge.errorForeground #da0000
gauge.foreground #f6fcfc
gauge.warningBackground #e4f40333
gauge.warningForeground #e4f403
git.blame.editorDecorationForeground #929292
gitDecoration.addedResourceForeground #00ff00
gitDecoration.conflictingResourceForeground #ff00ff
gitDecoration.deletedResourceForeground #ff0040
gitDecoration.ignoredResourceForeground #666666
gitDecoration.modifiedResourceForeground #ff8000
gitDecoration.renamedResourceForeground #e4f403
gitDecoration.stageDeletedResourceForeground #da0000
gitDecoration.stageModifiedResourceForeground #f904cc
gitDecoration.submoduleResourceForeground #0080ff
gitDecoration.untrackedResourceForeground #00ffff
icon.foreground #f6fcfc
inlineChat.background #242424
inlineChat.border #6d6d6d
inlineChat.foreground #f6fcfc
inlineChat.shadow #000000
inlineChatDiff.inserted #00cc0033
inlineChatDiff.removed #ff444433
inlineChatInput.background #1a1a1a
inlineChatInput.border #6d6d6d
inlineChatInput.focusBorder #f904cc
inlineChatInput.placeholderForeground #929292
inlineEdit.gutterIndicator.background #1a1a1a
inlineEdit.gutterIndicator.primaryBackground #1a1a1a
inlineEdit.gutterIndicator.primaryBorder #f904cc
inlineEdit.gutterIndicator.primaryForeground #f904cc
inlineEdit.gutterIndicator.secondaryBackground #1a1a1a
inlineEdit.gutterIndicator.secondaryBorder #0013ea
inlineEdit.gutterIndicator.secondaryForeground #0013ea
inlineEdit.gutterIndicator.successfulBackground #1a1a1a
inlineEdit.gutterIndicator.successfulBorder #00cc00
inlineEdit.gutterIndicator.successfulForeground #00cc00
inlineEdit.modifiedBackground #0013ea20
inlineEdit.modifiedBorder #0013ea
inlineEdit.modifiedChangedLineBackground #0013ea30
inlineEdit.modifiedChangedTextBackground #0013ea40
inlineEdit.originalBackground #f904cc20
inlineEdit.originalBorder #f904cc
inlineEdit.originalChangedLineBackground #f904cc30
inlineEdit.originalChangedTextBackground #f904cc40
inlineEdit.tabWillAcceptModifiedBorder #00cc00
inlineEdit.tabWillAcceptOriginalBorder #e4f403
input.background #242424
input.border #6d6d6d
input.foreground #f6fcfc
input.placeholderForeground #fffeff
inputOption.activeBackground #494949
inputOption.activeBorder #6d6d6d
inputOption.activeForeground #f6fcfc
inputOption.hoverBackground #6d6d6d
inputValidation.errorBackground #da000033
inputValidation.errorBorder #da0000
inputValidation.errorForeground #da0000
inputValidation.infoBackground #0013ea33
inputValidation.infoBorder #0013ea
inputValidation.infoForeground #0013ea
inputValidation.warningBackground #e4f40333
inputValidation.warningBorder #e4f403
inputValidation.warningForeground #e4f403
interactive.activeCodeBorder #f904cc
interactive.inactiveCodeBorder #6d6d6d
keybindingLabel.background #242424
keybindingLabel.border #929292
keybindingLabel.bottomBorder #f904cc
keybindingLabel.foreground #f6fcfc
keybindingTable.headerBackground #242424
keybindingTable.rowsBackground #1a1a1a
list.activeSelectionBackground #2266cc
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #f6fcfc
list.deemphasizedForeground #929292
list.dropBackground #494949
list.dropBetweenBackground #f904cc
list.errorForeground #ff0040
list.filterMatchBackground #ff00ff55
list.filterMatchBorder #e4f403
list.focusAndSelectionOutline #f904cc
list.focusBackground #0013ea44
list.focusForeground #f6fcfc
list.focusHighlightForeground #f904cc
list.focusOutline #ff0080
list.highlightForeground #00ff80
list.hoverBackground #334433
list.hoverForeground #ccffcc
list.inactiveFocusBackground #494949
list.inactiveFocusOutline #666666
list.inactiveSelectionBackground #663366
list.inactiveSelectionForeground #cccccc
list.inactiveSelectionIconForeground #929292
list.invalidItemForeground #da0000
list.warningForeground #ff8000
listFilterWidget.background #1a1a1a
listFilterWidget.noMatchesOutline #da0000
listFilterWidget.outline #6d6d6d
listFilterWidget.shadow #000000
menu.background #1a1a1a
menu.border #6d6d6d
menu.foreground #f6fcfc
menu.selectionBackground #f904cc
menu.selectionBorder #f904cc
menu.selectionForeground #000000
menu.separatorBackground #6d6d6d
menubar.selectionBackground #f904cc
menubar.selectionBorder #f904cc
menubar.selectionForeground #f6fcfc
merge.border #f904cc
merge.commonContentBackground #92929233
merge.commonHeaderBackground #92929266
merge.currentContentBackground #0013ea22
merge.currentHeaderBackground #0013ea66
merge.incomingContentBackground #00cc0022
merge.incomingHeaderBackground #00cc0066
mergeEditor.change.background #242424
mergeEditor.change.word.background #494949
mergeEditor.changeBase.background #e4f40333
mergeEditor.changeBase.word.background #e4f40355
mergeEditor.conflict.handled.minimapOverViewRuler #00cc00
mergeEditor.conflict.handledFocused.border #0013ea
mergeEditor.conflict.handledUnfocused.border #929292
mergeEditor.conflict.input1.background #0013ea33
mergeEditor.conflict.input2.background #00cc0033
mergeEditor.conflict.unhandled.minimapOverViewRuler #da0000
mergeEditor.conflict.unhandledFocused.border #f904cc
mergeEditor.conflict.unhandledUnfocused.border #da0000
mergeEditor.conflictingLines.background #da000033
minimap.background #000000
minimap.errorHighlight #da000040
minimap.findMatchHighlight #00ff0040
minimap.foregroundOpacity #f6fcfc40
minimap.infoHighlight #0013ea40
minimap.selectionHighlight #0013ea40
minimap.selectionOccurrenceHighlight #f904cc40
minimap.warningHighlight #e4f40340
minimapGutter.addedBackground #00cc00
minimapGutter.deletedBackground #ff4444
minimapGutter.modifiedBackground #ffaa00
minimapSlider.activeBackground #929292
minimapSlider.background #494949
minimapSlider.hoverBackground #6d6d6d
multiDiffEditor.background #000000
multiDiffEditor.border #6d6d6d
multiDiffEditor.headerBackground #1a1a1a
notebook.cellBorderColor #929292
notebook.cellEditorBackground #000000
notebook.cellHoverBackground #242424
notebook.cellInsertionIndicator #f904cc
notebook.cellStatusBarItemHoverBackground #494949
notebook.cellToolbarSeparator #929292
notebook.editorBackground #000000
notebook.focusedCellBackground #242424
notebook.focusedCellBorder #f904cc
notebook.focusedEditorBorder #f904cc
notebook.inactiveFocusedCellBorder #929292
notebook.inactiveSelectedCellBorder #929292
notebook.outputContainerBackgroundColor #1a1a1a
notebook.outputContainerBorderColor #929292
notebook.selectedCellBackground #24242433
notebook.selectedCellBorder #0013ea
notebook.symbolHighlightBackground #e4f40333
notebookEditorOverviewRuler.runningCellForeground #f904cc
notebookScrollbarSlider.activeBackground #f904cc
notebookScrollbarSlider.background #494949
notebookScrollbarSlider.hoverBackground #929292
notebookStatusErrorIcon.foreground #da0000
notebookStatusRunningIcon.foreground #e4f403
notebookStatusSuccessIcon.foreground #00cc00
notificationCenter.border #6d6d6d
notificationCenterHeader.background #1a1a1a
notificationCenterHeader.foreground #f6fcfc
notificationLink.foreground #0013ea
notifications.background #494949
notifications.border #6d6d6d
notifications.foreground #f6fcfc
notificationsErrorIcon.foreground #da0000
notificationsInfoIcon.foreground #0013ea
notificationsWarningIcon.foreground #e4f403
notificationToast.border #6d6d6d
outputView.background #242424
outputViewStickyScroll.background #1a1a1a
panel.background #000000
panel.border #6d6d6d
panel.dropBorder #929292
panelInput.border #6d6d6d
panelSection.border #6d6d6d
panelSection.dropBackground #494949
panelSectionHeader.background #1a1a1a
panelSectionHeader.border #6d6d6d
panelSectionHeader.foreground #f6fcfc
panelStickyScroll.background #1a1a1a
panelStickyScroll.border #6d6d6d
panelStickyScroll.shadow #000000
panelTitle.activeBorder #929292
panelTitle.activeForeground #f6fcfc
panelTitle.border #6d6d6d
panelTitle.inactiveForeground #fffeff
panelTitleBadge.background #f904cc
panelTitleBadge.foreground #000000
peekView.border #f904cc
peekViewEditor.background #000000
peekViewEditor.matchHighlightBackground #e4f40355
peekViewEditor.matchHighlightBorder #e4f403
peekViewEditorGutter.background #000000
peekViewEditorStickyScroll.background #000000
peekViewEditorStickyScrollGutter.background #000000
peekViewResult.background #1a1a1a
peekViewResult.fileForeground #f6fcfc
peekViewResult.lineForeground #929292
peekViewResult.matchHighlightBackground #e4f40355
peekViewResult.selectionBackground #0013ea33
peekViewResult.selectionForeground #f6fcfc
peekViewTitle.background #f904cc
peekViewTitleDescription.foreground #000000
peekViewTitleLabel.foreground #000000
pickerGroup.border #929292
pickerGroup.foreground #f6fcfc
ports.iconRunningProcessForeground #00cc00
problemsErrorIcon.foreground #da0000
problemsInfoIcon.foreground #0013ea
problemsWarningIcon.foreground #e4f403
profileBadge.background #f904cc
profileBadge.foreground #000000
profiles.sashBorder #6d6d6d
progressBar.background #0013ea
quickInput.background #242424
quickInput.foreground #f6fcfc
quickInputList.focusBackground #f904cc33
quickInputList.focusForeground #f6fcfc
quickInputList.focusIconForeground #f904cc
quickInputTitle.background #f904cc
radio.activeBackground #f904cc
radio.activeBorder #f904cc
radio.activeForeground #000000
radio.inactiveBackground #242424
radio.inactiveBorder #6d6d6d
radio.inactiveForeground #929292
radio.inactiveHoverBackground #494949
sash.hoverBorder #f904cc
scmGraph.foreground1 #f904cc
scmGraph.foreground2 #0013ea
scmGraph.foreground3 #00cc00
scmGraph.foreground4 #e4f403
scmGraph.foreground5 #da0000
scmGraph.historyItemBaseRefColor #e4f403
scmGraph.historyItemHoverAdditionsForeground #00cc00
scmGraph.historyItemHoverDefaultLabelBackground #242424
scmGraph.historyItemHoverDefaultLabelForeground #f6fcfc
scmGraph.historyItemHoverDeletionsForeground #da0000
scmGraph.historyItemHoverLabelForeground #f6fcfc
scmGraph.historyItemRefColor #f904cc
scmGraph.historyItemRemoteRefColor #0013ea
scrollbar.shadow #000000
scrollbarSlider.activeBackground #929292
scrollbarSlider.background #494949
scrollbarSlider.hoverBackground #6d6d6d
search.resultsInfoForeground #f6fcfc
searchEditor.findMatchBackground #00ff0033
searchEditor.findMatchBorder #00ff00
searchEditor.textInputBorder #6d6d6d
selection.background #f904cc
settings.checkboxBackground #000000
settings.checkboxBorder #929292
settings.checkboxForeground #f6fcfc
settings.dropdownBackground #242424
settings.dropdownBorder #929292
settings.dropdownForeground #f6fcfc
settings.dropdownListBorder #f904cc
settings.focusedRowBackground #242424
settings.focusedRowBorder #f904cc
settings.headerBorder #929292
settings.headerForeground #f6fcfc
settings.modifiedItemIndicator #e4f403
settings.numberInputBackground #000000
settings.numberInputBorder #929292
settings.numberInputForeground #f6fcfc
settings.rowHoverBackground #494949
settings.sashBorder #f904cc
settings.settingsHeaderHoverForeground #f904cc
settings.textInputBackground #000000
settings.textInputBorder #929292
settings.textInputForeground #f6fcfc
sideBar.background #000000
sideBar.border #ff0080
sideBar.dropBackground #ff00ff
sideBar.foreground #00ff80
sideBarActivityBarTop.border #8000ff
sideBarSectionHeader.background #1a1a2e
sideBarSectionHeader.border #8000ff
sideBarSectionHeader.foreground #80ff00
sideBarStickyScroll.background #1a1a1a
sideBarStickyScroll.border #6d6d6d
sideBarStickyScroll.shadow #000000
sideBarTitle.background #1a1a1a
sideBarTitle.border #6d6d6d
sideBarTitle.foreground #00ffff
sideBySideEditor.horizontalBorder #6d6d6d
sideBySideEditor.verticalBorder #6d6d6d
simpleFindWidget.sashBorder #f904cc
statusBar.background #000000
statusBar.border #6d6d6d
statusBar.debuggingBackground #da0000
statusBar.debuggingForeground #f6fcfc
statusBar.focusBorder #f904cc
statusBar.foreground #f6fcfc
statusBar.noFolderBackground #929292
statusBar.noFolderForeground #b6b6b6
statusBarItem.activeBackground #6d6d6d
statusBarItem.compactHoverBackground #494949
statusBarItem.errorBackground #da0000
statusBarItem.errorForeground #f6fcfc
statusBarItem.errorHoverBackground #f904cc
statusBarItem.errorHoverForeground #da0000
statusBarItem.focusBorder #f904cc
statusBarItem.hoverBackground #494949
statusBarItem.offlineBackground #494949
statusBarItem.offlineForeground #f6fcfc
statusBarItem.offlineHoverBackground #6d6d6d
statusBarItem.offlineHoverForeground #f6fcfc
statusBarItem.prominentBackground #f904cc
statusBarItem.prominentForeground #f6fcfc
statusBarItem.prominentHoverBackground #da0000
statusBarItem.prominentHoverForeground #f6fcfc
statusBarItem.remoteBackground #f904cc
statusBarItem.remoteForeground #000000
statusBarItem.remoteHoverBackground #da0000
statusBarItem.remoteHoverForeground #f6fcfc
statusBarItem.warningBackground #e4f403
statusBarItem.warningForeground #000000
statusBarItem.warningHoverBackground #ffff40
statusBarItem.warningHoverForeground #000000
symbolIcon.arrayForeground #00ff80
symbolIcon.booleanForeground #e4f403
symbolIcon.classForeground #f904cc
symbolIcon.colorForeground #ff00ff
symbolIcon.constantForeground #0013ea
symbolIcon.constructorForeground #f904cc
symbolIcon.enumeratorForeground #00ff80
symbolIcon.enumeratorMemberForeground #e4f403
symbolIcon.eventForeground #ff00ff
symbolIcon.fieldForeground #00ff80
symbolIcon.fileForeground #f6fcfc
symbolIcon.folderForeground #0013ea
symbolIcon.functionForeground #e4f403
symbolIcon.interfaceForeground #f904cc
symbolIcon.keyForeground #00ff80
symbolIcon.keywordForeground #f904cc
symbolIcon.methodForeground #e4f403
symbolIcon.moduleForeground #0013ea
symbolIcon.namespaceForeground #f904cc
symbolIcon.nullForeground #929292
symbolIcon.numberForeground #00ff80
symbolIcon.objectForeground #f6fcfc
symbolIcon.operatorForeground #f904cc
symbolIcon.packageForeground #0013ea
symbolIcon.propertyForeground #00ff80
symbolIcon.referenceForeground #929292
symbolIcon.snippetForeground #e4f403
symbolIcon.stringForeground #00ff80
symbolIcon.structForeground #f904cc
symbolIcon.textForeground #f6fcfc
symbolIcon.typeParameterForeground #e4f403
symbolIcon.unitForeground #0013ea
symbolIcon.variableForeground #00ff80
tab.activeBackground #001122
tab.activeBorder #0066ff
tab.activeBorderTop #000000
tab.activeForeground #00ffff
tab.activeModifiedBorder #ff0080
tab.border #333333
tab.dragAndDropBorder #f904cc
tab.hoverBackground #2a2a44
tab.hoverBorder #f904cc
tab.hoverForeground #ffffff
tab.inactiveBackground #111111
tab.inactiveForeground #aaaaaa
tab.inactiveModifiedBorder #ff8000
tab.lastPinnedBorder #00ff80
tab.selectedBackground #001122
tab.selectedBorderTop #f904cc
tab.selectedForeground #00ffff
tab.unfocusedActiveBackground #242424
tab.unfocusedActiveBorder #0066ff
tab.unfocusedActiveBorderTop #000000
tab.unfocusedActiveForeground #929292
tab.unfocusedActiveModifiedBorder #ff0080
tab.unfocusedHoverBackground #222244
tab.unfocusedHoverBorder #f904cc
tab.unfocusedHoverForeground #ffffff
tab.unfocusedInactiveBackground #1a1a1a
tab.unfocusedInactiveForeground #6d6d6d
tab.unfocusedInactiveModifiedBorder #ff8000
terminal.ansiBlack #000000
terminal.ansiBlue #0080ff
terminal.ansiBrightBlack #888888
terminal.ansiBrightBlue #40a0ff
terminal.ansiBrightCyan #40ffff
terminal.ansiBrightGreen #40ff40
terminal.ansiBrightMagenta #ff40ff
terminal.ansiBrightRed #ff4040
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffff40
terminal.ansiCyan #00ffff
terminal.ansiGreen #00ff00
terminal.ansiMagenta #ff00ff
terminal.ansiRed #ff0040
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffff00
terminal.background #000000
terminal.border #6d6d6d
terminal.dropBackground #49494955
terminal.findMatchBackground #e4f40355
terminal.findMatchBorder #e4f403
terminal.findMatchHighlightBackground #e4f40333
terminal.findMatchHighlightBorder #e4f403
terminal.foreground #f6fcfc
terminal.hoverHighlightBackground #f904cc33
terminal.inactiveSelectionBackground #92929233
terminal.initialHintForeground #929292
terminal.selectionBackground #ff00ff88
terminal.selectionForeground #f6fcfc
terminal.tab.activeBorder #f904cc
terminalCommandDecoration.defaultBackground #929292
terminalCommandDecoration.errorBackground #da0000
terminalCommandDecoration.successBackground #00cc00
terminalCommandGuide.foreground #f904cc
terminalCursor.background #000000
terminalCursor.foreground #f6fcfc
terminalOverviewRuler.border #929292
terminalOverviewRuler.cursorForeground #f904cc
terminalOverviewRuler.findMatchForeground #e4f403
terminalStickyScroll.background #242424
terminalStickyScroll.border #f904cc
terminalStickyScrollHover.background #494949
terminalSymbolIcon.aliasForeground #00cc00
terminalSymbolIcon.argumentForeground #929292
terminalSymbolIcon.fileForeground #f6fcfc
terminalSymbolIcon.flagForeground #e4f403
terminalSymbolIcon.folderForeground #e4f403
terminalSymbolIcon.inlineSuggestionForeground #f6fcfc
terminalSymbolIcon.methodForeground #00cc00
terminalSymbolIcon.optionForeground #0013ea
terminalSymbolIcon.optionValueForeground #f904cc
terminalSymbolIcon.symbolicLinkFileForeground #0013ea
terminalSymbolIcon.symbolicLinkFolderForeground #f904cc
testing.coverCountBadgeBackground #494949
testing.coverCountBadgeForeground #f6fcfc
testing.coveredBackground #00cc0022
testing.coveredBorder #00cc00
testing.coveredGutterBackground #00cc0033
testing.iconErrored #da0000
testing.iconErrored.retired #da000080
testing.iconFailed #da0000
testing.iconFailed.retired #da000080
testing.iconPassed #00cc00
testing.iconPassed.retired #00cc0080
testing.iconQueued #e4f403
testing.iconQueued.retired #e4f40380
testing.iconSkipped #0013ea
testing.iconSkipped.retired #0013ea80
testing.iconUnset #888888
testing.iconUnset.retired #88888880
testing.message.error.badgeBackground #da000044
testing.message.error.badgeBorder #da0000
testing.message.error.badgeForeground #f6fcfc
testing.message.error.lineBackground #da000022
testing.message.info.decorationForeground #0013ea
testing.message.info.lineBackground #0013ea22
testing.messagePeekBorder #f904cc
testing.messagePeekHeaderBackground #1a1a1a
testing.peekBorder #f904cc
testing.peekHeaderBackground #1a1a1a
testing.runAction #00cc00
testing.uncoveredBackground #ff444422
testing.uncoveredBorder #ff4444
testing.uncoveredBranchBackground #ff444433
testing.uncoveredGutterBackground #ff444444
textBlockQuote.background #1a1a1a
textBlockQuote.border #6d6d6d
textCodeBlock.background #242424
textLink.activeForeground #e4f403
textLink.foreground #0013ea
textPreformat.background #242424
textPreformat.foreground #f6fcfc
textSeparator.foreground #6d6d6d
titleBar.activeBackground #000000
titleBar.activeForeground #f6fcfc
titleBar.border #6d6d6d
titleBar.inactiveBackground #242424
titleBar.inactiveForeground #fffeff
toolbar.activeBackground #1a1a1a
toolbar.hoverBackground #494949
toolbar.hoverOutline #929292
tree.inactiveIndentGuidesStroke #494949
tree.indentGuidesStroke #6d6d6d
tree.tableColumnsBorder #6d6d6d
tree.tableOddRowsBackground #1a1a1a
walkThrough.embeddedEditorBackground #000000
walkthrough.stepTitle.foreground #f904cc
welcomePage.background #000000
welcomePage.progress.background #6d6d6d
welcomePage.progress.foreground #e4f403
welcomePage.tileBackground #242424
welcomePage.tileBorder #6d6d6d
welcomePage.tileHoverBackground #494949
widget.border #6d6d6d
widget.shadow #000000
window.activeBorder #f904cc
window.inactiveBorder #929292 keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #00ffff —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #ff0080 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #0013ea —
meta.block variable.other #ff0080 —
support.other.variable, string.other.link #ff0080 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #ffaa00 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #ffffff —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #e4f403 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #6d6d6d —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #da0000 —
variable.language #da0000 italic
entity.name.method.js #0013ea italic
meta.class-method.js entity.name.function.js, variable.function.constructor #0013ea —
entity.other.attribute-name #f904cc —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #e4f403 italic
entity.other.attribute-name.class #e4f403 —
source.sass keyword.control #0013ea —
constant.character.escape #00ffff —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #0013ea italic
source.js constant.other.object.key.js string.unquoted.label.js #da0000 italic
source.json meta.structure.dictionary.json support.type.property-name.json #f904cc —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #e4f403 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffaa00 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #da0000 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ff8040 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #0013ea —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ff0080 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f904cc —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #00ff80 —
text.html.markdown, punctuation.definition.list_item.markdown #f6fcfc —
text.html.markdown markup.inline.raw.markdown #f904cc —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #929292 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #00ff80 —
markup.italic #ff0080 italic
markup.bold, markup.bold string #ff0080 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #ff0080 bold
markup.underline #ffaa00 underline
markup.quote punctuation.definition.blockquote.markdown #929292 —
string.other.link.title.markdown #0013ea —
string.other.link.description.title.markdown #f904cc —
constant.other.reference.link.markdown #e4f403 —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #f6fcfc —
variable.language.fenced.markdown #929292 —
meta.separator #929292 bold
support.type.property-name.css #f6fcfc —
punctuation.terminator #929292 —
punctuation.definition.tag #929292 —
punctuation.separator #929292 —
punctuation.definition.string #929292 —
punctuation.section.block #929292 —
entity.name.type.class #00ff00 —
entity.name.type.interface #ff4000 —
entity.name.type.struct #ff8000 —
entity.name.type.enum #0080ff —
variable.type.parameter #ff8040 —
variable.parameter.type #ff8040 —
entity.name.function.method #ff8000 —
meta.function.method #ff8000 —
entity.name.function #ffff00 —
meta.function-call.generic #ffff00 —
variable.function #ff8040 —
entity.name.function.preprocessor #929292 —
meta.preprocessor #929292 —
punctuation.decorator #929292 —
entity.name.function.decorator #929292 —
variable.other.object.property #00ff80 —
variable.other.readwrite.alias #00ff80 —
variable.other.object #aaffaa —
variable.other.global #ff8844 —
variable.language.this #ff8844 —
variable.other.local #ccffcc —
variable.parameter #ff8040 —
variable.other.property #aaccff —
variable.other.constant #88ff44 —
variable.readonly #88ff44 —
meta.object-literal.key #f6fcfc —
keyword.control.import #ff4488 —
keyword.control.from #ff4488 —
keyword.control.exception #ff6622 —
keyword.control.trycatch #ff6622 —
string.other.link #ffffff —
markup.inline.raw.string.markdown #ff0080 —
constant.character.escape #00ffaa —
constant.other.placeholder #00ffaa —
constant.language.boolean #00ffff —
constant.language.json #00ffff —
entity.name.label #929292 —
punctuation.definition.label #929292 —
punctuation.definition.comment #6d6d6d —
comment.documentation #929292 —
comment.line.documentation #929292 —
entity.name.namespace #f904cc —
storage.modifier.namespace #f904cc —
markup.bold.markdown #f904cc —
entity.name.module #f904cc —
storage.modifier.module #f904cc —
markup.underline.link #0013ea —
support.class.component #f904cc —
token.error-token #da0000 —
token.debug-token #f904cc —
constant.numeric.css #80ff00 —
export interface User {
id : string ;
name : string ;
role : " admin " | " member " ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response . ok ) {
throw new Error ( ` HTTP ${ response . status }` ) ;
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user . name } ! ` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : " admin " | " member " ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response . ok ) {
throw new Error ( ` HTTP ${ response . status }` ) ;
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user . name } ! ` ;
}
Rave Night | Coding Theme