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.activeBackground #ffffff00 activityBar.background #00558C activityBar.border #ffffff activityBar.foreground #ffffff activityBar.inactiveForeground #ffffff activityBarBadge.background #007acc tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source, string, string.quoted #A2ACAB — string.quoted.double.json, support.constant.property-value.css, meta.paragraph.markdown #A2ACAB italic punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, comment.line #00B140 — comment.block #E4002B bold entity.name.namespace
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Darth Buddha's - Dank Theme — Darth Buddha's Dank Theme: Blue
activityBarBadge.foreground
#ffffff
badge.background #414141
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #00558C
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #ffffffcc
button.background #00a00080
button.foreground #ffffff
button.hoverBackground #00a000
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #1d1d1d
checkbox.border #ffffff
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #ffffff
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #1d1d1d
dropdown.border #ffffff
dropdown.foreground #cccccc
editor.background #000000
editor.findMatchBackground #515c6a00
editor.findMatchBorder #ea5c00
editor.findMatchHighlightBackground #ea5c0000
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #7b867d4d
editor.foreground #A2ACAB
editor.hoverHighlightBackground #264f7800
editor.lineHighlightBackground #d9d9d926
editor.lineHighlightBorder #64646466
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #a9a9a966
editor.selectionHighlightBackground #41414159
editor.selectionHighlightBorder #ffffffcc
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #00497200
editor.wordHighlightStrongBorder #264f78
editorBracketMatch.background #8c8c8c1a
editorBracketMatch.border #2bff001f
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #ffffff
editorError.background #B73A3400
editorError.border #f48771
editorError.foreground #f4877100
editorGroup.border #ffffff
editorGroup.emptyBackground #000000
editorGroupHeader.border #ffffff
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #ffffff
editorGutter.addedBackground #587c0c
editorGutter.background #000000
editorGutter.commentRangeForeground #ffffff
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #ffffff
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #252526
editorHoverWidget.border #ffffffcc
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground1 #ffffff
editorIndentGuide.background1 #ffffff80
editorInfo.background #4490BF00
editorInfo.border #75beff
editorInfo.foreground #75beff00
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #414141
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #ffffff80
editorSuggestWidget.background #252526
editorSuggestWidget.border #ffffffcc
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0097fb
editorSuggestWidget.selectedBackground #062f4a
editorWarning.background #A9904000
editorWarning.border #cca700
editorWarning.foreground #cca70000
editorWhitespace.foreground #787878cc
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #ffffff
foreground #ffffff
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6565c0
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e49218
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #ffffff
input.background #1d1d1d
input.border #ffffff
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #000000
inputOption.activeForeground #ffffff
list.activeSelectionBackground #094771
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #0097fb
list.hoverBackground #2a2d2e
list.hoverForeground #cccccc
list.inactiveSelectionBackground #414141
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #878787
listFilterWidget.noMatchesOutline #ff1700
listFilterWidget.outline #ffffff
menu.background #252526
menu.border #ffffff
menu.foreground #ffffff
menu.selectionBackground #094771
menu.selectionBorder #ffffff
menu.selectionForeground #ffffff
menu.separatorBackground #ffffff
menubar.selectionBackground #ffffff1a
menubar.selectionBorder #ffffff
menubar.selectionForeground #cccccc
minimap.background #000000
minimap.errorHighlight #f4877100
minimap.findMatchHighlight #515c6a00
minimap.selectionHighlight #a9a9a966
minimap.warningHighlight #cca70000
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #ffffff
notificationCenterHeader.background #00558C
notificationCenterHeader.foreground #ffffff
notifications.background #252526
notifications.border #ffffff
notifications.foreground #cccccc
notificationsErrorIcon.foreground #ff0000
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #ffffff
panel.background #000000
panel.border #ffffff
panelSection.border #ffffff
panelTitle.activeBorder #ffffff
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #ffffff
pickerGroup.foreground #3794ff
progressBar.background #00558C
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #ffffff66
scrollbarSlider.hoverBackground #585858b3
selection.background #256aa7
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #000000
sideBar.border #ffffff
sideBar.dropBackground #383b3d
sideBar.foreground #ffffff
sideBarSectionHeader.background #00558C
sideBarSectionHeader.border #ffffff
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #ffffff
statusBar.background #007acc
statusBar.border #ffffff
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #2d2d2d
tab.activeBorder #ffffff
tab.activeBorderTop #ffffff
tab.activeForeground #ffffff
tab.border #ffffff
tab.hoverBorder #ffffff
tab.inactiveBackground #0a0a0a00
tab.inactiveForeground #ffffff80
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #28e00e
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #218213
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #ffffff
terminal.ansiYellow #e5e510
terminal.border #ffffff
terminal.foreground #ffffff
terminal.selectionBackground #ffffff40
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #3794ff
titleBar.activeBackground #00558C
titleBar.activeForeground #ffffff
titleBar.border #ffffff
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #ffffff
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c variable.other.property.ts, variable.other.property.tsx, markup.underline.link.markdown #5BC2E7 italic
variable.other.object.ts, variable.other.object.tsx, punctuation.definition.string.begin, punctuation.definition.string.end, variable.key #5BC2E7 bold
support, constant.language #298FC2 —
constant, constant.numeric, meta.decorator, entity.name.class, entity, entity.other.attribute-name.class.css #298FC2 bold
keyword, constant.language, keyword.control, storage.type, storage.modifier #AD1AAC bold
constant.character.escape, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.operator.ternary, constant.language.null, support.type.builtin, support.type.primitive #ffffff bold
entity.name.type, entity.name.interface, entity.name.enum, punctuation.separator.dictionary.key-value, entity.name.section.markdown, punctuation.eq #E4002B bold
entity.name.enumMember, punctuation.definition.list.begin.markdown #a03535 bold
meta.function, meta.method, support.function, support.type.property-name.css, support.type.vendored.property-name.css, meta.property-name.css #C5A900 —
entity.name.function #F0E87B —
support.type.property-name, string.key #FDD086 italic
punctuation.separator, punctuation.terminator, keyword.operator, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #dc6e00 bold
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 } !` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 } !` ;
}
Darth Buddha's - Dank Theme | Coding Theme