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 #80CBC4 activityBar.background #090B10 activityBar.border #00000060 activityBar.dropBackground #1d3557 activityBar.foreground #A6ACCD activityBarBadge.background #80CBC4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #A6ACCD — string #C3E88D — punctuation, constant.other.symbol #89DDFF — constant.character.escape, text.html constant.character.entity.named #A6ACCD — constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#1d3557
badge.background #00000030
badge.foreground #464B5D
breadcrumb.activeSelectionForeground #80CBC4
breadcrumb.background #0F111A
breadcrumb.focusForeground #A6ACCD
breadcrumb.foreground #4B526D
breadcrumbPicker.background #090B10
button.background #717CB450
button.foreground #ffffff
debugConsole.errorForeground #f07178
debugConsole.infoForeground #89DDFF
debugConsole.warningForeground #FFCB6B
debugToolBar.background #0F111A
diffEditor.insertedTextBackground #89DDFF20
diffEditor.removedTextBackground #ff9cac20
dropdown.background #0F111A
dropdown.border #FFFFFF10
editor.background #0F111A
editor.findMatchBackground #000000
editor.findMatchBorder #80CBC4
editor.findMatchHighlight #A6ACCD
editor.findMatchHighlightBackground #00000050
editor.findMatchHighlightBorder #ffffff50
editor.findRangeHighlightBackground #FFCB6B30
editor.foreground #A6ACCD
editor.lineHighlightBackground #00000050
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #FFFFFF0d
editor.selectionBackground #717CB450
editor.selectionHighlightBackground #FFCC0020
editor.wordHighlightBackground #ff9cac30
editor.wordHighlightStrongBackground #C3E88D30
editorBracketMatch.background #0F111A
editorBracketMatch.border #FFCC0050
editorCursor.foreground #FFCC00
editorError.foreground #f0717870
editorGroup.border #00000030
editorGroup.dropBackground #f0717880
editorGroup.focusedEmptyBorder #f07178
editorGroupHeader.tabsBackground #0F111A
editorGutter.addedBackground #C3E88D60
editorGutter.deletedBackground #f0717860
editorGutter.modifiedBackground #82AAFF60
editorHoverWidget.background #0F111A
editorHoverWidget.border #FFFFFF10
editorIndentGuide.activeBackground #3B3F51
editorIndentGuide.background #3B3F5170
editorInfo.foreground #82AAFF70
editorLineNumber.activeForeground #4B526D
editorLineNumber.foreground #3B3F5180
editorLink.activeForeground #A6ACCD
editorMarkerNavigation.background #A6ACCD05
editorOverviewRuler.border #0F111A
editorOverviewRuler.errorForeground #f0717840
editorOverviewRuler.findMatchForeground #80CBC4
editorOverviewRuler.infoForeground #82AAFF40
editorOverviewRuler.warningForeground #FFCB6B40
editorRuler.foreground #3B3F51
editorSuggestWidget.background #0F111A
editorSuggestWidget.border #FFFFFF10
editorSuggestWidget.foreground #A6ACCD
editorSuggestWidget.highlightForeground #80CBC4
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #FFCB6B70
editorWhitespace.foreground #A6ACCD40
editorWidget.background #090B10
editorWidget.border #80CBC4
editorWidget.resizeBorder #80CBC4
extensionBadge.remoteForeground #A6ACCD
extensionButton.prominentBackground #C3E88D90
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #C3E88D
focusBorder #FFFFFF00
foreground #A6ACCD
gitDecoration.conflictingResourceForeground #FFCB6B90
gitDecoration.deletedResourceForeground #f0717890
gitDecoration.ignoredResourceForeground #4B526D90
gitDecoration.modifiedResourceForeground #82AAFF90
gitDecoration.untrackedResourceForeground #C3E88D90
input.background #1A1C25
input.border #FFFFFF10
input.foreground #A6ACCD
input.placeholderForeground #A6ACCD60
inputOption.activeBackground #A6ACCD30
inputOption.activeBorder #A6ACCD30
inputValidation.errorBorder #f07178
inputValidation.infoBorder #82AAFF
inputValidation.warningBorder #FFCB6B
list.activeSelectionBackground #090B10
list.activeSelectionForeground #80CBC4
list.dropBackground #f0717880
list.focusBackground #A6ACCD20
list.focusForeground #A6ACCD
list.highlightForeground #80CBC4
list.hoverBackground #090B10
list.hoverForeground #FFFFFF
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #80CBC4
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #0F111A
menu.foreground #A6ACCD
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #80CBC4
menu.separatorBackground #A6ACCD
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #80CBC4
notificationLink.foreground #80CBC4
notifications.background #0F111A
notifications.foreground #A6ACCD
panel.background #090B10
panel.border #00000060
panel.dropBackground #A6ACCD
panelTitle.activeBorder #80CBC4
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #A6ACCD
peekView.border #00000030
peekViewEditor.background #A6ACCD05
peekViewEditor.matchHighlightBackground #717CB450
peekViewEditorGutter.background #A6ACCD05
peekViewResult.background #A6ACCD05
peekViewResult.matchHighlightBackground #717CB450
peekViewResult.selectionBackground #4B526D70
peekViewTitle.background #A6ACCD05
peekViewTitleDescription.foreground #A6ACCD60
pickerGroup.border #FFFFFF1a
pickerGroup.foreground #80CBC4
progressBar.background #80CBC4
quickInput.background #0F111A
quickInput.foreground #4B526D
scrollbar.shadow #00000030
scrollbarSlider.activeBackground #80CBC4
scrollbarSlider.background #8F93A220
scrollbarSlider.hoverBackground #8F93A210
selection.background #00000080
settings.checkboxBackground #090B10
settings.checkboxForeground #A6ACCD
settings.dropdownBackground #090B10
settings.dropdownForeground #A6ACCD
settings.headerForeground #80CBC4
settings.modifiedItemIndicator #80CBC4
settings.numberInputBackground #090B10
settings.numberInputForeground #A6ACCD
settings.textInputBackground #090B10
settings.textInputForeground #A6ACCD
sideBar.background #090B10
sideBar.border #023047
sideBar.foreground #4B526D
sideBarSectionHeader.background #1d3557
sideBarSectionHeader.border #023047
sideBarTitle.foreground #023047
statusBar.background #090B10
statusBar.border #00000060
statusBar.debuggingBackground #C792EA
statusBar.debuggingForeground #ffffff
statusBar.foreground #4B526D
statusBar.noFolderBackground #0F111A
statusBarItem.activeBackground #f0717880
statusBarItem.hoverBackground #464B5D20
statusBarItem.remoteBackground #80CBC4
statusBarItem.remoteForeground #000000
tab.activeBackground #0F111A
tab.activeBorder #80CBC4
tab.activeForeground #FFFFFF
tab.activeModifiedBorder #4B526D
tab.border #0F111A
tab.inactiveBackground #0F111A
tab.inactiveForeground #4B526D
tab.inactiveModifiedBorder #904348
tab.unfocusedActiveBorder #464B5D
tab.unfocusedActiveForeground #A6ACCD
tab.unfocusedActiveModifiedBorder #c05a60
tab.unfocusedInactiveModifiedBorder #904348
terminal.ansiBlack #000000
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #464B5D
terminal.ansiBrightBlue #82AAFF
terminal.ansiBrightCyan #89DDFF
terminal.ansiBrightGreen #C3E88D
terminal.ansiBrightMagenta #C792EA
terminal.ansiBrightRed #f07178
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #FFCB6B
terminal.ansiCyan #89DDFF
terminal.ansiGreen #C3E88D
terminal.ansiMagenta #C792EA
terminal.ansiRed #f07178
terminal.ansiWhite #ffffff
terminal.ansiYellow #FFCB6B
terminalCursor.background #000000
terminalCursor.foreground #FFCB6B
textLink.activeForeground #A6ACCD
textLink.foreground #80CBC4
titleBar.activeBackground #090B10
titleBar.activeForeground #A6ACCD
titleBar.border #00000060
titleBar.inactiveBackground #090B10
titleBar.inactiveForeground #4B526D
tree.indentGuidesStroke #3B3F51
widget.shadow #00000030 variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #A6ACCD —
keyword, modifier, variable.language.this, support.type.object, constant.language #89DDFF —
entity.name.function, support.function #82AAFF —
storage.type, storage.modifier, storage.control #C792EA —
support.module, support.node #f07178 italic
support.type, constant.other.key #FFCB6B —
entity.name.type, entity.other.inherited-class, entity.other #FFCB6B —
comment punctuation.definition.comment, string.quoted.docstring #464B5D italic
entity.name, entity.name.type.class, support.type, support.class, meta.use #FFCB6B —
variable.object.property, meta.field.declaration entity.name.function #f07178 —
meta.definition.method entity.name.function #f07178 —
meta.function entity.name.function #82AAFF —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #89DDFF —
meta.embedded, source.groovy.embedded, meta.template.expression #A6ACCD —
entity.name.tag.yaml #f07178 —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #f07178 —
constant.language.json #89DDFF —
entity.other.attribute-name.class #FFCB6B —
entity.other.attribute-name.id #F78C6C —
source.css entity.name.tag #FFCB6B —
support.type.property-name.css #B2CCD6 —
meta.tag, punctuation.definition.tag #89DDFF —
entity.other.attribute-name #C792EA —
punctuation.definition.entity.html #A6ACCD —
text.html.markdown meta.link.inline, meta.link.reference #f07178 —
text.html.markdown beginning.punctuation.definition.list #89DDFF —
markup.italic #f07178 italic
markup.bold markup.italic, markup.italic markup.bold #f07178 italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #C3E88D —
markup.inline.raw.string.markdown #C3E88D —
keyword.other.definition.ini #f07178 —
entity.name.section.group-title.ini #89DDFF —
source.cs meta.class.identifier storage.type #FFCB6B —
source.cs meta.method.identifier entity.name.function #f07178 —
source.cs meta.method-call meta.method, source.cs entity.name.function #82AAFF —
source.cs storage.type #FFCB6B —
source.cs meta.method.return-type #FFCB6B —
source.cs meta.preprocessor #464B5D —
source.cs entity.name.type.namespace #A6ACCD —
meta.jsx.children, SXNested #A6ACCD —
support.class.component #FFCB6B —
source.cpp meta.block variable.other #A6ACCD —
source.python meta.member.access.python #f07178 —
source.python meta.function-call.python, meta.function-call.arguments #82AAFF —
entity.name.function.call #82AAFF —
source.php support.other.namespace, source.php meta.use support.class #A6ACCD —
constant.keyword #89DDFF italic
entity.name.function #82AAFF —
keyword.control #89DDFF italic
markup.quote #89DDFF italic
markup.fenced_code.block #A6ACCD90 —
punctuation.definition.quote #ff9cac —
meta.structure.dictionary.json support.type.property-name.json #C792EA —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCB6B —
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 #F78C6C —
meta.structure.dictionary.json meta.structure.dictionary.value.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 #f07178 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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 #916b53 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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 #82AAFF —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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 #ff9cac —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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 #C792EA —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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 #C3E88D —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}
d-coders | Coding Theme