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 #0a0a0a activityBar.activeBorder #005190 activityBar.activeFocusBorder #005190 activityBar.background #010101 activityBar.border #AD630000 activityBar.dropBorder #005190 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #96002D italic meta.embedded, source.groovy.embedded #F8F8F2 — string #E6DB74 — punctuation.definition.template-expression, punctuation.section.embedded #F92672 — meta.template.expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground
#179AFF
activityBar.inactiveForeground #AD6300
activityBarBadge.background #003F6F
activityBarBadge.foreground #fff
badge.background #003F6F
badge.foreground #fff
bookmarks.lineBackground #179AFF
bookmarks.lineBorder #ff0000
bookmarks.overviewRuler #ff0000
breadcrumb.activeSelectionForeground #E08000
breadcrumb.background #1a1a1a
breadcrumb.focusForeground #FF9507
breadcrumb.foreground #AD6300
breadcrumbPicker.background #1a1a1a
button.background #003F6F
button.foreground #FF9507
button.hoverBackground #005190
checkbox.background #1a1a1a
checkbox.border #AD6300
checkbox.foreground #FF9507
debugIcon.breakpointCurrentStackframeForeground #FF9507
debugIcon.breakpointDisabledForeground #FF004D50
debugIcon.breakpointForeground #FF004D
debugIcon.continueForeground #FF9507
debugIcon.pauseForeground #FF9507
debugIcon.restartForeground #FF9507
debugIcon.startForeground #E08000
debugIcon.stepBackForeground #179AFF
debugIcon.stepIntoForeground #179AFF
debugIcon.stepOutForeground #179AFF
debugIcon.stepOverForeground #179AFF
debugIcon.stopForeground #FF004D
debugTokenExpression.boolean #FFA4C0
debugTokenExpression.error #FF004D
debugTokenExpression.name #FF9507
debugTokenExpression.number #FFC576
debugTokenExpression.string #7FC8FF
debugTokenExpression.value #FFC576
debugToolBar.background #0a0a0a
debugToolBar.border #2a2a2a
debugView.exceptionLabelBackground #00000000
debugView.exceptionLabelForeground #FF004D
debugView.stateLabelBackground #00000000
debugView.stateLabelForeground #58C200
descriptionForeground #E08000
dropdown.background #080808
dropdown.border #AD6300
dropdown.foreground #E08000
dropdown.listBackground #1a1a1a
editor.background #060606
editor.findMatchBackground #AD630080
editor.findMatchHighlightBackground #AD63005c
editor.findRangeHighlightBackground #179AFF30
editor.foreground #a0a0a0
editor.inactiveSelectionBackground #179AFF44
editor.lineHighlightBackground #003F6F30
editor.lineHighlightBorder #003F6F50
editor.selectionBackground #179AFF64
editor.selectionHighlightBackground #179AFF34
editor.snippetFinalTabstopHighlightBackground #00000000
editor.snippetFinalTabstopHighlightBorder #179AFF
editor.snippetTabstopHighlightBackground #00000000
editor.snippetTabstopHighlightBorder #FF9507
editorBracketMatch.background #005190
editorBracketMatch.border #179AFF
editorCursor.background #179AFF
editorCursor.foreground #E08000
editorGroup.dropBackground #212121
editorGroup.emptyBackground #070707
editorGroupHeader.noTabsBackground #0a0a0a
editorGroupHeader.tabsBackground #0a0a0a
editorGutter.addedBackground #58C200
editorGutter.background #0a0a0a
editorGutter.commentRangeForeground #FFA4C0
editorGutter.deletedBackground #C2003B
editorGutter.foldingControlForeground #FF9507
editorGutter.modifiedBackground #005190
editorLightBulb.foreground #FF9507
editorLightBulbAutoFix.foreground #ff0000
editorLineNumber.activeForeground #179AFF
editorLineNumber.foreground #AD6300
editorLink.activeForeground #179AFF
editorRuler.foreground #a0a0a040
editorSuggestWidget.background #060606
editorSuggestWidget.border #003F6F
editorSuggestWidget.foreground #FF9507
editorSuggestWidget.highlightForeground #179AFF
editorSuggestWidget.selectedBackground #003F6F4f
editorWhitespace.foreground #96002D
editorWidget.background #1a1a1a
editorWidget.border #E08000
editorWidget.foreground #AD6300
editorWidget.resizeBorder #E08000
extensionButton.prominentBackground #AD6300
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #FF9507
foreground #b0b0b0
gitDecoration.addedResourceForeground #74FF00
gitDecoration.conflictingResourceForeground #FF719C
gitDecoration.deletedResourceForeground #FF004D
gitDecoration.ignoredResourceForeground #FFC576
gitDecoration.modifiedResourceForeground #179AFF
gitDecoration.submoduleResourceForeground #B1DDFF
gitDecoration.untrackedResourceForeground #CDFFA4
icon.foreground #E08000
input.background #1a1a1a
input.border #AD6300
input.foreground #FF9507
input.placeholderForeground #AD6300
list.activeSelectionBackground #161616
list.activeSelectionForeground #FF9507
list.focusBackground #161616
list.focusForeground #FF9507
list.inactiveSelectionBackground #121212
list.inactiveSelectionForeground #E08000
menu.background #1a1a1a
menu.border #1a1a1a
menu.foreground #E08000
menu.selectionBackground #3f3f3f
menu.selectionBorder #AD6300
menu.selectionForeground #FF9507
menu.separatorBackground #AD6300
menubar.selectionBackground #3f3f3f
menubar.selectionBorder #00000000
menubar.selectionForeground #FF9507
minimap.background #0a0a0a
minimapSlider.activeBackground #003F6F66
minimapSlider.background #003F6F22
minimapSlider.hoverBackground #003F6F33
notificationCenter.border #AD6300
notificationCenterHeader.background #040404
notificationCenterHeader.foreground #FF9507
notifications.background #101010
notificationsErrorIcon.foreground #FF004D
notificationsInfoIcon.foreground #FFBF00
notificationsWarningIcon.foreground #FF7400
panel.background #0f0f0f
panel.border #00000000
panel.dropBorder #003F6F
panelSection.dropBackground #1a1a1a
panelSectionHeader.background #0a0a0a
panelSectionHeader.foreground #FF9507
panelTitle.activeBorder #005190
panelTitle.activeForeground #179AFF
panelTitle.inactiveForeground #AD6300
peekView.border #AD6300
peekViewTitle.background #060606
peekViewTitleDescription.foreground #a0a0a0
peekViewTitleLabel.foreground #FF9507
problemsErrorIcon.foreground #FF004D
problemsInfoIcon.foreground #FFBF00
problemsWarningIcon.foreground #FF7400
scrollbar.shadow #000000
scrollbarSlider.activeBackground #E08000
scrollbarSlider.background #AD6300cc
scrollbarSlider.hoverBackground #E08000cc
settings.checkboxBackground #1a1a1a
settings.checkboxBorder #AD6300
settings.checkboxForeground #FF9507
settings.dropdownBackground #080808
settings.dropdownBorder #AD6300
settings.dropdownForeground #E08000
settings.dropdownListBorder #AD6300
settings.headerForeground #FF9507
settings.modifiedItemIndicator #005190
settings.numberInputBackground #1a1a1a
settings.numberInputBorder #AD6300
settings.numberInputForeground #FF9507
settings.textInputBackground #1a1a1a
settings.textInputBorder #AD6300
settings.textInputForeground #FF9507
sideBar.background #080808
sideBar.border #AD630000
sideBar.dropBackground #2a2a2a
sideBar.foreground #a0a0a0
sideBarSectionHeader.background #1f1f1f
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #FF9507
sideBarTitle.foreground #179AFF
statusBar.background #040404
statusBar.border #E08000
statusBar.debuggingBackground #0a0a0a
statusBar.debuggingBorder #003F6F
statusBar.debuggingForeground #179AFF
statusBar.foreground #FF9507
statusBar.noFolderBackground #040404
statusBar.noFolderBorder #AD6300
statusBar.noFolderForeground #AD6300
statusBarItem.activeBackground #171717
statusBarItem.hoverBackground #171717
symbolIcon.arrayForeground #179AFF
symbolIcon.booleanForeground #179AFF
symbolIcon.classForeground #179AFF
symbolIcon.colorForeground #179AFF
symbolIcon.constantForeground #179AFF
symbolIcon.constructorForeground #179AFF
symbolIcon.enumeratorForeground #179AFF
symbolIcon.enumeratorMemberForeground #179AFF
symbolIcon.eventForeground #179AFF
symbolIcon.fieldForeground #179AFF
symbolIcon.fileForeground #179AFF
symbolIcon.folderForeground #179AFF
symbolIcon.functionForeground #179AFF
symbolIcon.interfaceForeground #179AFF
symbolIcon.keyForeground #179AFF
symbolIcon.keywordForeground #179AFF
symbolIcon.methodForeground #179AFF
symbolIcon.moduleForeground #179AFF
symbolIcon.namespaceForeground #179AFF
symbolIcon.nullForeground #179AFF
symbolIcon.numberForeground #179AFF
symbolIcon.objectForeground #179AFF
symbolIcon.operatorForeground #179AFF
symbolIcon.packageForeground #179AFF
symbolIcon.propertyForeground #179AFF
symbolIcon.referenceForeground #179AFF
symbolIcon.snippetForeground #179AFF
symbolIcon.stringForeground #179AFF
symbolIcon.structForeground #179AFF
symbolIcon.textForeground #179AFF
symbolIcon.typeParameterForeground #179AFF
symbolIcon.unitForeground #179AFF
symbolIcon.variableForeground #179AFF
tab.activeBackground #060606
tab.activeForeground #FF9507
tab.hoverBackground #121212
tab.hoverForeground #E08000
tab.inactiveBackground #2f2f2f
tab.inactiveForeground #9f9f9f
tab.unfocusedActiveBackground #171717
tab.unfocusedActiveForeground #179AFF
tab.unfocusedHoverBackground #060606
tab.unfocusedHoverForeground #005190
tab.unfocusedInactiveBackground #010101
tab.unfocusedInactiveForeground #4f4f4f
terminal.background #010101
terminal.foreground #E08000
terminal.selectionBackground #179AFF
terminalCursor.background #179AFF
terminalCursor.foreground #AD6300
textLink.activeForeground #7FC8FF
textLink.foreground #179AFF
textPreformat.foreground #FF9507
titleBar.activeBackground #121212
titleBar.activeForeground #E08000
titleBar.inactiveBackground #020202
titleBar.inactiveForeground #AD6300
tree.indentGuidesStroke #E08000
walkThrough.embeddedEditorBackground #060606
welcomePage.background #101010
welcomePage.buttonBackground #003F6F
welcomePage.buttonHoverBackground #005190
widget.shadow #00000000 constant.language #AE81FF —
constant.character, constant.other #AE81FF —
storage.type #66D9EF italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution #A6E22E —
entity.other.inherited-class #A6E22E —
entity.name.function #A6E22E
variable.parameter #FD971F italic
entity.other.attribute-name #A6E22E
support.type, support.class #66D9EF italic
invalid.deprecated #F8F8F0 —
meta.structure.dictionary.json string.quoted.double.json #CFCFC2 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #AE81FFA0 —
entity.name.filename.find-in-files #E6DB74 —
markup.bold, markup.italic #66D9EF —
markup.heading.setext #A6E22E bold
markup.heading.markdown — bold
markup.quote.markdown #75715E italic
markup.bold.markdown — bold
string.other.link.title.markdown,string.other.link.description.markdown #AE81FF —
markup.underline.link.markdown,markup.underline.link.image.markdown #E6DB74 —
markup.italic.markdown — italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown #F8F8F2 —
punctuation.definition.list.begin.markdown #A6E22E —
token.error-token #F44747 —
token.debug-token #B267E6 —
variable.language #FD971F —
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 } !` ;
}
doran'vs | Coding Theme