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 #1c6b48 activityBar.background #fafafa activityBar.border #f0f0f0 activityBar.foreground #393a34 activityBar.inactiveForeground #393a3450 activityBarBadge.background #4e4f47 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.label, entity.other.attribute-name, meta.directive, meta.tag.block.any, meta.object-literal.key, support.type.property-name, variable.object.property, variable.other.object.property, variable.other.property, variable.other.enummember, punctuation.attribute-shorthand #028dac — string, source, text.html, text.html.derivative, meta.property-value, keyword.other.unit, support.type, support.constant.property-value, constant.numeric.css, constant.other.color.rgb-value.hex.css #017e5e — 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, keyword.operator.word, keyword.operator.new.js, keyword.operator.relational, variable.language, variable.scss #ab6200 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Gentle Clean — Gentle Clean Light
activityBarBadge.foreground
#fafafa
badge.background #393a3490
badge.foreground #fafafa
breadcrumb.activeSelectionForeground #22222215
breadcrumb.background #f7f7f7
breadcrumb.focusForeground #393a34
breadcrumb.foreground #6a737d
breadcrumbPicker.background #fafafa
button.background #1c6b48
button.foreground #fafafa
button.hoverBackground #1c6b48
checkbox.background #f7f7f7
checkbox.border #d1d5da
debugToolBar.background #fafafa
descriptionForeground #393a3490
diffEditor.insertedTextBackground #1c6b4815
diffEditor.removedTextBackground #ab595910
dropdown.background #fafafa
dropdown.border #f0f0f0
dropdown.foreground #393a34
dropdown.listBackground #f7f7f7
editor.background #fafafa
editor.findMatchBackground #e6cc7744
editor.findMatchHighlightBackground #e6cc7766
editor.focusedStackFrameHighlightBackground #fff5b1
editor.foldBackground #22222210
editor.foreground #393a34
editor.inactiveSelectionBackground #22222208
editor.lineHighlightBackground #f7f7f7
editor.selectionBackground #22222215
editor.selectionHighlightBackground #22222208
editor.stackFrameHighlightBackground #fffbdd
editor.wordHighlightBackground #1c6b4805
editor.wordHighlightStrongBackground #1c6b4810
editorBracketHighlight.foreground1 #2993a3
editorBracketHighlight.foreground2 #1e754f
editorBracketHighlight.foreground3 #a65e2b
editorBracketHighlight.foreground4 #a13865
editorBracketHighlight.foreground5 #bda437
editorBracketHighlight.foreground6 #296aa3
editorBracketMatch.background #1c6b4820
editorError.foreground #ab5959
editorGroup.border #f0f0f0
editorGroupHeader.tabsBackground #fafafa
editorGroupHeader.tabsBorder #f0f0f0
editorGutter.addedBackground #1e754f
editorGutter.commentRangeForeground #393a3450
editorGutter.deletedBackground #ab5959
editorGutter.foldingControlForeground #393a3490
editorGutter.modifiedBackground #296aa3
editorHint.foreground #1e754f
editorIndentGuide.activeBackground #00000030
editorIndentGuide.background #00000015
editorInfo.foreground #296aa3
editorInlayHint.background #00000000
editorInlayHint.foreground #999999
editorLineNumber.activeForeground #4e4f47
editorLineNumber.foreground #393a3450
editorOverviewRuler.border #fff
editorStickyScroll.background #f7f7f7
editorStickyScrollHover.background #f7f7f7
editorWarning.foreground #a65e2b
editorWhitespace.foreground #00000015
editorWidget.background #fafafa
errorForeground #ab5959
focusBorder #00000000
foreground #393a34
gitDecoration.addedResourceForeground #1e754f
gitDecoration.conflictingResourceForeground #a65e2b
gitDecoration.deletedResourceForeground #ab5959
gitDecoration.ignoredResourceForeground #393a3450
gitDecoration.modifiedResourceForeground #296aa3
gitDecoration.submoduleResourceForeground #393a3490
gitDecoration.untrackedResourceForeground #2993a3
input.background #f7f7f7
input.border #f0f0f0
input.foreground #393a34
input.placeholderForeground #393a3490
inputOption.activeBackground #393a3450
list.activeSelectionBackground #f7f7f7
list.activeSelectionForeground #393a34
list.focusBackground #f7f7f7
list.highlightForeground #1c6b48
list.hoverBackground #f7f7f7
list.hoverForeground #393a34
list.inactiveFocusBackground #fafafa
list.inactiveSelectionBackground #f7f7f7
list.inactiveSelectionForeground #393a34
menu.separatorBackground #f0f0f0
notificationCenterHeader.background #fafafa
notificationCenterHeader.foreground #6a737d
notifications.background #fafafa
notifications.border #f0f0f0
notifications.foreground #393a34
notificationsErrorIcon.foreground #ab5959
notificationsInfoIcon.foreground #296aa3
notificationsWarningIcon.foreground #a65e2b
panel.background #fafafa
panel.border #f0f0f0
panelInput.border #e1e4e8
panelTitle.activeBorder #1c6b48
panelTitle.activeForeground #393a34
panelTitle.inactiveForeground #6a737d
peekViewEditor.background #fafafa
peekViewResult.background #fafafa
pickerGroup.border #f0f0f0
pickerGroup.foreground #393a34
problemsErrorIcon.foreground #ab5959
problemsInfoIcon.foreground #296aa3
problemsWarningIcon.foreground #a65e2b
progressBar.background #1c6b48
quickInput.background #fafafa
quickInput.foreground #393a34
quickInputList.focusBackground #f7f7f7
scrollbar.shadow #6a737d33
scrollbarSlider.activeBackground #393a3450
scrollbarSlider.background #393a3410
scrollbarSlider.hoverBackground #393a3450
settings.headerForeground #393a34
settings.modifiedItemIndicator #1c6b48
sideBar.background #fafafa
sideBar.border #f0f0f0
sideBar.foreground #4e4f47
sideBarSectionHeader.background #fafafa
sideBarSectionHeader.border #f0f0f0
sideBarSectionHeader.foreground #393a34
sideBarTitle.foreground #393a34
statusBar.background #fafafa
statusBar.border #f0f0f0
statusBar.debuggingBackground #f7f7f7
statusBar.debuggingForeground #4e4f47
statusBar.foreground #4e4f47
statusBar.noFolderBackground #fafafa
statusBarItem.prominentBackground #f7f7f7
tab.activeBackground #fafafa
tab.activeBorder #f0f0f0
tab.activeBorderTop #393a3490
tab.activeForeground #393a34
tab.border #f0f0f0
tab.hoverBackground #f7f7f7
tab.inactiveBackground #fafafa
tab.inactiveForeground #6a737d
tab.unfocusedActiveBorder #f0f0f0
tab.unfocusedActiveBorderTop #f0f0f0
tab.unfocusedHoverBackground #fafafa
terminal.ansiBlack #121212
terminal.ansiBlue #296aa3
terminal.ansiBrightBlack #aaaaaa
terminal.ansiBrightBlue #296aa3
terminal.ansiBrightCyan #2993a3
terminal.ansiBrightGreen #1e754f
terminal.ansiBrightMagenta #a13865
terminal.ansiBrightRed #ab5959
terminal.ansiBrightWhite #dddddd
terminal.ansiBrightYellow #bda437
terminal.ansiCyan #2993a3
terminal.ansiGreen #1e754f
terminal.ansiMagenta #a13865
terminal.ansiRed #ab5959
terminal.ansiWhite #dbd7caee
terminal.ansiYellow #bda437
terminal.foreground #393a34
terminal.selectionBackground #22222215
textBlockQuote.background #fafafa
textBlockQuote.border #f0f0f0
textCodeBlock.background #fafafa
textLink.activeForeground #1c6b48
textLink.foreground #1c6b48
textPreformat.foreground #586069
textSeparator.foreground #d1d5da
titleBar.activeBackground #fafafa
titleBar.activeForeground #4e4f47
titleBar.border #f7f7f7
titleBar.inactiveBackground #fafafa
titleBar.inactiveForeground #6a737d
tree.indentGuidesStroke #e1e4e8
welcomePage.buttonBackground #f6f8fa
welcomePage.buttonHoverBackground #e1e4e8 constant, variable.member, variable.parameter, variable.other.constant.object, variable.other.constant.property, variable.other.constant, variable.other.object, variable.other.readwrite, meta.definition.variable, meta.type.declaration.ts, support.constant, support.variable.property, meta.diff, meta.diff.header, string.regexp
variable.function, variable.annotation, support.function, support.macro, support.class, entity.name.function, string.other.link, markup.underline.link, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.accessor.optional, meta.command, string.unquoted.argument #266ad7 —
keyword.operator.type, keyword.control.as, meta.brace.round, meta.brace.angle, meta.brace.square, meta.return.type, storage.type.function.arrow, punctuation, fenced_code.block.language #8f9aa1 —
support.type, entity.name.type, meta.interface #a14fc4 —
comment, punctuation.definition.comment #8d94a6 —
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
Light+
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 } ! ` ;
}