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.activeBorder #779ECE activityBar.background #2E3440 activityBar.border #20242D33 activityBar.dropBackground #FF707E80 activityBar.foreground #E9F1FF activityBarBadge.background #779ECE tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #E9F1FF — string #C6FF95 — punctuation, constant.other.symbol #73D7D9 — constant.character.escape, text.html constant.character.entity.named #E9F1FF — constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#000000
badge.background #0000004D
badge.foreground #D8DEE980
breadcrumb.activeSelectionForeground #779ECE
breadcrumb.background #2E3440
breadcrumb.focusForeground #E9F1FF
breadcrumb.foreground #779ECE
breadcrumbPicker.background #2E3440
button.background #779ECE33
button.foreground #ffffff
debugConsole.errorForeground #FF707E
debugConsole.infoForeground #73D7D9
debugConsole.warningForeground #FFCE72
debugToolBar.background #2E3440
diffEditor.insertedTextBackground #73D7D933
diffEditor.removedTextBackground #FFA6E333
dropdown.background #2E3440
dropdown.border #FFFFFF1A
editor.background #2E3440
editor.findMatchBackground #000000
editor.findMatchBorder #779ECE
editor.findMatchHighlight #E9F1FF
editor.findMatchHighlightBackground #00000080
editor.findMatchHighlightBorder #FFFFFF4D
editor.findRangeHighlightBackground #FFCE724D
editor.foreground #E9F1FF
editor.lineHighlightBackground #2e3440
editor.lineHighlightBorder #3b4252
editor.rangeHighlightBackground #FFFFFF0d
editor.selectionBackground #779ECE33
editor.selectionHighlightBackground #FFCE7233
editor.wordHighlightBackground #FFA6E34D
editor.wordHighlightStrongBackground #C6FF954D
editorBracketMatch.background #2E3440
editorBracketMatch.border #FFCE7280
editorCursor.foreground #FFCE72
editorError.foreground #FF707EB3
editorGroup.border #0000004D
editorGroup.dropBackground #FF707E80
editorGroup.focusedEmptyBorder #FF707E
editorGroupHeader.tabsBackground #2E3440
editorGutter.addedBackground #C6FF9599
editorGutter.deletedBackground #FF707E99
editorGutter.modifiedBackground #88C9FF99
editorHoverWidget.background #2E3440
editorHoverWidget.border #FFFFFF1A
editorIndentGuide.activeBackground #779ECECC
editorIndentGuide.background #779ECE4D
editorInfo.foreground #88C9FFB3
editorLineNumber.activeForeground #779ECE
editorLineNumber.foreground #779ECE40
editorLink.activeForeground #E9F1FF
editorMarkerNavigation.background #E9F1FF0D
editorOverviewRuler.border #2E3440
editorOverviewRuler.errorForeground #FF707E66
editorOverviewRuler.findMatchForeground #779ECE
editorOverviewRuler.infoForeground #88C9FF66
editorOverviewRuler.warningForeground #FFCE7266
editorRuler.foreground #779ECEFF
editorSuggestWidget.background #2E3440
editorSuggestWidget.border #FFFFFF1A
editorSuggestWidget.foreground #E9F1FF
editorSuggestWidget.highlightForeground #779ECE
editorSuggestWidget.selectedBackground #00000080
editorWarning.foreground #FFCE72B3
editorWhitespace.foreground #E9F1FF66
editorWidget.background #2E3440
editorWidget.border #779ECE
editorWidget.resizeBorder #779ECE
extensionBadge.remoteForeground #E9F1FF
extensionButton.prominentBackground #C6FF95E6
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #C6FF95
focusBorder #FFFFFF00
foreground #E9F1FF
gitDecoration.conflictingResourceForeground #FFCE72E6
gitDecoration.deletedResourceForeground #FF707EE6
gitDecoration.ignoredResourceForeground #779ECEE6
gitDecoration.modifiedResourceForeground #88C9FFE6
gitDecoration.untrackedResourceForeground #C6FF95E6
input.background #3C4453FF
input.border #FFFFFF1A
input.foreground #E9F1FF
input.placeholderForeground #E9F1FF99
inputOption.activeBackground #E9F1FF4D
inputOption.activeBorder #E9F1FF4D
inputValidation.errorBorder #FF707E
inputValidation.infoBorder #88C9FF
inputValidation.warningBorder #FFCE72
list.activeSelectionBackground #2E3440
list.activeSelectionForeground #779ECE
list.dropBackground #FF707E80
list.focusBackground #E9F1FF33
list.focusForeground #E9F1FF
list.highlightForeground #779ECE
list.hoverBackground #2E3440
list.hoverForeground #ffffff
list.inactiveSelectionBackground #0000004D
list.inactiveSelectionForeground #779ECE
listFilterWidget.background #0000004D
listFilterWidget.noMatchesOutline #0000004D
listFilterWidget.outline #0000004D
menu.background #2E3440
menu.foreground #E9F1FF
menu.selectionBackground #00000080
menu.selectionBorder #0000004D
menu.selectionForeground #779ECE
menu.separatorBackground #E9F1FF
menubar.selectionBackground #0000004D
menubar.selectionBorder #0000004D
menubar.selectionForeground #779ECE
notebook.focusedCellBorder #779ECE
notebook.inactiveFocusedCellBorder #779ECE80
notificationLink.foreground #779ECE
notifications.background #2E3440
notifications.foreground #E9F1FF
panel.background #2E3440
panel.border #20242D33
panel.dropBackground #E9F1FF
panelTitle.activeBorder #779ECE
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #E9F1FF
peekView.border #0000004D
peekViewEditor.background #E9F1FF0D
peekViewEditor.matchHighlightBackground #779ECE33
peekViewEditorGutter.background #E9F1FF0D
peekViewResult.background #E9F1FF0D
peekViewResult.matchHighlightBackground #779ECE33
peekViewResult.selectionBackground #779ECEB3
peekViewTitle.background #E9F1FF0D
peekViewTitleDescription.foreground #E9F1FF99
pickerGroup.border #FFFFFF1a
pickerGroup.foreground #779ECE
progressBar.background #779ECE
quickInput.background #2E3440
quickInput.foreground #779ECE
quickInput.list.focusBackground #E9F1FF33
scrollbar.shadow #0000004D
scrollbarSlider.activeBackground #779ECE
scrollbarSlider.background #E9F1FF33
scrollbarSlider.hoverBackground #E9F1FF1A
selection.background #000000CC
settings.checkboxBackground #2E3440
settings.checkboxForeground #E9F1FF
settings.dropdownBackground #2E3440
settings.dropdownForeground #E9F1FF
settings.headerForeground #779ECE
settings.modifiedItemIndicator #779ECE
settings.numberInputBackground #2E3440
settings.numberInputForeground #E9F1FF
settings.textInputBackground #2E3440
settings.textInputForeground #E9F1FF
sideBar.background #2E3440
sideBar.border #20242D33
sideBar.foreground #779ECEB3
sideBarSectionHeader.background #2E3440
sideBarSectionHeader.border #20242D33
sideBarTitle.foreground #E9F1FF
statusBar.background #2E3440
statusBar.border #20242D33
statusBar.debuggingBackground #EC97FF
statusBar.debuggingForeground #ffffff
statusBar.foreground #779ECE4D
statusBar.noFolderBackground #2E3440
statusBarItem.activeBackground #FF707E80
statusBarItem.hoverBackground #D8DEE933
statusBarItem.remoteBackground #779ECE
statusBarItem.remoteForeground #000000
tab.activeBackground #2E3440
tab.activeBorder #779ECE
tab.activeForeground #ffffff
tab.activeModifiedBorder #779ECE
tab.border #2E3440
tab.inactiveBackground #2E3440
tab.inactiveForeground #779ECE
tab.inactiveModifiedBorder #99434b
tab.unfocusedActiveBorder #D8DEE980
tab.unfocusedActiveForeground #E9F1FF
tab.unfocusedActiveModifiedBorder #cc5964
tab.unfocusedInactiveModifiedBorder #99434b
terminal.ansiBlack #000000
terminal.ansiBlue #88C9FF
terminal.ansiBrightBlack #D8DEE980
terminal.ansiBrightBlue #88C9FF
terminal.ansiBrightCyan #73D7D9
terminal.ansiBrightGreen #C6FF95
terminal.ansiBrightMagenta #EC97FF
terminal.ansiBrightRed #FF707E
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #FFCE72
terminal.ansiCyan #73D7D9
terminal.ansiGreen #C6FF95
terminal.ansiMagenta #EC97FF
terminal.ansiRed #FF707E
terminal.ansiWhite #ffffff
terminal.ansiYellow #FFCE72
terminalCursor.background #000000
terminalCursor.foreground #FFCE72
textLink.activeForeground #E9F1FF
textLink.foreground #779ECE
titleBar.activeBackground #2E3440
titleBar.activeForeground #E9F1FF
titleBar.border #20242D33
titleBar.inactiveBackground #2E3440
titleBar.inactiveForeground #779ECE
tree.indentGuidesStroke #779ECEB3
widget.shadow #0000004D variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #E9F1FF —
keyword, modifier, variable.language.this, support.type.object, constant.language #73D7D9 —
entity.name.function, support.function #88C9FF —
storage.type, storage.modifier, storage.control #EC97FF —
support.module, support.node #FF707E italic
support.type, constant.other.key #FFCE72 —
entity.name.type, entity.other.inherited-class, entity.other #FFCE72 —
comment punctuation.definition.comment, string.quoted.docstring #D8DEE980 italic
entity.name, entity.name.type.class, support.type, support.class, meta.use #FFCE72 —
variable.object.property, meta.field.declaration entity.name.function #FF707E —
meta.definition.method entity.name.function #FF707E —
meta.function entity.name.function #88C9FF —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #73D7D9 —
meta.embedded, source.groovy.embedded, meta.template.expression #E9F1FF —
entity.name.tag.yaml #FF707E —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #FF707E —
constant.language.json #73D7D9 —
entity.other.attribute-name.class #FFCE72 —
entity.other.attribute-name.id #FFBE82 —
source.css entity.name.tag #FFCE72 —
support.type.property-name.css #6BD2E0 —
meta.tag, punctuation.definition.tag #73D7D9 —
entity.other.attribute-name #EC97FF —
punctuation.definition.entity.html #E9F1FF —
text.html.markdown meta.link.inline, meta.link.reference #FF707E —
text.html.markdown beginning.punctuation.definition.list #73D7D9 —
markup.italic #FF707E italic
markup.bold markup.italic, markup.italic markup.bold #FF707E italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #C6FF95 —
markup.inline.raw.string.markdown #C6FF95 —
keyword.other.definition.ini #FF707E —
entity.name.section.group-title.ini #73D7D9 —
source.cs meta.class.identifier storage.type #FFCE72 —
source.cs meta.method.identifier entity.name.function #FF707E —
source.cs meta.method-call meta.method, source.cs entity.name.function #88C9FF —
source.cs storage.type #FFCE72 —
source.cs meta.method.return-type #FFCE72 —
source.cs meta.preprocessor #D8DEE980 —
source.cs entity.name.type.namespace #E9F1FF —
meta.jsx.children, SXNested #E9F1FF —
support.class.component #FFCE72 —
source.cpp meta.block variable.other #E9F1FF —
source.python meta.member.access.python #FF707E —
source.python meta.function-call.python, meta.function-call.arguments #88C9FF —
entity.name.function.call #88C9FF —
source.php support.other.namespace, source.php meta.use support.class #E9F1FF —
constant.keyword #73D7D9 italic
entity.name.function #88C9FF —
markup.underline — underline
keyword.control #73D7D9 italic
variable.parameter — italic
variable.other.property.ts #FF707E —
variable.other.property.js #FF707E —
variable.other.property.vue #FF707E italic
variable.other.property.vue #FF707E italic
variable.other.constant.object #d8dee9 —
variable.other.constant.object.ts #d8dee9 —
variable.parameter.function.language.special.self.python #FF707E italic
constant.character.format.placeholder.other.python #FFBE82 —
markup.quote #73D7D9 italic
markup.fenced_code.block #E9F1FFE6 —
punctuation.definition.quote #FFA6E3 —
meta.structure.dictionary.json support.type.property-name.json #EC97FF —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCE72 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFBE82 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FF707E —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F5B791 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #88C9FF —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFA6E3 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #EC97FF —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C6FF95 —
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*
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 } ! ` ;
}
Gems Theme | Coding Theme