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 #22262a activityBar.foreground #e6e6e6 activityBarBadge.background #2e3238cc activityBarBadge.foreground #e6e6e6 badge.background #454b54 badge.foreground #e6e6e6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle punctuation.definition, entity.other.attribute-name, meta.directive, meta.tag.block.any, support.type.property-name, meta.object-literal.key, variable.object.property, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, entity.name.label, entity.name.type, support.type.primitive, text.html.derivative #62C4C4 — string, text.html, meta.property-value, meta.interface, support.constant.property-value, keyword.other.unit, support.type, constant.numeric.css, constant.other.color.rgb-value.hex.css #66b395 — entity.name, support.class.component, entity.name.tag, entity.other.attribute-name.class, punctuation.definition.entity, storage, keyword.operator, keyword, keyword.operator.word, keyword.control, keyword.operator.new.js #e7d38f — constant, variable.other.constant.property, variable.other.property, variable.other.readwrite, variable.member, meta.definition.variable, support.constant, meta.diff, meta.diff.header, entity.name.type.interface, entity.name.type.alias, variable.parameter, variable.other.object, variable.language, support.variable.property
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Gentle Clean — Gentle Clean Monokai Gentle Clean | Coding Theme
button.background
#444444
button.foreground #e6e6e6
button.hoverBackground #007acc
diffEditor.insertedTextBackground #a3ce9e40
diffEditor.removedTextBackground #ee6a6f40
dropdown.background #343d46
dropdown.listBackground #343d46
editor.background #303841
editor.findMatchBackground #cfebfd21
editor.findMatchHighlightBackground #cfebfd21
editor.findRangeHighlightBackground #cfebfd21
editor.foreground #cbd0d9
editor.hoverHighlightBackground #cfebfd21
editor.inactiveSelectionBackground #4c5863ff
editor.lineHighlightBackground #303841
editor.lineHighlightBorder #303841
editor.rangeHighlightBackground #cfebfd21
editor.selectionBackground #4c5863
editor.selectionHighlightBackground #4c5863ff
editor.selectionHighlightBorder #647382
editor.wordHighlightBackground #00000000
editor.wordHighlightStrongBackground #00000000
editorCursor.foreground #f9ae58
editorError.border #00000000
editorError.foreground #ee6a6f
editorGroup.border #303841
editorGroup.dropBackground #303841
editorGroupHeader.noTabsBackground #303841
editorGroupHeader.tabsBackground #4f565e
editorGutter.addedBackground #a3ce9e
editorGutter.deletedBackground #ee6a6f
editorGutter.modifiedBackground #ebcb8b
editorIndentGuide.background #cfebfd21
editorInfo.foreground #a3ce9e
editorLineNumber.activeForeground #bfc5d0
editorLineNumber.foreground #848b95
editorOverviewRuler.addedForeground #a3ce9e
editorOverviewRuler.border #303841
editorOverviewRuler.bracketMatchForeground #cfebfd3d
editorOverviewRuler.currentContentForeground #cfebfd3d
editorOverviewRuler.deletedForeground #ee6a6f
editorOverviewRuler.errorForeground #ee6a6f
editorOverviewRuler.findMatchForeground #cfebfd3d
editorOverviewRuler.incomingContentForeground #cff4fd3d
editorOverviewRuler.infoForeground #cfebfd3d
editorOverviewRuler.modifiedForeground #ebcb8b
editorOverviewRuler.rangeHighlightForeground #cfebfd3d
editorOverviewRuler.selectionHighlightForeground #cfebfd3d
editorOverviewRuler.warningForeground #ebcb8b
editorOverviewRuler.wordHighlightForeground #cfebfd3d
editorOverviewRuler.wordHighlightStrongForeground #cfebfd3d
editorSuggestWidget.background #404954
editorWarning.border #00000000
editorWarning.foreground #fab763
editorWhitespace.foreground #cfebfd3d
editorWidget.background #404954
editorWidget.border #cfebfd3d
extensionButton.prominentBackground #454b54
extensionButton.prominentForeground #e6e6e6
extensionButton.prominentHoverBackground #454b5470
focusBorder #cfebfd3d
foreground #e6e6e6
gitDecoration.conflictingResourceForeground #ee6a6f
gitDecoration.deletedResourceForeground #ee6a6f
gitDecoration.modifiedResourceForeground #ebcb8b
gitDecoration.submoduleResourceForeground #ffffff70
gitDecoration.untrackedResourceForeground #9cc5a1
input.background #343d46
input.border #cfebfd21
input.foreground #e6e6e6
input.placeholderForeground #ffffff70
list.activeSelectionBackground #cfebfd21
list.activeSelectionForeground #e6e6e6
list.dropBackground #cfebfd21
list.errorForeground #ee6a6f
list.focusBackground #cfebfd21
list.focusForeground #e6e6e6
list.highlightForeground #e6e6e6
list.hoverBackground #cfebfd14
list.hoverForeground #e6e6e6
list.inactiveSelectionBackground #cfebfd14
list.inactiveSelectionForeground #e6e6e6
list.warningForeground #fab763
menu.background #2b2a29e8
merge.currentContentBackground #fab76340
merge.currentHeaderBackground #fab76370
merge.incomingContentBackground #a3ce9e40
merge.incomingHeaderBackground #a3ce9e70
minimap.selectionHighlight #687785
minimapSlider.activeBackground #696c6f59
minimapSlider.background #696c6f59
minimapSlider.hoverBackground #696c6f59
notificationCenterHeader.background #23292e
notificationCenterHeader.foreground #e6e6e6
panel.background #22262a
panel.border #cfebfd21
panelTitle.activeBorder #e7e7e7
peekView.border #6699cc
peekViewEditor.background #23292e
peekViewEditor.matchHighlightBackground #cfebfd3d
peekViewEditorGutter.background #23292e
peekViewResult.background #343d46
peekViewTitle.background #23292e
pickerGroup.border #6699cc
pickerGroup.foreground #6699cc
progressBar.background #23292e
scrollbar.shadow #30384100
scrollbarSlider.activeBackground #bdc0c366
scrollbarSlider.background #61666d66
scrollbarSlider.hoverBackground #5c626bb3
selection.background #ffffff80
sideBar.background #22262a
sideBar.foreground #e6e6e6
sideBarSectionHeader.background #22262a
sideBarSectionHeader.foreground #e6e6e6
sideBarTitle.foreground #e6e6e6
statusBar.background #2e3238
statusBar.border #cfebfd00
statusBar.debuggingBackground #007acc
statusBar.debuggingForeground #e6e6e6
statusBar.foreground #e6e6e6
statusBar.noFolderBackground #181c21
statusBar.noFolderForeground #e6e6e6
statusBarItem.activeBackground #cfebfd21
statusBarItem.hoverBackground #cfebfd14
statusBarItem.prominentBackground #cfebfd21
statusBarItem.prominentHoverBackground #cfebfd14
tab.activeBackground #303841
tab.activeBorder #303841
tab.activeBorderTop #303841
tab.activeForeground #e6e6e6
tab.border #414950
tab.hoverBackground #40474fe8
tab.inactiveBackground #4f565e80
tab.inactiveForeground #ffffff70
tab.unfocusedActiveBorder #303841
tab.unfocusedActiveBorderTop #4f565e
tab.unfocusedActiveForeground #ffffff70
tab.unfocusedInactiveForeground #ffffff70
terminal.ansiBlack #e6e6e6
terminal.ansiBlue #6699cc
terminal.ansiBrightBlack #e6e6e6
terminal.ansiBrightBlue #6699cc
terminal.ansiBrightCyan #6699cc
terminal.ansiBrightGreen #a3ce9e
terminal.ansiBrightMagenta #c594c5
terminal.ansiBrightRed #ee6a6f
terminal.ansiBrightYellow #fab763
terminal.ansiCyan #6699cc
terminal.ansiGreen #a3ce9e
terminal.ansiMagenta #c594c5
terminal.ansiRed #ee6a6f
terminal.ansiWhite #ffffffdd
terminal.ansiYellow #fab763
terminal.background #22262a
terminal.selectionBackground #ffffff30
terminalCursor.background #ffffff30
terminalCursor.foreground #e6e6e6
textLink.activeForeground #6699cc
textLink.foreground #6699cc
textPreformat.foreground #6699cc
titleBar.activeBackground #2b2b2b
titleBar.activeForeground #e6e6e6
titleBar.inactiveBackground #2b2b2b
titleBar.inactiveForeground #7f7f7f
widget.shadow #00000040 variable.function, variable.annotation, support.function, support.macro, support.class, entity.name.function, string.other.link, markup.underline.link #65c1fb —
comment, punctuation.definition.comment, keyword.operator.type, keyword.control.as, storage.type.function.arrow #a6acb9b8 —
storage.type.function.arrow, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block #bfc5d0dd —
punctuation.definition.tag #5fb4b4c5 —
punctuation.section #FFFFFF —
punctuation.accessor #A6ACB9 —
invalid.deprecated #FFFFFFDD —
source.yaml string.unquoted #FFFFFFDD —
markup.italic markup.bold | markup.bold markup.italic — bold italic
markup.list.numbered.bullet #A3CE9E —
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 } ! ` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 } ! ` ;
}