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.activeBackground #101119 activityBar.activeBorder #c44f64 activityBar.activeFocusBorder #c44f64 activityBar.background #0a0a0f activityBar.border #101110 activityBar.dropBorder #c44f64 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #6C809AAA italic string, constant.other.symbol #F7D08A — constant.numeric #3A0CA3 — constant.language #3A0CA3 — variable, variable.parameter.function-call
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground
#383b47
activityBar.inactiveForeground #383b47
activityBarBadge.background #e76d83cc
activityBarBadge.foreground #ffffff
badge.background #101119
badge.foreground #afafaf
banner.foreground #afafaf
breadcrumb.activeSelectionForeground #e0eeeec0
breadcrumb.background #101119
breadcrumb.focusForeground #e0eeee80
breadcrumb.foreground #e0eeee40
breadcrumbPicker.background #101119
button.background #c44f64
button.border #cc6477
button.foreground #0a0a0f
button.hoverBackground #cc6477
button.secondaryBackground #cc6477
button.secondaryForeground #cc6477
button.secondaryHoverBackground #c44f64
checkbox.foreground #afafaf
debugConsoleInputIcon.foreground #e3b505
debugExceptionWidget.background #0f131a
debugExceptionWidget.border #11151c
debugIcon.breakpointDisabledForeground #f2966880
debugIcon.breakpointForeground #f29668
debugToolBar.background #0f131a
descriptionForeground #565b66
diffEditor.diagonalFill #11151c
diffEditor.insertedTextBackground #7fd9621f
diffEditor.removedTextBackground #6103451f
dropdown.background #0d1017
dropdown.border #565b6645
dropdown.foreground #afafaf
editor.background #101119
editor.findMatchBackground #cc6477aa
editor.findMatchBorder #cc6477aa
editor.findMatchHighlightBackground #6f6f6f
editor.findMatchHighlightBorder #6f6f6faa
editor.findRangeHighlightBackground #6f6f6f50
editor.findRangeHighlightBorder #6f6f6f10
editor.focusedStackFrameHighlightBackground #ff0000
editor.foldBackground #0d0c0fca
editor.foreground #afafaf
editor.hoverHighlightBackground #6f6f6f40
editor.inactiveSelectionBackground #6f6f6f20
editor.inlineValuesBackground #ff0000
editor.inlineValuesForeground #ff0000
editor.lineHighlightBackground #383b473a
editor.lineHighlightBorder #383b470b
editor.linkedEditingBackground #ff0000
editor.rangeHighlightBackground #6f6f6f50
editor.rangeHighlightBorder #6f6f6f10
editor.selectionBackground #6f6f6f50
editor.selectionForeground #afafaf
editor.selectionHighlightBackground #6f6f6f50
editor.selectionHighlightBorder #6f6f6f50
editor.snippetFinalTabstopHighlightBackground #e0b380aa
editor.snippetFinalTabstopHighlightBorder #e0b380
editor.snippetTabstopHighlightBackground #6f6f6f20
editor.snippetTabstopHighlightBorder #c44f64
editor.stackFrameHighlightBackground #ff0000
editor.symbolHighlightBackground #6f6f6f50
editor.symbolHighlightBorder #6f6f6f10
editor.wordHighlightBackground #ff0000
editor.wordHighlightBorder #6f6f6f10
editor.wordHighlightStrongBackground #6f6f6f20
editor.wordHighlightStrongBorder #7fd96280
editorBracketHighlight.unexpectedBracket.foreground #e76d83
editorBracketMatch.background #6f6f6f60
editorBracketMatch.border #6f6f6fc0
editorCodeLens.foreground #afafaf
editorCursor.background #6f6f6f50
editorCursor.foreground #e76d83f0
editorError.background #00000000
editorError.foreground #c44f64
editorGroup.background #0f131a
editorGroup.border #11151c
editorGroupHeader.noTabsBackground #0b0e14
editorGroupHeader.tabsBackground #0b0e14
editorGroupHeader.tabsBorder #0b0e14
editorGutter.addedBackground #81f495
editorGutter.background #101119
editorGutter.commentRangeForeground #6f6f6faa
editorGutter.deletedBackground #e76d83f0
editorGutter.foldingControlForeground #6f6f6f
editorGutter.modifiedBackground #a2afeb
editorHoverWidget.background #0f131a
editorHoverWidget.border #11151c
editorIndentGuide.activeBackground #6c738080
editorIndentGuide.background #6c738033
editorLineNumber.activeForeground #7e8e8d
editorLineNumber.foreground #4e4e5d
editorLink.activeForeground #e76d83
editorMarkerNavigation.background #0f131a
editorOverviewRuler.addedForeground #7fd962
editorOverviewRuler.border #11151c
editorOverviewRuler.bracketMatchForeground #6c7380b3
editorOverviewRuler.deletedForeground #610345
editorOverviewRuler.errorForeground #f03e3e
editorOverviewRuler.findMatchForeground #6c5980
editorOverviewRuler.modifiedForeground #73b8ff
editorOverviewRuler.rangeHighlightForeground #afafaf
editorOverviewRuler.warningForeground #e3b505
editorOverviewRuler.wordHighlightForeground #73b8ff66
editorOverviewRuler.wordHighlightStrongForeground #7fd96266
editorRuler.foreground #6c738033
editorSuggestWidget.background #101119
editorSuggestWidget.border #101119aa
editorSuggestWidget.focusHighlightForeground #f7d08a
editorSuggestWidget.foreground #afafaf
editorSuggestWidget.highlightForeground #e76d83f0
editorSuggestWidget.selectedBackground #6f6f6f50
editorSuggestWidget.selectedForeground #f7d08aaa
editorSuggestWidget.selectedIconForeground #afafaf
editorWarning.foreground #e3b505
editorWhitespace.foreground #6c738099
editorWidget.background #101119
editorWidget.border #c44f64
editorWidget.foreground #6f6f6f
editorWidget.resizeBorder #f7d08aaa
errorForeground #c44f64
extensionButton.prominentBackground #e3b505
extensionButton.prominentForeground #0d1017
extensionButton.prominentHoverBackground #e1af4b
focusBorder #c44f64aa
foreground #6f6f6f
gitDecoration.addedResourceForeground #81f495
gitDecoration.conflictingResourceForeground #ff0000
gitDecoration.deletedResourceForeground #610345b3
gitDecoration.ignoredResourceForeground #565b6680
gitDecoration.modifiedResourceForeground #73b8ffb3
gitDecoration.submoduleResourceForeground #d2a6ffb3
gitDecoration.untrackedResourceForeground #7fd962b3
icon.foreground #afafafc0
input.background #0a0a0f
input.border #242a2ac0
input.foreground #999a90
input.placeholderForeground #272a31
inputOption.activeBackground #272a31
inputOption.activeBorder #272a31
inputOption.activeForeground #c44f64
inputValidation.errorBackground #101110
inputValidation.errorBorder #c44f64aa
inputValidation.errorForeground #c44f64
inputValidation.infoBackground #101110
inputValidation.infoBorder #a2afebaa
inputValidation.infoForeground #a2afeb
inputValidation.warningBackground #101110
inputValidation.warningBorder #f7d08aaa
inputValidation.warningForeground #f7d08a
keybindingLabel.background #101110
keybindingLabel.border #e0eeee50
keybindingLabel.bottomBorder #e0eeee80
keybindingLabel.foreground #e0eeeea0
list.activeSelectionBackground #47526640
list.activeSelectionForeground #bfbdb6
list.deemphasizedForeground #f03e3e
list.errorForeground #f03e3e
list.filterMatchBackground #5f4c7266
list.filterMatchBorder #6c598066
list.focusBackground #47526640
list.focusForeground #bfbdb6
list.focusOutline #47526640
list.highlightForeground #e3b505
list.hoverBackground #47526640
list.inactiveSelectionBackground #47526633
list.inactiveSelectionForeground #565b66
list.invalidItemForeground #565b664d
listFilterWidget.background #0f131a
listFilterWidget.noMatchesOutline #f03e3e
listFilterWidget.outline #e3b505
menu.background #101119
menu.border #0d0c0f
menu.foreground #afafaf
menu.selectionBackground #6f6f6f30
menu.selectionBorder #6f6f6f10
menu.selectionForeground #bfbfbf
menu.separatorBackground #6f6f6fc0
menubar.selectionBackground #6f6f6f20
menubar.selectionBorder #6f6f6f10
menubar.selectionForeground #bfbfbf
minimap.background #101119
minimap.errorHighlight #c44f64
minimap.findMatchHighlight #bfbfbf
minimap.selectionHighlight #6f6f6f90
minimap.warningHighlight #f7d08a
minimapGutter.addedBackground #81f495
minimapGutter.deletedBackground #c44f64
minimapGutter.modifiedBackground #a2afeb
minimapSlider.activeBackground #bfbfbf50
minimapSlider.background #bfbfbf10
minimapSlider.hoverBackground #bfbfbf30
notificationCenter.border #bfbfbf40
notificationCenterHeader.background #1a1b27
notificationCenterHeader.foreground #bfbfbf40
notificationLink.foreground #e76d83b0
notifications.background #101119
notifications.border #1a1b27
notifications.foreground #bfbfbfa0
notificationsErrorIcon.foreground #e76d83
notificationsInfoIcon.foreground #a2afeb
notificationsWarningIcon.foreground #f7d08a
notificationToast.border #bfbfbf40
panel.background #101119
panel.border #0d0c0f
panel.dropBorder #6f6f6f
panelInput.border #ff0000
panelSection.border #ff0000
panelSection.dropBackground #ff0000
panelSectionHeader.background #ff0000
panelSectionHeader.border #ff0000
panelSectionHeader.foreground #ff0000
panelTitle.activeBorder #c44f64
panelTitle.activeForeground #bfbfbf
panelTitle.inactiveForeground #bfbfbf80
peekView.border #47526640
peekViewEditor.background #0f131a
peekViewEditor.matchHighlightBackground #6c598066
peekViewEditor.matchHighlightBorder #5f4c7266
peekViewResult.background #0f131a
peekViewResult.fileForeground #bfbdb6
peekViewResult.lineForeground #565b66
peekViewResult.matchHighlightBackground #6c598066
peekViewResult.selectionBackground #47526640
peekViewTitle.background #47526640
peekViewTitleDescription.foreground #565b66
peekViewTitleLabel.foreground #bfbdb6
pickerGroup.border #e0eeee50
pickerGroup.foreground #e0eeeea0
progressBar.background #e3b505
quickInput.background #101119
quickInput.foreground #afafafc0
quickInputList.focusBackground #e0eeee15
quickInputList.focusForeground #e0eeeee0
quickInputList.focusIconForeground #e0eeeea0
quickInputTitle.background #101110
scrollbar.shadow #09080a
scrollbarSlider.activeBackground #bfbfbf60
scrollbarSlider.background #bfbfbf20
scrollbarSlider.hoverBackground #bfbfbf40
selection.background #101119
settings.checkboxBackground #272a31
settings.checkboxBorder #242a2ac0
settings.checkboxForeground #c44f64aa
settings.dropdownBackground #101110
settings.dropdownBorder #101119
settings.headerForeground #6e6e6d
settings.modifiedItemIndicator #c44f64aa
settings.textInputBackground #101110
settings.textInputBorder #242a2ac0
settings.textInputForeground #6e6e6d
sideBar.background #101119
sideBar.border #0d0c0f
sideBar.dropBackground #6e6e6d40
sideBar.foreground #6e6e6d
sideBarSectionHeader.background #101119
sideBarSectionHeader.border #c44f64aa
sideBarSectionHeader.foreground #6e6e6d
sideBarTitle.foreground #6f6f6f
statusBar.background #0b0e14
statusBar.border #0b0e14
statusBar.debuggingBackground #f29668
statusBar.debuggingForeground #0d1017
statusBar.foreground #565b66
statusBar.noFolderBackground #0f131a
statusBarItem.activeBackground #565b6633
statusBarItem.hoverBackground #565b6633
statusBarItem.prominentBackground #11151c
statusBarItem.prominentHoverBackground #00000030
statusBarItem.remoteBackground #e3b505
statusBarItem.remoteForeground #0d1017
tab.activeBackground #14151f
tab.activeBorder #c44f64
tab.activeForeground #60706a
tab.activeModifiedBorder #c44f64
tab.border #0b0e14
tab.hoverBackground #10111930
tab.hoverBorder #c44f64
tab.hoverForeground #e0eeeeaa
tab.inactiveBackground #101119
tab.inactiveForeground #e0eeee40
tab.inactiveModifiedBorder #c44f64
tab.lastPinnedBorder #7e8e8d
tab.unfocusedActiveBackground #181925aa
tab.unfocusedActiveBorder #e76d8355
tab.unfocusedActiveForeground #e0eeee50
tab.unfocusedInactiveForeground #565b66
terminal.ansiBlack #0a0a0f
terminal.ansiBlue #a2afeb
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #59c2ff
terminal.ansiBrightCyan #95e6cb
terminal.ansiBrightGreen #aad94c
terminal.ansiBrightMagenta #d2a6ff
terminal.ansiBrightRed #f03e3e
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #f7d08a
terminal.ansiCyan #adcccc
terminal.ansiGreen #7fd962
terminal.ansiMagenta #cda1fa
terminal.ansiRed #c44f64
terminal.ansiWhite #c7c7c7
terminal.ansiYellow #e0b380
terminal.background #0d0e15
terminal.border #0a0a0f
terminal.dropBackground #6f6f6f
terminal.foreground #afafaf
terminal.selectionBackground #6f6f6f4a
terminal.tab.activeBorder #c44f64
terminalCursor.background #6f6f6f4a
terminalCursor.foreground #6f6f6f7a
textBlockQuote.background #0f131a
textLink.activeForeground #e76d83
textLink.foreground #e76d83b0
textPreformat.foreground #bfbdb6
titleBar.activeBackground #0d0c0f
titleBar.activeForeground #afafaf
titleBar.border #0d0c0f
titleBar.inactiveBackground #0d0c0f
titleBar.inactiveForeground #6f6f6f
toolbar.activeBackground #09080a
toolbar.hoverBackground #bfbfbf40
toolbar.hoverOutline #bfbfbf40
tree.indentGuidesStroke #6c738080
walkThrough.embeddedEditorBackground #0f131a
welcomePage.background #101119
welcomePage.buttonBackground #e3b50566
welcomePage.progress.background #131721
welcomePage.tileBackground #0b0e14
widget.shadow #0d0d13
window.activeBorder #09080a
window.inactiveBorder #e76d8350 #6C698D
variable.language #6C698D italic
punctuation.separator, punctuation.terminator #6C698D8A —
punctuation.section #6C698DCA —
punctuation.accessor #8AE9C1AA —
storage.type.function #F7D08A —
entity.name.function #81F495 —
variable.parameter, meta.parameter #6C698D —
variable.function, variable.annotation, meta.function-call.generic, support.function.go #81F495 —
support.function, support.macro #E76D83 —
entity.name.import, entity.name.package #8AE9C1 —
entity.name.tag, meta.tag.sgml #6153CC —
support.constant #E76D83 italic
support.type, support.class, source.go storage.type #8AE9C1 —
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation #E6B673 —
meta.diff, meta.diff.header #C594C5 —
constant.numeric.line-number.find-in-files - match #ACB6BF8C —
constant.numeric.line-number.match #FF8F40 —
entity.name.filename.find-in-files #AAD94C —
markup.heading, markup.heading entity.name #AAD94C bold
markup.underline.link, string.other.link #39BAE6 —
markup.italic #F07178 italic
markup.italic markup.bold, markup.bold markup.italic — bold italic
meta.separator #ACB6BF8C bold
markup.quote #95E6CB italic
markup.list punctuation.definition.list.begin #FFB454 —
text.html.markdown markup.inline.raw #F29668 —
text.html.markdown meta.dummy.line-break #ACB6BF8C —
punctuation.definition.markdown #ACB6BF8C —
punctuation.definition.comment #202C39 —
meta.embedded.assembly #F7D08A —
keyword - keyword.operator #E76D83 —
entity.name.class #A2AFEB —
entity.name.function #81F495 —
entity.name.variable #D1C2C2 —
support.function.label #D15E73 —
punctuation.separator.label-colon #B0C4AB bold
punctuation.separator #B0C4AB —
token.error-token #F44747 —
token.debug-token #B267E6 —
punctuation.definition.comment #7A8080AA —
meta.embedded.assembly #F7D08A —
keyword - keyword.operator #E76D83 —
entity.name.class #A2AFEB —
entity.name.function #81F495 —
entity.name.variable #D1C2C2 —
support.function.label #D15E73 —
punctuation.separator.label-colon #B0C4AB bold
punctuation.separator #B0C4AB —
punctuation.definition.comment #7A8080AA —
meta.embedded.assembly #F7D08A —
keyword - keyword.operator #E76D83 —
entity.name.class #A2AFEB —
entity.name.function #81F495 —
entity.name.variable #D1C2C2 —
support.function.label #D15E73 —
punctuation.separator.label-colon #B0C4AB bold
punctuation.separator #B0C4AB —
punctuation.definition.comment #7A8080AA —
meta.embedded.assembly #F7D08A —
keyword - keyword.operator #E76D83 —
entity.name.class #A2AFEB —
entity.name.function #81F495 —
entity.name.variable #D1C2C2 —
support.function.label #D15E73 —
punctuation.separator.label-colon #B0C4AB bold
punctuation.separator #B0C4AB —
punctuation.definition.comment #7A8080AA —
meta.embedded.assembly #F7D08A —
keyword - keyword.operator #E76D83 —
entity.name.class #A2AFEB —
entity.name.function #81F495 —
entity.name.variable #D1C2C2 —
support.function.label #D15E73 —
punctuation.separator.label-colon #B0C4AB bold
punctuation.separator #B0C4AB —
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*
Jacy lang | Coding Theme 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 } ! ` ;
}