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 #141518 activityBar.background #141518 activityBar.border #141518 activityBar.foreground #ffff7e activityBar.inactiveForeground #a9aea0 activityBarBadge.background #80cbc4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle strong, markup.bold — bold emphasis, markup.italic — italic markup.underline — underline comment, punctuation.definition.comment, string.quoted.docstring #616263 italic comment.block #FF1493 italic
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#141518
badge.background #14151830
badge.foreground #464b5d
breadcrumb.activeSelectionForeground #ffffff
breadcrumb.background #141518
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #c692fa
breadcrumbPicker.background #141518
button.background #717cb450
button.hoverBackground #77777727
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #141518
dropdown.border #141518
dropdown.foreground #00ffff
editor.background #141518
editor.findMatchBackground #515c6a
editor.findMatchHighlightBackground #ea5c0055
editor.foldBackground #264f784d
editor.foreground #8f93a2
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d4175
editor.lineHighlightBackground #38343235
editor.lineHighlightBorder #45403d40
editor.selectionBackground #264f7850
editor.selectionHighlightBackground #384756
editor.snippetTabstopHighlightBackground #ffffff15
editor.snippetTabstopHighlightBorder #141518
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.foreground #f2ebe0
editorError.background #b73a3400
editorError.foreground #f48771
editorGroup.border #101010
editorGroup.dropBackground #45403d60
editorGroupHeader.noTabsBackground #141518
editorGroupHeader.tabsBackground #141518
editorGutter.addedBackground #587c0c
editorGutter.background #29282800
editorGutter.commentRangeForeground #7c6f64
editorGutter.deletedBackground #94151b
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #1c1d21
editorHoverWidget.border #504945
editorIndentGuide.activeBackground #66d9ef
editorIndentGuide.background #3b3f5170
editorInfo.background #4490bf00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #66d9ef
editorLineNumber.foreground #7d7d7d
editorLink.activeForeground #8f93a2
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.border #141518
editorOverviewRuler.errorForeground #ff537040
editorOverviewRuler.findMatchForeground #80cbc4
editorOverviewRuler.infoForeground #82aaff40
editorOverviewRuler.warningForeground #ffcb6b40
editorRuler.foreground #3b3f51
editorSuggestWidget.background #141518
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #00ffff
editorWarning.background #a9904000
editorWarning.foreground #cca700
editorWhitespace.foreground #8f93a240
editorWidget.background #1d1d1f
editorWidget.border #7c6f64
editorWidget.foreground #e5e5e5
extensionButton.prominentBackground #c3e88d90
extensionButton.prominentHoverBackground #c3e88d
focusBorder #686d7e
foreground #8f93a2
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #52597590
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
input.background #29282800
input.border #3b3b3b
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
inputValidation.errorBackground #b85651
inputValidation.errorBorder #ea6962
inputValidation.errorForeground #f2ebe0
inputValidation.infoBackground #68948a
inputValidation.infoBorder #7daea3
inputValidation.infoForeground #f2ebe0
inputValidation.warningBackground #c18f41
inputValidation.warningBorder #e2bc80
inputValidation.warningForeground #f2ebe0
list.activeSelectionBackground #45403d40
list.activeSelectionForeground #00ffff
list.dropBackground #32302f80
list.errorForeground #ea6962
list.focusBackground #45403d60
list.focusForeground #00ffff
list.highlightForeground #00ffff
list.hoverBackground #29282800
list.hoverForeground #00ffff
list.inactiveFocusBackground #45403d48
list.inactiveSelectionBackground #45403d48
list.inactiveSelectionForeground #00ffff
list.invalidItemForeground #b85651
list.warningForeground #e2bc80
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #252526
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #00ffff
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionBorder #c4c4c4
menubar.selectionForeground #cccccc
merge.currentContentBackground #27403b
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384b
merge.incomingHeaderBackground #395f8f
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notificationLink.foreground #9ba950
notifications.background #252526
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #ea6962
notificationsInfoIcon.foreground #7daea3
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #141518
panel.border #2b2d34
panelTitle.activeBorder #80cbc4
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #8f93a2
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f004a
peekViewEditorGutter.background #001f33
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #141518
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #ddc7a11a
pickerGroup.foreground #80cbc4
progressBar.background #80cbc4
sash.hoverBorder #00ffff77
scrollbar.shadow #0f111a00
scrollbarSlider.activeBackground #ffffff7e
scrollbarSlider.background #7e7e7e7e
scrollbarSlider.hoverBackground #ffffff46
selection.background #256aa780
settings.checkboxBackground #0f111a
settings.checkboxForeground #8f93a2
settings.dropdownBackground #141518
settings.dropdownForeground #77ff77
settings.dropdownListBorder #141518
settings.headerForeground #80cbc4
settings.modifiedItemIndicator #00ffff
settings.numberInputBackground #141518
settings.numberInputBorder #141518
settings.numberInputForeground #ffff00
settings.textInputBackground #141518
settings.textInputBorder #141518
settings.textInputForeground #bb77ff
sideBar.background #141518
sideBar.border #2b2d34
sideBar.foreground #aaaaaa
sideBarSectionHeader.background #29282800
sideBarSectionHeader.foreground #ff7700
sideBarTitle.foreground #77ff77
statusBar.background #141518
statusBar.border #141518
statusBar.debuggingBackground #141518
statusBar.debuggingForeground #7e7e7e
statusBar.foreground #00ffff
statusBar.noFolderBackground #0f111a
statusBarItem.hoverBackground #01fdfd1a
statusBarItem.remoteBackground #80cbc4
statusBarItem.remoteForeground #141518
tab.activeBorder #141518
tab.activeForeground #ffffff
tab.activeModifiedBorder #525975
tab.border #141518
tab.inactiveBackground #141518
tab.inactiveForeground #777777
tab.unfocusedActiveBorder #464b5d
tab.unfocusedActiveForeground #8f93a2
terminal.ansiBlack #141518
terminal.ansiBlue #82aaff
terminal.ansiBrightBlack #464b5d
terminal.ansiBrightBlue #82aaff
terminal.ansiBrightCyan #89ddff
terminal.ansiBrightGreen #c3e88d
terminal.ansiBrightMagenta #bb77ff
terminal.ansiBrightRed #ff5370
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffcb6b
terminal.ansiCyan #89ddff
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #bb77ff
terminal.ansiRed #ff5370
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffcb6b
terminal.background #141518
terminalCursor.background #141518
terminalCursor.foreground #ffcb6b
textLink.activeForeground #8f93a2
textLink.foreground #80cbc4
titleBar.activeBackground #141518
titleBar.activeForeground #f7f7f7
titleBar.border #141518
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #7c6f64 source.cs meta.preprocessor
storage.type, source.cs storage.type, support.type.exception, variable.object.property, source.css entity.name.tag, entity.other.attribute-name, variable.other.constant.property, meta.definition.method entity.name.function, source.cs meta.method.identifier entity.name.function, text.html.markdown beginning.punctuation.definition.list #F3F99D —
keyword.type, support.type, entity.name.type, keyword.other.unit, storage.type.primitive, entity.other.attribute-name.id, text.html.markdown markup.quote, source.cs meta.method.return-type, entity.other.attribute-name.class #9AEDFE —
string, constant.numeric, support.constant, markup.inserted.diff, constant.language.null, meta.diff.header.to-file, constant.language.boolean, constant.language.undefined, source.java constant.language, source.python constant.language, meta.structure.dictionary.json string.quoted.double.json #5AF78E —
meta.require, markup.heading, support.function, keyword.other.get, keyword.other.set, meta.function-call, entity.name.function, variable.language.super, keyword.other.special-method, source.cs entity.name.function, meta.function entity.name.function, entity.name.section.group-title.ini, source.cs meta.method-call meta.method, source.java meta.method-call meta.method, source.java meta.definition.variable entity.name.function, source.java meta.method-call meta.inner-class meta.method meta.method-call meta.method #57C7FF —
source., variable, meta.tag, support.class, meta.attribute., support.variable, support.constant, text.html.derivative, punctuation.definition.tag, keyword.operator.arithmetic, punctuation.definition.attribute., source.java storage.modifier.import, source.cs entity.name.type.namespace, source.java storage.modifier.package, source.python meta.function-call.arguments, meta.definition.variable entity.name.function, source.java meta.method-call meta.inner-class meta.method #EFF0EB —
markup., support.node, support.module, entity.name.tag, meta.link.reference, markup.deleted.diff, entity.name.tag.yaml, entity.name.type.class, meta.object-literal.key, meta.diff.header.from-file, markup.underline.link.image, keyword.other.definition.ini, punctuation.section.embedded, meta.object-literal.key string, support.type.property-name.json, text.html.markdown meta.link.inline, source.java storage.type.annotation, source.css support.type.property-name, source.cs meta.class.identifier storage.type, entity.other.inherited-class entity.name.type.module, source.python meta.function entity.name.function.decorator #FF5C57 —
markup.bold markup., markup. markup.bold #FF5C57 bold
variable.parameter — italic
keyword, modifier, storage.modifier, constant.language, support.type.object, variable.language.this, constant.language.json, template.expression.end, template.expression.begin, variable.language.special.self, source.js storage.modifier.async, text.html.markdown markup.inline.raw, source.python meta.function storage.type.function #FF6AC1 —
storage.modifier, storage.type.class.js, variable.language.this, variable.language.this.js — italic
token.error-token #F44747 —
token.debug-token #B267E6 —
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 }!` ;
}
Its Dark | Coding Theme