Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder #ef6155 activityBar.activeFocusBorder #472c45 activityBar.background #2f1e2e activityBar.border #2f1e2e activityBar.dropBorder #ef6155 activityBar.foreground #e7e9db tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable.parameter.function #a39e9b — comment, punctuation.definition.comment #776e71 italic punctuation.definition.string, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array #a39e9b — none #a39e9b — keyword.operator
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
myCodebox Themes — myCodebox - Paraíso
activityBar.inactiveForeground
#7a4d7780
activityBarBadge.background #ef6155
activityBarBadge.foreground #e7e9db
badge.background #ef6155
badge.foreground #e7e9db
banner.background #2f1e2e
banner.foreground #7a4d77
banner.iconForeground #7a4d77
breadcrumb.activeSelectionForeground #7a4d77
breadcrumb.background #2f1e2e
breadcrumb.focusForeground #7a4d77
breadcrumb.foreground #7a4d77
breadcrumbPicker.background #2f1e2e
button.background #e96ba8c0
button.border #472c45
button.foreground #e7e9db
button.hoverBackground #e96ba8
button.secondaryBackground #2f1e2e
button.secondaryForeground #7a4d77
button.secondaryHoverBackground #2f1e2e
button.separator #472c45
charts.blue #06b6ef
charts.foreground #e7e9db
charts.green #48b685
charts.lines #41323f
charts.orange #f99b15
charts.purple #815ba4
charts.red #ef6155
charts.yellow #fec418
checkbox.background #2f1e2e
checkbox.border #e96ba8
checkbox.foreground #e96ba8
commandCenter.activeBackground #2f1e2e
commandCenter.activeForeground #7a4d77
commandCenter.background #2f1e2e
commandCenter.border #472c45
commandCenter.foreground #7a4d77
commandCenter.inactiveBorder #472c45
commandCenter.inactiveForeground #7a4d77
debugConsole.errorForeground #ef6155
debugConsole.infoForeground #06b6ef
debugConsole.sourceForeground #7a4d77
debugConsole.warningForeground #f99b15
debugConsoleInputIcon.foreground #7a4d77
debugExceptionWidget.background #2f1e2e
debugExceptionWidget.border #472c45
debugIcon.breakpointCurrentStackframeForeground #7a4d77
debugIcon.breakpointDisabledForeground #7a4d77
debugIcon.breakpointForeground #ef6155
debugIcon.breakpointStackframeForeground #7a4d77
debugIcon.breakpointUnverifiedForeground #7a4d77
debugIcon.continueForeground #48b685
debugIcon.disconnectForeground #f99b15
debugIcon.pauseForeground #06b6ef
debugIcon.restartForeground #48b685
debugIcon.startForeground #48b685
debugIcon.stepBackForeground #7a4d77
debugIcon.stepIntoForeground #e96ba8
debugIcon.stepOutForeground #e96ba8
debugIcon.stepOverForeground #e96ba8
debugIcon.stopForeground #ef6155
debugTokenExpression.boolean #f99b15
debugTokenExpression.error #ef6155
debugTokenExpression.name #5bc4bf
debugTokenExpression.number #f99b15
debugTokenExpression.string #48b685
debugTokenExpression.value #06b6ef
debugToolBar.background #2f1e2e
debugToolBar.border #472c45
debugView.exceptionLabelBackground #2f1e2e
debugView.exceptionLabelForeground #7a4d77
debugView.stateLabelBackground #2f1e2e
debugView.stateLabelForeground #7a4d77
debugView.valueChangedHighlight #48b685
descriptionForeground #b29ab580
diffEditor.border #472c45
diffEditor.diagonalFill #ef615533
diffEditor.insertedLineBackground #48b6851a
diffEditor.insertedTextBackground #48b68533
diffEditor.removedLineBackground #ef61551a
diffEditor.removedTextBackground #ef615533
diffEditorGutter.insertedLineBackground #48b6851a
diffEditorGutter.removedLineBackground #ef61551a
diffEditorOverview.insertedForeground #48b6851a
diffEditorOverview.removedForeground #ef61551a
disabledForeground #7a4d7799
dropdown.background #2f1e2e
dropdown.border #472c45
dropdown.foreground #7a4d77
dropdown.listBackground #2f1e2e
editor.background #2f1e2e
editor.findMatchBackground #fec4184d
editor.findMatchBorder #fec41880
editor.findMatchHighlightBackground #fec41840
editor.findMatchHighlightBorder #472c4500
editor.findRangeHighlightBackground #fec41833
editor.findRangeHighlightBorder #fec4184d
editor.focusedStackFrameHighlightBackground #2f1e2e
editor.foldBackground #e96ba81a
editor.foreground #a39e9b
editor.hoverHighlightBackground #815ba433
editor.inactiveSelectionBackground #4f424c
editor.inlineValuesBackground #2f1e2e
editor.inlineValuesForeground #7a4d77
editor.lineHighlightBackground #41323f40
editor.lineHighlightBorder #41323f00
editor.linkedEditingBackground #2f1e2e
editor.rangeHighlightBackground #3b253a
editor.rangeHighlightBorder #fec41800
editor.selectionBackground #4f424c
editor.selectionForeground #4f424c00
editor.selectionHighlightBackground #472c4500
editor.selectionHighlightBorder #e7e9db
editor.snippetFinalTabstopHighlightBackground #2f1e2e
editor.snippetFinalTabstopHighlightBorder #472c45
editor.snippetTabstopHighlightBackground #2f1e2e
editor.snippetTabstopHighlightBorder #472c45
editor.stackFrameHighlightBackground #2f1e2e
editor.symbolHighlightBackground #2f1e2e
editor.symbolHighlightBorder #472c45
editor.wordHighlightBackground #fec4184d
editor.wordHighlightStrongBackground #fec41840
editor.wordHighlightStrongBorder #e7e9db
editorBracketHighlight.foreground1 #5bc4bf
editorBracketHighlight.foreground2 #5bc4bf
editorBracketHighlight.foreground3 #5bc4bf
editorBracketHighlight.foreground4 #5bc4bf
editorBracketHighlight.foreground5 #5bc4bf
editorBracketHighlight.foreground6 #5bc4bf
editorBracketHighlight.unexpectedBracket.foreground #7a4d77
editorBracketMatch.background #2f1e2e80
editorBracketMatch.border #776e71
editorBracketPairGuide.activeBackground1 #2f1e2e00
editorBracketPairGuide.activeBackground2 #2f1e2e00
editorBracketPairGuide.activeBackground3 #2f1e2e00
editorBracketPairGuide.activeBackground4 #2f1e2e00
editorBracketPairGuide.activeBackground5 #2f1e2e00
editorBracketPairGuide.activeBackground6 #2f1e2e00
editorBracketPairGuide.background1 #2f1e2e00
editorBracketPairGuide.background2 #2f1e2e00
editorBracketPairGuide.background3 #2f1e2e00
editorBracketPairGuide.background4 #2f1e2e00
editorBracketPairGuide.background5 #2f1e2e00
editorBracketPairGuide.background6 #2f1e2e00
editorCodeLens.foreground #7a4d77
editorCommentsWidget.rangeActiveBackground #2f1e2e
editorCommentsWidget.rangeActiveBorder #472c45
editorCommentsWidget.rangeBackground #2f1e2e
editorCommentsWidget.rangeBorder #472c45
editorCommentsWidget.resolvedBorder #472c45
editorCommentsWidget.unresolvedBorder #472c45
editorCursor.background #ef6155
editorCursor.foreground #ef6155
editorError.background #ef61551a
editorError.foreground #ef6155
editorGhostText.background #2f1e2e
editorGhostText.border #472c45
editorGhostText.foreground #7a4d77
editorGroup.border #472c45
editorGroup.dropBackground #7a4d7740
editorGroup.dropIntoPromptBackground #2f1e2e
editorGroup.dropIntoPromptBorder #472c45
editorGroup.dropIntoPromptForeground #7a4d77
editorGroup.emptyBackground #2f1e2e
editorGroup.focusedEmptyBorder #472c45
editorGroupHeader.border #2f1e2e
editorGroupHeader.noTabsBackground #2f1e2e
editorGroupHeader.tabsBackground #231925
editorGroupHeader.tabsBorder #2f1e2e
editorGutter.addedBackground #48b685
editorGutter.background #2f1e2e
editorGutter.commentRangeForeground #7a4d77
editorGutter.deletedBackground #ef6155
editorGutter.foldingControlForeground #7a4d77
editorGutter.modifiedBackground #fec418
editorHint.border #472c45
editorHint.foreground #7a4d77
editorHoverWidget.background #2f1e2e
editorHoverWidget.border #472c45
editorHoverWidget.foreground #b29ab5
editorHoverWidget.highlightForeground #7a4d77
editorHoverWidget.statusBarBackground #2f1e2e
editorIndentGuide.activeBackground #7a4d7799
editorIndentGuide.background #7a4d7726
editorInfo.background #2f1e2e
editorInfo.border #472c45
editorInfo.foreground #7a4d77
editorInlayHint.background #2f1e2e
editorInlayHint.foreground #776e71
editorInlayHint.parameterBackground #2f1e2e
editorInlayHint.parameterForeground #776e71
editorInlayHint.typeBackground #2f1e2e
editorInlayHint.typeForeground #776e71
editorLightBulb.foreground #fec418
editorLightBulbAutoFix.foreground #fec418
editorLineNumber.activeForeground #7a4d77
editorLineNumber.foreground #7a4d7766
editorLink.activeForeground #7a4d77
editorMarkerNavigation.background #2f1e2e
editorMarkerNavigationError.background #2f1e2e
editorMarkerNavigationError.headerBackground #2f1e2e
editorMarkerNavigationInfo.background #2f1e2e
editorMarkerNavigationInfo.headerBackground #2f1e2e
editorMarkerNavigationWarning.background #2f1e2e
editorMarkerNavigationWarning.headerBackground #2f1e2e
editorOverviewRuler.addedForeground #48b685
editorOverviewRuler.background #231925
editorOverviewRuler.border #472c45
editorOverviewRuler.bracketMatchForeground #7a4d77
editorOverviewRuler.commonContentForeground #7a4d7780
editorOverviewRuler.currentContentForeground #48b68580
editorOverviewRuler.deletedForeground #ef6155
editorOverviewRuler.errorForeground #ef6155
editorOverviewRuler.findMatchForeground #fec418
editorOverviewRuler.incomingContentForeground #06b6ef80
editorOverviewRuler.infoForeground #06b6ef
editorOverviewRuler.modifiedForeground #5bc4bf
editorOverviewRuler.rangeHighlightForeground #7a4d77
editorOverviewRuler.selectionHighlightForeground #e7e9db
editorOverviewRuler.warningForeground #f99b15
editorOverviewRuler.wordHighlightForeground #fec418
editorOverviewRuler.wordHighlightStrongForeground #fec418
editorPane.background #2f1e2e
editorRuler.foreground #472c4580
editorStickyScroll.background #e96ba833
editorStickyScrollHover.background #e96ba84D
editorSuggestWidget.background #2f1e2e
editorSuggestWidget.border #472c45
editorSuggestWidget.focusHighlightForeground #ef6155
editorSuggestWidget.foreground #b29ab5
editorSuggestWidget.highlightForeground #815ba4
editorSuggestWidget.selectedBackground #7a4d7740
editorSuggestWidget.selectedForeground #b29ab5
editorSuggestWidget.selectedIconForeground #b29ab5
editorSuggestWidgetStatus.foreground #b29ab5
editorUnicodeHighlight.background #ef61551A
editorUnicodeHighlight.border #ef615533
editorUnnecessaryCode.border #ef615580
editorUnnecessaryCode.opacity #00000066
editorWarning.background #2f1e2e
editorWarning.border #472c45
editorWarning.foreground #7a4d77
editorWhitespace.foreground #7a4d77
editorWidget.background #2f1e2e
editorWidget.border #472c45
editorWidget.foreground #7a4d77
editorWidget.resizeBorder #472c45
errorForeground #ef6155
extensionBadge.remoteBackground #48b685
extensionBadge.remoteForeground #e7e9db
extensionButton.background #48b685c0
extensionButton.foreground #e7e9db
extensionButton.hoverBackground #48b685
extensionButton.prominentBackground #48b685c0
extensionButton.prominentForeground #e7e9db
extensionButton.prominentHoverBackground #48b685
extensionButton.separator #472c45
extensionIcon.preReleaseForeground #ef6155
extensionIcon.sponsorForeground #ef6155
extensionIcon.starForeground #fec418
extensionIcon.verifiedForeground #06b6ef
focusBorder #7a4d77
foreground #b29ab5
gitDecoration.addedResourceForeground #48b685
gitDecoration.conflictingResourceForeground #f99b15
gitDecoration.deletedResourceForeground #ef6155
gitDecoration.ignoredResourceForeground #776e71
gitDecoration.modifiedResourceForeground #fec418
gitDecoration.renamedResourceForeground #06b6ef
gitDecoration.stageDeletedResourceForeground #f99b15
gitDecoration.stageModifiedResourceForeground #5bc4bf
gitDecoration.submoduleResourceForeground #8d8687
gitDecoration.untrackedResourceForeground #48b685
icon.foreground #b29ab5
input.background #231925
input.border #472c45
input.foreground #e7e9db
input.placeholderForeground #7a4d77
inputOption.activeBackground #2f1e2e
inputOption.activeBorder #472c45
inputOption.activeForeground #7a4d77
inputOption.hoverBackground #2f1e2e
inputValidation.errorBackground #2f1e2e
inputValidation.errorBorder #ef6155
inputValidation.errorForeground #b29ab5
inputValidation.infoBackground #2f1e2e
inputValidation.infoBorder #06b6ef
inputValidation.infoForeground #b29ab5
inputValidation.warningBackground #2f1e2e
inputValidation.warningBorder #f99b15
inputValidation.warningForeground #b29ab5
keybindingLabel.background #231925
keybindingLabel.border #472c45
keybindingLabel.bottomBorder #472c45
keybindingLabel.foreground #b29ab5
keybindingTable.headerBackground #472c45
keybindingTable.rowsBackground #7a4d771a
list.activeSelectionBackground #7a4d7740
list.activeSelectionForeground #e7e9db
list.deemphasizedForeground #7a4d77
list.dropBackground #2f1e2ecc
list.errorForeground #ef6155
list.filterMatchBackground #2f1e2e
list.filterMatchBorder #472c45
list.focusAndSelectionOutline #00000000
list.focusBackground #7a4d7740
list.focusForeground #e7e9db
list.focusHighlightForeground #ef6155
list.focusOutline #00000000
list.highlightForeground #7a4d77
list.hoverBackground #7a4d7740
list.hoverForeground #e7e9db
list.inactiveFocusBackground #2f1e2e
list.inactiveFocusOutline #00000000
list.inactiveSelectionBackground #7a4d7740
list.inactiveSelectionForeground #e7e9db
list.inactiveSelectionIconForeground #b29ab5
list.invalidItemForeground #5bc4bf
list.warningForeground #f99b15
listFilterWidget.background #2f1e2e
listFilterWidget.noMatchesOutline #00000000
listFilterWidget.outline #00000000
listFilterWidget.shadow #140c13
menu.background #2f1e2e
menu.border #472c45
menu.foreground #b29ab5
menu.selectionBackground #7a4d7740
menu.selectionBorder #472c45
menu.selectionForeground #e7e9db
menu.separatorBackground #472c45
menubar.selectionBackground #2f1e2e
menubar.selectionBorder #472c45
menubar.selectionForeground #7a4d77
merge.border #2f1e2e
merge.commonContentBackground #2f1e2e
merge.commonHeaderBackground #2f1e2e
merge.currentContentBackground #48b68533
merge.currentHeaderBackground #48b68566
merge.incomingContentBackground #06b6ef33
merge.incomingHeaderBackground #06b6ef66
mergeEditor.change.background #fec4181a
mergeEditor.change.word.background #fec4181a
mergeEditor.changeBase.background #2f1e2e
mergeEditor.changeBase.word.background #2f1e2e
mergeEditor.conflict.handled.minimapOverViewRuler #48b68580
mergeEditor.conflict.handledFocused.border #48b685
mergeEditor.conflict.handledUnfocused.border #48b68540
mergeEditor.conflict.input1.background #2f1e2e
mergeEditor.conflict.input2.background #2f1e2e
mergeEditor.conflict.unhandled.minimapOverViewRuler #f99b1580
mergeEditor.conflict.unhandledFocused.border #f99b15
mergeEditor.conflict.unhandledUnfocused.border #f99b1540
mergeEditor.conflictingLines.background #2f1e2e
minimap.background #2f1e2e
minimap.errorHighlight #ef6155
minimap.findMatchHighlight #fec41880
minimap.foregroundOpacity #7a4d77c0
minimap.selectionHighlight #4f424c80
minimap.selectionOccurrenceHighlight #b9b6b080
minimap.warningHighlight #f99b15
minimapGutter.addedBackground #48b685
minimapGutter.deletedBackground #ef6155
minimapGutter.modifiedBackground #fec418
minimapSlider.activeBackground #e96ba866
minimapSlider.background #41323f33
minimapSlider.hoverBackground #e96ba833
notebook.cellBorderColor #472c45
notebook.cellEditorBackground #231925
notebook.cellHoverBackground #2f1e2e
notebook.cellInsertionIndicator #ef6155
notebook.cellStatusBarItemHoverBackground #472c45
notebook.cellToolbarSeparator #472c45
notebook.editorBackground #2f1e2e
notebook.focusedCellBackground #7a4d771a
notebook.focusedCellBorder #ef6155
notebook.focusedEditorBorder #e96ba880
notebook.inactiveFocusedCellBorder #472c45
notebook.inactiveSelectedCellBorder #472c45
notebook.outputContainerBackgroundColor #2f1e2e
notebook.outputContainerBorderColor #472c45
notebook.selectedCellBackground #2f1e2e
notebook.selectedCellBorder #472c45
notebook.symbolHighlightBackground #2f1e2e
notebookScrollbarSlider.activeBackground #e96ba84D
notebookScrollbarSlider.background #e96ba833
notebookScrollbarSlider.hoverBackground #e96ba866
notebookStatusErrorIcon.foreground #ef6155
notebookStatusRunningIcon.foreground #06b6ef
notebookStatusSuccessIcon.foreground #48b685
notificationCenter.border #472c45
notificationCenterHeader.background #472c45
notificationCenterHeader.foreground #e7e9db
notificationLink.foreground #06b6ef
notifications.background #231925
notifications.border #472c45
notifications.foreground #8d8687
notificationsErrorIcon.foreground #ef6155
notificationsInfoIcon.foreground #06b6ef
notificationsWarningIcon.foreground #f99b15
notificationToast.border #472c45
panel.background #231925
panel.border #2f1e2e
panel.dropBorder #ef6155
panelInput.border #472c45
panelSection.border #ef6155
panelSection.dropBackground #2f1e2e
panelSectionHeader.border #472c45
panelSectionHeader.foreground #7a4d77
panelTitle.activeBorder #ef6155
panelTitle.activeForeground #b9b6b0
panelTitle.inactiveForeground #7a4d77
peekView.border #472c45
peekViewEditor.background #2f1e2e
peekViewEditor.matchHighlightBackground #2f1e2e
peekViewEditor.matchHighlightBorder #472c45
peekViewEditorGutter.background #2f1e2e
peekViewResult.background #2f1e2e
peekViewResult.fileForeground #7a4d77
peekViewResult.lineForeground #7a4d77
peekViewResult.matchHighlightBackground #2f1e2e
peekViewResult.selectionBackground #2f1e2e
peekViewResult.selectionForeground #7a4d77
peekViewTitle.background #2f1e2e
peekViewTitleDescription.foreground #7a4d77
peekViewTitleLabel.foreground #e96ba8
pickerGroup.border #472c45
pickerGroup.foreground #06b6ef
ports.iconRunningProcessForeground #7a4d77
problemsErrorIcon.foreground #ef6155
problemsInfoIcon.foreground #06b6ef
problemsWarningIcon.foreground #f99b15
progressBar.background #231925
quickInput.background #2f1e2e
quickInput.foreground #b688b3
quickInputList.focusBackground #7a4d7740
quickInputList.focusForeground #e7e9db
quickInputList.focusIconForeground #7a4d77
quickInputTitle.background #2f1e2e
sash.hoverBorder #e96ba8
scm.providerBorder #472c45
scrollbar.shadow #140c13
scrollbarSlider.activeBackground #e96ba866
scrollbarSlider.background #e96ba833
scrollbarSlider.hoverBackground #e96ba84D
searchEditor.findMatchBackground #2f1e2e
searchEditor.findMatchBorder #472c45
searchEditor.textInputBorder #472c45
selection.background #4f424c
settings.checkboxBackground #231925
settings.checkboxBorder #472c45
settings.checkboxForeground #e7e9db
settings.dropdownBackground #231925
settings.dropdownBorder #472c45
settings.dropdownForeground #e7e9db
settings.dropdownListBorder #472c45
settings.focusedRowBackground #7a4d7740
settings.focusedRowBorder #2f1e2e
settings.headerBorder #472c45
settings.headerForeground #e96ba8
settings.modifiedItemIndicator #ef6155
settings.numberInputBackground #231925
settings.numberInputBorder #472c45
settings.numberInputForeground #e7e9db
settings.rowHoverBackground #7a4d7740
settings.sashBorder #472c45
settings.textInputBackground #231925
settings.textInputBorder #472c45
settings.textInputForeground #e7e9db
sideBar.background #231925
sideBar.border #2f1e2e
sideBar.dropBackground #41323f1a
sideBar.foreground #b29ab5
sideBarSectionHeader.background #2f1e2e
sideBarSectionHeader.border #231925
sideBarSectionHeader.foreground #b9b6b0
sideBarTitle.foreground #7a4d77
sideBySideEditor.horizontalBorder #472c45
sideBySideEditor.verticalBorder #472c45
statusBar.background #2f1e2e
statusBar.border #2f1e2e
statusBar.debuggingBackground #2f1e2e
statusBar.debuggingBorder #2f1e2e
statusBar.debuggingForeground #7a4d77
statusBar.focusBorder #472c45
statusBar.foreground #7a4d77
statusBar.noFolderBackground #2f1e2e
statusBar.noFolderBorder #2f1e2e
statusBar.noFolderForeground #7a4d77
statusBarItem.activeBackground #3f2c42
statusBarItem.compactHoverBackground #2f1e2e
statusBarItem.errorBackground #ef6155
statusBarItem.errorForeground #e7e9db
statusBarItem.focusBorder #472c45
statusBarItem.hoverBackground #3f2c42
statusBarItem.prominentBackground #48b685
statusBarItem.prominentForeground #e7e9db
statusBarItem.prominentHoverBackground #e96ba8
statusBarItem.remoteBackground #06b6ef
statusBarItem.remoteForeground #e7e9db
statusBarItem.warningBackground #f99b15
statusBarItem.warningForeground #e7e9db
symbolIcon.arrayForeground #EF6155
symbolIcon.booleanForeground #f99b15
symbolIcon.classForeground #f0c818
symbolIcon.colorForeground #7a4d77
symbolIcon.constantForeground #f99b15
symbolIcon.constructorForeground #7a4d77
symbolIcon.enumeratorForeground #7a4d77
symbolIcon.enumeratorMemberForeground #7a4d77
symbolIcon.eventForeground #7a4d77
symbolIcon.fieldForeground #7a4d77
symbolIcon.fileForeground #7a4d77
symbolIcon.folderForeground #7a4d77
symbolIcon.functionForeground #06b6ef
symbolIcon.interfaceForeground #48b685
symbolIcon.keyForeground #a39e9b
symbolIcon.keywordForeground #815ba4
symbolIcon.methodForeground #06b6ef
symbolIcon.moduleForeground #48b685
symbolIcon.namespaceForeground #815ba4
symbolIcon.nullForeground #f99b15
symbolIcon.numberForeground #f99b15
symbolIcon.objectForeground #EF6155
symbolIcon.operatorForeground #a39e9b
symbolIcon.packageForeground #7a4d77
symbolIcon.propertyForeground #7a4d77
symbolIcon.referenceForeground #7a4d77
symbolIcon.snippetForeground #7a4d77
symbolIcon.stringForeground #48b685
symbolIcon.structForeground #7a4d77
symbolIcon.textForeground #e7e9db
symbolIcon.typeParameterForeground #815ba4
symbolIcon.unitForeground #f99b15
symbolIcon.variableForeground #ef6155
tab.activeBackground #2f1e2e
tab.activeBorder #2f1e2e
tab.activeBorderTop #ef6155
tab.activeForeground #b29ab5
tab.activeModifiedBorder #472c45
tab.border #2f1e2e
tab.hoverBackground #2f1e2e80
tab.hoverBorder #2f1e2e
tab.hoverForeground #e7e9db
tab.inactiveBackground #2f1e2e40
tab.inactiveForeground #7a4d77
tab.inactiveModifiedBorder #472c45
tab.lastPinnedBorder #815ba4
tab.unfocusedActiveBackground #2f1e2e
tab.unfocusedActiveBorder #2f1e2e
tab.unfocusedActiveBorderTop #ef615540
tab.unfocusedActiveForeground #7a4d77
tab.unfocusedActiveModifiedBorder #472c45
tab.unfocusedHoverBackground #2f1e2e80
tab.unfocusedHoverBorder #2f1e2e
tab.unfocusedHoverForeground #7a4d77
tab.unfocusedInactiveBackground #2f1e2e40
tab.unfocusedInactiveForeground #7a4d77
tab.unfocusedInactiveModifiedBorder #472c45
terminal.ansiBlack #2F1E2E
terminal.ansiBlue #06B6EF
terminal.ansiBrightBlack #776E71
terminal.ansiBrightBlue #06B6EF
terminal.ansiBrightCyan #5BC4BF
terminal.ansiBrightGreen #48B685
terminal.ansiBrightMagenta #815BA4
terminal.ansiBrightRed #EF6155
terminal.ansiBrightWhite #E7E9DB
terminal.ansiBrightYellow #FEC418
terminal.ansiCyan #5BC4BF
terminal.ansiGreen #286E4F
terminal.ansiMagenta #815BA4
terminal.ansiRed #EF6155
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #FEC418
terminal.background #231925
terminal.border #41323f
terminal.dropBackground #2f1e2e
terminal.findMatchBackground #2f1e2e
terminal.findMatchBorder #472c45
terminal.findMatchHighlightBackground #2f1e2e
terminal.findMatchHighlightBorder #472c45
terminal.foreground #A39E9B
terminal.inactiveSelectionBackground #2f1e2e
terminal.selectionBackground #2f1e2e
terminal.selectionForeground #7a4d77
terminal.tab.activeBorder #472c45
terminalCommandDecoration.defaultBackground #2f1e2e
terminalCommandDecoration.errorBackground #2f1e2e
terminalCommandDecoration.successBackground #2f1e2e
terminalCursor.background #2f1e2e
terminalCursor.foreground #7a4d77
terminalOverviewRuler.cursorForeground #7a4d77
terminalOverviewRuler.findMatchForeground #7a4d77
testing.iconErrored #ef6155
testing.iconFailed #ef6155
testing.iconPassed #48b685
testing.iconQueued #5bc4bf
testing.iconSkipped #e96ba8
testing.iconUnset #f99b15
testing.message.error.decorationForeground #ef6155
testing.message.error.lineBackground #2f1e2e
testing.message.info.decorationForeground #06b6ef
testing.message.info.lineBackground #2f1e2e
testing.peekBorder #472c45
testing.peekHeaderBackground #2f1e2e
testing.runAction #06b6ef
textBlockQuote.background #2f1e2e
textBlockQuote.border #472c45
textCodeBlock.background #2f1e2e
textLink.activeForeground #e96ba8
textLink.foreground #e96ba8
textPreformat.foreground #f99b15
textSeparator.foreground #7a4d77
titleBar.activeBackground #2f1e2e
titleBar.activeForeground #7a4d77
titleBar.border #2f1e2e
titleBar.inactiveBackground #2f1e2e
titleBar.inactiveForeground #7a4d77
toolbar.activeBackground #2f1e2e
toolbar.hoverBackground #3f2c42
toolbar.hoverOutline #ef615500
tree.indentGuidesStroke #472c45
tree.tableColumnsBorder #472c45
tree.tableOddRowsBackground #2f1e2e
walkThrough.embeddedEditorBackground #2f1e2e
welcomePage.background #2f1e2e
welcomePage.progress.background #2f1e2e
welcomePage.progress.foreground #7a4d77
welcomePage.tileBackground #2f1e2e
welcomePage.tileHoverBackground #2f1e2e
widget.shadow #140c13
window.activeBorder #472c45
window.inactiveBorder #472c45 keyword, keyword.control #815ba4 —
variable, punctuation.definition.variable #ef6155 —
entity.name.function, meta.require, support.function.any-method #06b6ef —
meta.class, support.class, entity.name.class, entity.name.type.class #f0c818 —
keyword.other.special-method #06b6ef —
string, constant.other.symbol, entity.other.inherited-class #48b685 —
entity.other.attribute-name #f99b15 —
entity.other.attribute-name.id, punctuation.definition.entity #06b6ef —
markup.heading punctuation.definition.heading, entity.name.section #06b6ef
keyword.other.unit #f99b15 —
markup.bold, punctuation.definition.bold #f6e60d bold
markup.italic, punctuation.definition.italic #815ba4 italic
markup.raw.inline #48b685 —
string.other.link #ef6155 —
constant.other.color #5bc4bf —
constant.character.escape #5bc4bf —
punctuation.section.embedded, variable.interpolation #e96ba8 —
string.quoted.double.json #48b685 —
source.json meta.structure.dictionary.json support.type.property-name.json #5bc4bf —
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 }! ` ;
}
myCodebox Themes | Coding Theme