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.background #ffffff activityBar.foreground #000000 activityBarBadge.background #4f6be6 activityBarBadge.foreground #e9e9ec badge.background #888888 badge.foreground #06060C tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #9b9c9b italic markup.underline.link #7bd88f — string, string.template #b4a800 — constant.numeric #be60db — string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
DD-Light-Dark Theme — DD Light theme DD-Light-Dark Theme | Coding Theme
breadcrumb.background
#ffffff
breadcrumbPicker.background #fffdfd
button.background #0e74e9
button.foreground #ffffff
debugToolBar.background #FDF0ED
diffEditor.insertedTextBackground #07DA8C1A
diffEditor.removedTextBackground #F43E5C1A
dropdown.background #f0f0f0d8
dropdown.listBackground #fafafae5
editor.background #ffffff
editor.findMatchBackground #c3f9f680
editor.findMatchHighlightBackground #c3daf94d
editor.findRangeHighlightBackground #F9CEC31A
editor.hoverHighlightBackground #d4d4d34d
editor.lineHighlightBackground #f7e6e14d
editor.rangeHighlightBackground #c4b6b280
editor.selectionBackground #7eb5e280
editor.selectionHighlightBackground #b4b4b380
editor.wordHighlightBackground #c3dff980
editor.wordHighlightStrongBackground #c3cff980
editorBracketMatch.background #cecbca80
editorBracketMatch.border #F9CEC300
editorCodeLens.foreground #d3d1d180
editorCursor.background #e7e6e5
editorCursor.foreground #4879fd
editorError.foreground #eb2e2e
editorGroup.border #1A1C231A
editorGroup.dropBackground #cfcbcab7
editorGroupHeader.tabsBackground #eeecec
editorGutter.addedBackground #07DA8CB3
editorGutter.deletedBackground #F43E5CB3
editorGutter.modifiedBackground #1EAEAEB3
editorIndentGuide.activeBackground #ececeb
editorIndentGuide.background #e4dcda80
editorInfo.background #ff0000
editorLineNumber.activeForeground #00000080
editorLineNumber.foreground #0707071a
editorOverviewRuler.addedForeground #07DA8CB3
editorOverviewRuler.border #F9CBBE1A
editorOverviewRuler.bracketMatchForeground #06060CB3
editorOverviewRuler.deletedForeground #3e78f4b3
editorOverviewRuler.errorForeground #3e87f4e6
editorOverviewRuler.findMatchForeground #cecdcd
editorOverviewRuler.modifiedForeground #1EAEAEB3
editorOverviewRuler.warningForeground #1EB980B3
editorRuler.foreground #dfdfdf4d
editorSuggestWidget.highlightForeground #c09f34
editorUnnecessaryCode.opacity #000000B3
editorWarning.foreground #1EB980B3
editorWidget.background #f0f0f0
editorWidget.border #eeebeb
errorForeground #db0e30
extensionButton.prominentBackground #c5c1c2
extensionButton.prominentHoverBackground #366ee7
focusBorder #1A1C231A
foreground #06060C
gitDecoration.addedResourceForeground #08ad2c
gitDecoration.conflictingResourceForeground #f72f07
gitDecoration.deletedResourceForeground #d33763
gitDecoration.ignoredResourceForeground #525053
gitDecoration.modifiedResourceForeground #0ebaa0
gitDecoration.stageDeletedResourceForeground #a82a4d
gitDecoration.stageModifiedResourceForeground #f0cc01
gitDecoration.untrackedResourceForeground #db6115
icon.foreground #3d58d4
input.background #eeeeee
input.border #0e74e9
inputOption.activeBorder #E7366580
inputValidation.errorBackground #F43E5C80
inputValidation.errorBorder #ff0a0a7c
list.activeSelectionBackground #cec7c580
list.activeSelectionForeground #06060C
list.dropBackground #e7e5e59d
list.errorForeground #fa0b33ad
list.focusBackground #ff260080
list.focusForeground #06060C
list.highlightForeground #344aad
list.hoverBackground #f7f4f298
list.hoverForeground #06060C
list.inactiveFocusBackground #cec9c780
list.inactiveSelectionBackground #d4cecc4d
list.inactiveSelectionForeground #06060C
list.warningForeground #1EB980B3
menu.background #fafafae5
panelTitle.activeBorder #ebe842
peekView.border #1A1C231A
peekViewEditor.background #faf9f9
peekViewEditor.matchHighlightBackground #dbd8d880
peekViewResult.background #eeebe9
peekViewResult.matchHighlightBackground #e9e8e780
peekViewResult.selectionBackground #cfcdcc80
peekViewTitle.background #f0eeee
pickerGroup.foreground #56d1f7e6
progressBar.background #4ae887
scrollbar.shadow #16161C4D
scrollbarSlider.activeBackground #a8a6a6e6
scrollbarSlider.background #bdb7b6be
scrollbarSlider.hoverBackground #9bbfd6b3
selection.background #AF542780
sideBar.background #ffffff
sideBar.dropBackground #ecececcb
sideBar.foreground #010102b3
sideBarSectionHeader.background #fafafa
sideBarSectionHeader.foreground #06060CB3
statusBar.background #ffffff
statusBar.debuggingBackground #db5613ad
statusBar.debuggingForeground #06060C
statusBar.foreground #3f3e3e
statusBar.noFolderBackground #eceaea
statusBarItem.hoverBackground #9c9c9c
statusBarItem.prominentBackground #e4e1e1
statusBarItem.prominentHoverBackground #056950
statusBarItem.remoteBackground #363636
statusBarItem.remoteForeground #7bd88f
tab.activeBackground #ffffff
tab.activeBorder #f5b11e
tab.border #FDF0ED00
tab.inactiveBackground #e7e6e6
tab.unfocusedInactiveBackground #ff0000
terminal.ansiBlue #01a2c2
terminal.ansiBrightBlue #30a0b6
terminal.ansiBrightCyan #35c9cc
terminal.ansiBrightGreen #1fcf92
terminal.ansiBrightMagenta #F075B5
terminal.ansiBrightRed #EC6A88
terminal.ansiBrightYellow #16ac66
terminal.ansiCyan #59e1e3
terminal.ansiGreen #29D398
terminal.ansiMagenta #EE64AC
terminal.ansiRed #e60e40
terminal.ansiYellow #dfbc49
terminal.background #ffffff
terminal.foreground #323331
terminal.selectionBackground #F9CEC380
terminalCursor.background #06060C
terminalCursor.foreground #81d0d3
textLink.activeForeground #24419e
textLink.foreground #2959a1
titleBar.activeBackground #eeeded
titleBar.inactiveBackground #d6d3d3
walkThrough.embeddedEditorBackground #8ce0eb
widget.shadow #16161C4D punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace #4d4e50 —
constant.language #0e9bad —
constant.character, constant.other #0e9bad —
variable.language #e4192a —
keyword, keyword.operator.logical, keyword.operator.constructor #c75a63 bold
storage.type #0e9bad italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #0e9bad italic
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block #414141 —
variable.other, variable.other.property, variable.other.block #413e3e —
entity.other.inherited-class #6fc92f —
storage.modifier.import, storage.modifier.package #c9960c bold
entity.name.function, support.function #11a832 —
variable.parameter, entity.name.variable.parameter, parameter.variable #e26e26 italic
entity.name.function-call #f8f8f8 —
function.support.builtin, function.support.core #50cf6c —
entity.name.tag, entity.name.tag.class.js #ca4a55 —
entity.name.tag.class, entity.name.tag.id #0e9bad —
entity.other.attribute-name #98c379 —
support.type, support.variable #0e9bad —
support.dictionary.json #0e9bad —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #ffffff —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass #0e9bad —
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #98c379 —
variable.css, variable.scss, variable.less, variable.sass #56b6c2 —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #fff06d —
unit.css, unit.scss, unit.less, unit.sass #c678dd —
function.css, function.scss, function.less, function.sass #56b6c2 —
invalid.deprecated #F8F8F0 —
support.type.property-name.json #56b6c2 —
string.detected-link #5bcc73 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #56b6c2A0 —
entity.name.filename.find-in-files #e5c07b —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown #000000 —
punctuation.definition.italic.markdown — italic
markup.underline.link.markdown #7bd88f —
markup.bold.markdown — bold
markup.heading.markdown #e06c75 bold
markup.quote.markdown #98c379 —
meta.separator.markdown #c678dd bold
markup.raw.inline.markdown, markup.raw.block.markdown #56b6c2 —
punctuation.definition.list_item.markdown #ffffff 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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
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
fetchUser
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 } !` ;
}