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 #1D2025 activityBar.activeFocusBorder #1D2025 activityBar.background #1D2025 activityBar.border #1D2025 activityBar.foreground #dbdbdb activityBar.inactiveForeground #53535c tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #5c6773 string, constant.other.symbol #eefb79 — string.regexp, constant.character, constant.other #9fe7fa — constant.numeric #9ffcea — constant.numeric.css
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background
#dbdbdb
activityBarBadge.foreground #1D2025
badge.background #dbdbdb
badge.foreground #1D2025
button.background #d693f8
button.foreground #1f2430
button.hoverBackground #d693f8
debugExceptionWidget.background #232834
debugExceptionWidget.border #191e2a
debugToolBar.background #232834
diffEditor.insertedTextBackground #bae67e26
diffEditor.removedTextBackground #f29e7426
dropdown.background #232834
dropdown.border #373e4c
dropdown.foreground #707a8c
editor.background #1D2025
editor.findMatchBackground #ffcc660d
editor.findMatchBorder #ffcc66
editor.findMatchHighlightBackground #ffcc660d
editor.findMatchHighlightBorder #ffcc6659
editor.findRangeHighlightBackground #262f3e
editor.findRangeHighlightBorder #1f243000
editor.foreground #CBCEBC
editor.inactiveSelectionBackground #262f3e
editor.lineHighlightBackground #1a1d22
editor.rangeHighlightBackground #191e2a
editor.selectionBackground #3d424d
editor.selectionHighlightBackground #262f3e
editor.selectionHighlightBorder #313e52
editor.wordHighlightBackground #262f3e
editor.wordHighlightStrongBackground #ffcc6633
editorBracketMatch.background #707a8c4d
editorBracketMatch.border #707a8c99
editorCodeLens.foreground #5c6773
editorCursor.foreground #b0aeb9
editorError.foreground #ff3333
editorGroup.border #1D2025
editorGroup.emptyBackground #1D2025
editorGroupHeader.noTabsBackground #1D2025
editorGroupHeader.tabsBackground #1D2025
editorGroupHeader.tabsBorder #1D2025
editorGutter.addedBackground #a6cc7099
editorGutter.deletedBackground #f2798399
editorGutter.modifiedBackground #77a8d999
editorHoverWidget.background #232834
editorHoverWidget.border #101521
editorHoverWidget.foreground #cbccc6
editorIndentGuide.activeBackground #707a8cb3
editorIndentGuide.background #707a8c4d
editorLineNumber.activeForeground #707a8ccc
editorLineNumber.foreground #707a8c66
editorLink.activeForeground #ffcc66
editorMarkerNavigation.background #232834
editorOverviewRuler.addedForeground #a6cc7099
editorOverviewRuler.border #1D2025
editorOverviewRuler.deletedForeground #f2798399
editorOverviewRuler.errorForeground #ff3333
editorOverviewRuler.modifiedForeground #77a8d999
editorOverviewRuler.warningForeground #ffcc66
editorRuler.foreground #707a8c4d
editorSuggestWidget.background #232834
editorSuggestWidget.border #101521
editorSuggestWidget.foreground #cbccc6
editorSuggestWidget.highlightForeground #ffcc66
editorSuggestWidget.selectedBackground #191e2a
editorWarning.foreground #ffcc66
editorWhitespace.foreground #707a8c66
editorWidget.background #232834
editorWidget.foreground #cbccc6
extensionButton.prominentBackground #ffcc66
extensionButton.prominentForeground #1f2430
extensionButton.prominentHoverBackground #fac761
focusBorder #50586721
foreground #707a8c
gitDecoration.conflictingResourceForeground #ed8274
gitDecoration.deletedResourceForeground #f27983b3
gitDecoration.ignoredResourceForeground #484f5e
gitDecoration.modifiedResourceForeground #a6cc70
gitDecoration.submoduleResourceForeground #d4bfffb3
gitDecoration.untrackedResourceForeground #d96c75
input.background #232834
input.border #373e4c
input.foreground #cbccc6
input.placeholderForeground #586070
inputOption.activeBorder #d693f8
inputValidation.errorBackground #1f2430
inputValidation.errorBorder #ff3333
inputValidation.infoBackground #1f2430
inputValidation.infoBorder #95e6cb
inputValidation.warningBackground #1f2430
inputValidation.warningBorder #ffd580
list.activeSelectionBackground #32343666
list.activeSelectionForeground #dbdbdb
list.focusBackground #1D2025
list.focusForeground #9b8f78
list.highlightForeground #dbdbdb
list.hoverBackground #3d424d66
list.hoverForeground #dbdbdb
list.inactiveSelectionBackground #3f414466
list.inactiveSelectionForeground #dbdbdb
list.invalidItemForeground #586070
panel.background #1D2025
panel.border #1D2025
panelTitle.activeBorder #dbdbdb
panelTitle.activeForeground #cbccc6
panelTitle.inactiveForeground #707a8c
peekView.border #191e2a
peekViewEditor.background #232834
peekViewEditor.matchHighlightBackground #ffcc6633
peekViewResult.background #232834
peekViewResult.fileForeground #707a8c
peekViewResult.matchHighlightBackground #ffcc6633
peekViewTitle.background #232834
peekViewTitleDescription.foreground #707a8c
peekViewTitleLabel.foreground #707a8c
pickerGroup.border #191e2a
pickerGroup.foreground #484f5e
progressBar.background #d693f8
quickInputList.focusBackground #1D2025
scrollbar.shadow #14182400
scrollbarSlider.activeBackground #707a8c63
scrollbarSlider.background #707a8c2c
scrollbarSlider.hoverBackground #707a8c57
selection.background #2a3546fd
settings.headerForeground #cbccc6
settings.modifiedItemIndicator #77a8d9
sideBar.background #1D2025
sideBar.border #1D2025
sideBar.foreground #b8b0b0
sideBarSectionHeader.background #1D2025
sideBarSectionHeader.foreground #707a8c
sideBarTitle.foreground #707a8c
statusBar.background #1D2025
statusBar.border #191e2a
statusBar.debuggingBackground #ca74f2
statusBar.debuggingForeground #1f2430
statusBar.foreground #707a8c
statusBar.noFolderBackground #232834
statusBarItem.activeBackground #00000050
statusBarItem.hoverBackground #00000030
statusBarItem.prominentBackground #191e2a
statusBarItem.prominentHoverBackground #00000030
statusBarItem.remoteBackground #ff9940
tab.activeBackground #1D2025
tab.activeBorderTop #dbdbdb
tab.activeForeground #edf0f5
tab.border #1f2430
tab.hoverBackground #3d424d66
tab.inactiveBackground #1D2025
tab.inactiveForeground #707a8c
tab.unfocusedActiveBorderTop #707a8c
tab.unfocusedActiveForeground #707a8c
tab.unfocusedInactiveForeground #707a8c
terminal.ansiBlack #191e2a
terminal.ansiBlue #95e6cb
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #95e6cb
terminal.ansiBrightCyan #95e6cb
terminal.ansiBrightGreen #bae67e
terminal.ansiBrightMagenta #d4bfff
terminal.ansiBrightRed #f28779
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffd580
terminal.ansiCyan #95e6cb
terminal.ansiGreen #a6cc70
terminal.ansiMagenta #cfbafa
terminal.ansiRed #ed8274
terminal.ansiWhite #c7c7c7
terminal.ansiYellow #fad07b
terminal.background #1D2025
terminal.foreground #cbccc6
terminalCursor.foreground #ff4057
textBlockQuote.background #232834
textLink.activeForeground #d693f8
textLink.foreground #d693f8
textPreformat.foreground #cbccc6
titleBar.activeBackground #1D2025
titleBar.activeForeground #707a8c
titleBar.border #191e2a
titleBar.inactiveBackground #1D2025
titleBar.inactiveForeground #707a8c
walkThrough.embeddedEditorBackground #232834
widget.shadow #141925 #f07178
constant.language #f27983 —
constant.language.boolean #b796f3 —
variable.other.constant #d693f8 —
variable.language.this #d495f6
storage.modifier.async #ee68af
storage.type.class #ee68af
keyword.operator.new #f088bd —
punctuation.separator, punctuation.terminator #cbccc6b3 —
punctuation.section #cbcebc —
punctuation.definition #CBCCC6B3 —
punctuation.accessor #d693f8 —
source.java storage.type, source.haskell storage.type, source.c storage.type #ef82c3 —
entity.other.inherited-class #9FE7FA —
storage.type.function #f088bd —
storage.type.function.arrow #ee68af
source.java storage.type.primitive #9fe7fa —
variable.parameter, meta.parameter #ee68af
variable.function, variable.annotation, meta.function-call.generic, support.function.go #fced65 —
support.function, support.macro #be8bf7 —
support.function.console #fced65 —
entity.name.import, entity.name.package #a4fb8e —
entity.name.function #95fb79 —
entity.name.class #f5ba78 —
entity.name.tag, meta.tag.sgml #fc4085 —
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag #b3b1ad —
text.html.derivative #cbcebc —
entity.other.attribute-name #6abbcf
support.type, support.class, source.go storage.type #9fe7fa —
support.class.promise #9fe7fa —
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation #cbcebc —
meta.diff, meta.diff.header #c594c5 —
source.ruby variable.other.readwrite #FFD866 —
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag #95e6cb —
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type #5c6773 —
support.type.property-name #A9DC76
entity.other.attribute-name.class.css #A9DC76
entity.other.attribute-name.id.css #FFD866
support.type.property-name.css #cbcebc
constant.numeric.line-number.find-in-files - match #5c6773 —
constant.numeric.line-number.match #ffa759 —
entity.name.filename.find-in-files #A9DC76 —
markup.heading, markup.heading entity.name #A9DC76 bold
markup.underline.link, string.other.link #95e6cb —
markup.italic markup.bold, markup.bold markup.italic — bold italic
meta.separator #5c6773 bold
markup.list punctuation.definition.list.begin #ffd580 —
text.html.markdown markup.inline.raw #f29e74 —
text.html.markdown meta.dummy.line-break #5c6773 —
punctuation.definition.markdown #5c6773 —
string.json support.type.property-name.json #d495f6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #d4b5e4 —
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 #e4e2e5 —
constant.language.json #d495f6 —
constant.numeric.json #f27983 —
string.unquoted, constant.other.object.key #e6b450 —
meta.brace.curly, meta.brace.round, meta.brace.square #b3b1ad —
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #95fb79 —
meta.object-literal.key #6abbcf
entity.name.type.class #9fe7fa —
support.type.primitive #9fe7fa —
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 } ! ` ;
}
Draculish | Coding Theme