Skip to main content
Gentle Clean | Coding Theme
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 #4d9375 activityBar.background #1a1b26 activityBar.border #65656533 activityBar.foreground #dbd7caee activityBar.inactiveForeground #dedcd530 activityBarBadge.background #bfbaaa tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.label, entity.other.attribute-name, entity.other.attribute-name.html, meta.directive, meta.tag.block.any, meta.object-literal.key, support.type.property-name, support.variable.property, variable.other.property, variable.other.object.property, variable.other.constant.property, variable.other.enummember, meta.definition.property variable.object.property #5CA890 — string, source, text.html, meta.property-value, keyword.other.unit, support.type, support.constant.property-value, constant.numeric.css, constant.other.color.rgb-value.hex.css #5CA890 — punctuation.definition.entity.css, entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class.css, support.class.component, storage, keyword, keyword.control, keyword.operator.new, variable.language, variable.language.this, variable.scss, support.type.object.module #A585E0 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Gentle Clean — Gentle Clean Dark
activityBarBadge.foreground
#1a1b26
badge.background #dedcd590
badge.foreground #1a1b26
breadcrumb.activeSelectionForeground #eeeeee15
breadcrumb.background #292929
breadcrumb.focusForeground #dbd7caee
breadcrumb.foreground #959da5
breadcrumbPicker.background #1a1b26
button.background #4d9375
button.foreground #1a1b26
button.hoverBackground #4d9375
checkbox.background #292929
checkbox.border #2f363d
debugToolBar.background #1a1b26
descriptionForeground #A2AAD3
diffEditor.insertedTextBackground #4d937522
diffEditor.removedTextBackground #ab595922
dropdown.foreground #dbd7caee
dropdown.listBackground #2F3741
editor.background #1a1b26
editor.findMatchBackground #484B6B
editor.findMatchBorder #ffffff01
editor.findMatchHighlightBackground #484B6B
editor.findMatchHighlightBorder #292B3D
editor.focusedStackFrameHighlightBackground #b808
editor.foldBackground #33364C
editor.inactiveSelectionBackground #484B6B
editor.lineHighlightBackground #33364C
editor.selectionBackground #484B6B
editor.selectionHighlightBackground #292B3D
editor.selectionHighlightBorder #292B3D
editor.stackFrameHighlightBackground #a707
editor.wordHighlightBackground #ffffff01
editor.wordHighlightBorder #ffffff01
editor.wordHighlightStrongBackground #ffffff01
editorBracketHighlight.foreground1 #5eaab5
editorBracketHighlight.foreground2 #4d9375
editorBracketHighlight.foreground3 #d4976c
editorBracketHighlight.foreground4 #d9739f
editorBracketHighlight.foreground5 #e6cc77
editorBracketHighlight.foreground6 #6394bf
editorBracketMatch.background #4d937520
editorCursor.foreground #fff
editorError.foreground #cb7676
editorGroup.border #65656533
editorGroupHeader.tabsBackground #1a1b26
editorGroupHeader.tabsBorder #65656533
editorGutter.addedBackground #4d9375
editorGutter.commentRangeForeground #dedcd530
editorGutter.deletedBackground #cb7676
editorGutter.foldingControlForeground #dedcd590
editorGutter.modifiedBackground #6394bf
editorHint.foreground #D07173
editorIndentGuide.activeBackground #292B3D
editorIndentGuide.background #ffffff01
editorInfo.foreground #6394bf
editorInlayHint.background #00000000
editorInlayHint.foreground #666666
editorLineNumber.activeForeground #828793
editorLineNumber.foreground #bbbbbb30
editorLink.activeForeground #61a5c2
editorOverviewRuler.border #111
editorStickyScroll.background #292929
editorStickyScrollHover.background #292929
editorWarning.foreground #d4976c
editorWidget.background #1a1b26
errorForeground #D07173
focusBorder #ffffff01
foreground #A2AAD3
gitDecoration.addedResourceForeground #4d9375
gitDecoration.conflictingResourceForeground #d4976c
gitDecoration.deletedResourceForeground #cb7676
gitDecoration.ignoredResourceForeground #dedcd530
gitDecoration.modifiedResourceForeground #6394bf
gitDecoration.submoduleResourceForeground #dedcd590
gitDecoration.untrackedResourceForeground #5eaab5
input.background #2F3741
input.foreground #dbd7caee
input.placeholderForeground #dedcd590
inputOption.activeBackground #dedcd530
list.activeSelectionBackground #484B6B
list.focusAndSelectionOutline #ffffff01
list.focusBackground #484B6B
list.hoverBackground #484B6B
list.hoverForeground #fff
list.inactiveFocusBackground #484B6B
list.inactiveSelectionBackground #484B6B
list.inactiveSelectionForeground #fff
menu.separatorBackground #252525
notificationCenterHeader.background #1a1b26
notificationCenterHeader.foreground #959da5
notifications.background #1a1b26
notifications.border #65656533
notifications.foreground #dbd7caee
notificationsErrorIcon.foreground #cb7676
notificationsInfoIcon.foreground #6394bf
notificationsWarningIcon.foreground #d4976c
panel.border #292B3D
panelTitle.activeBorder #292B3D
peekViewEditor.background #1a1b26
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #1a1b26
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #444d56
pickerGroup.foreground #dbd7caee
problemsErrorIcon.foreground #cb7676
problemsInfoIcon.foreground #6394bf
problemsWarningIcon.foreground #d4976c
progressBar.background #4d9375
quickInput.background #1a1b26
quickInput.foreground #dbd7caee
scrollbar.shadow #ffffff01
scrollbarSlider.activeBackground #dedcd530
scrollbarSlider.background #dedcd510
scrollbarSlider.hoverBackground #dedcd530
settings.headerForeground #dbd7caee
settings.modifiedItemIndicator #4d9375
sideBar.background #1a1b26
sideBar.border #292B3D
statusBar.background #1a1b26
statusBar.border #65656533
statusBar.debuggingBackground #292929
statusBar.debuggingForeground #bfbaaa
statusBar.foreground #bfbaaa
statusBar.noFolderBackground #1a1b26
statusBarItem.prominentBackground #292929
tab.activeBackground #1a1b26
tab.activeBorder #65656533
tab.activeBorderTop #dedcd590
tab.activeForeground #dbd7caee
tab.border #65656533
tab.hoverBackground #292929
tab.inactiveBackground #1a1b26
tab.inactiveForeground #959da5
tab.unfocusedActiveBorder #65656533
tab.unfocusedActiveBorderTop #65656533
tab.unfocusedHoverBackground #1a1b26
terminal.ansiBlack #393a34
terminal.ansiBlue #6394bf
terminal.ansiBrightBlack #777777
terminal.ansiBrightBlue #6394bf
terminal.ansiBrightCyan #5eaab5
terminal.ansiBrightGreen #4d9375
terminal.ansiBrightMagenta #d9739f
terminal.ansiBrightRed #cb7676
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #e6cc77
terminal.ansiCyan #5eaab5
terminal.ansiGreen #4d9375
terminal.ansiMagenta #d9739f
terminal.ansiRed #cb7676
terminal.ansiWhite #dbd7caee
terminal.ansiYellow #e6cc77
textBlockQuote.background #1a1b26
textBlockQuote.border #65656533
textCodeBlock.background #1a1b26
textLink.activeForeground #4d9375
textLink.foreground #4d9375
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #1a1b26
titleBar.activeForeground #bfbaaa
titleBar.border #292929
titleBar.inactiveBackground #1a1b26
titleBar.inactiveForeground #959da5
tree.indentGuidesStroke #292B3D
welcomePage.buttonBackground #2f363d
welcomePage.buttonHoverBackground #444d56
widget.border #292B3D
widget.shadow #ffffff01 keyword.operator, meta.return.type, storage.type.function.arrow, fenced_code.block.language, meta.attribute.directive, punctuation.accessor.optional
variable.member, variable.parameter, variable.other.constant.object, variable.other.constant, variable.other.object, variable.other.readwrite, variable.object.property, meta.definition.variable, meta.type.declaration.ts, support.constant, meta.diff, meta.diff.header, string.regexp, constant #A2AAD3 —
variable.function, variable.annotation, support.function, support.macro, support.class, entity.name.function, entity.other.attribute-name.html.vue, string.other.link, markup.underline.link, punctuation.attribute-shorthand, punctuation.definition.string.template, punctuation.definition.interpolation, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.accessor.optional, string.unquoted.argument, keyword.operator.spread, keyword.operator.expression #7aa2f7 —
support.type, entity.name.type, meta.interface #449dab —
punctuation, meta.command, meta.brace.round, meta.brace.angle, meta.brace.square, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html #838ba7 —
comment, punctuation.definition.comment, keyword.operator.type.annotation.ts #52587A italic
markup.heading, punctuation.definition.heading #d4976cf2 bold
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 } ! ` ;
}