Skip to main content
Gems Theme | 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 #5e81ac activityBar.background #e5e9f0 activityBar.border #8C9EBD33 activityBar.dropBackground #bf616a80 activityBar.foreground #2e3440 activityBarBadge.background #5e81ac tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #2e3440 — string #4D653C — punctuation, constant.other.symbol #1F7187 — constant.character.escape, text.html constant.character.entity.named #2e3440 — constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#000000
badge.background #D8DEE94D
badge.foreground #2E344080
breadcrumb.activeSelectionForeground #5e81ac
breadcrumb.background #e5e9f0
breadcrumb.focusForeground #2e3440
breadcrumb.foreground #5e81ac
breadcrumbPicker.background #e5e9f0
button.background #5E81AC33
button.foreground #ffffff
debugConsole.errorForeground #bf616a
debugConsole.infoForeground #1F7187
debugConsole.warningForeground #8E5F00
debugToolBar.background #e5e9f0
diffEditor.insertedTextBackground #1F718733
diffEditor.removedTextBackground #AD258233
dropdown.background #e5e9f0
dropdown.border #2E34401A
editor.background #e5e9f0
editor.findMatchBackground #000000
editor.findMatchBorder #5e81ac
editor.findMatchHighlight #2e3440
editor.findMatchHighlightBackground #00000080
editor.findMatchHighlightBorder #2E34404D
editor.findRangeHighlightBackground #8E5F004D
editor.foreground #2e3440
editor.lineHighlightBackground #2e3440
editor.lineHighlightBorder #3b4252
editor.rangeHighlightBackground #FFFFFF0d
editor.selectionBackground #5E81AC33
editor.selectionHighlightBackground #8E5F0033
editor.wordHighlightBackground #AD25824D
editor.wordHighlightStrongBackground #4D653C4D
editorBracketMatch.background #e5e9f0
editorBracketMatch.border #8E5F0080
editorCursor.foreground #8E5F00
editorError.foreground #BF616AB3
editorGroup.border #0000004D
editorGroup.dropBackground #bf616a80
editorGroup.focusedEmptyBorder #bf616a
editorGroupHeader.tabsBackground #e5e9f0
editorGutter.addedBackground #4D653C99
editorGutter.deletedBackground #BF616A99
editorGutter.modifiedBackground #376F9C99
editorHoverWidget.background #e5e9f0
editorHoverWidget.border #2E34401A
editorIndentGuide.activeBackground #5E81ACCC
editorIndentGuide.background #5E81AC4D
editorInfo.foreground #376F9CB3
editorLineNumber.activeForeground #5e81ac
editorLineNumber.foreground #5E81AC40
editorLink.activeForeground #2e3440
editorMarkerNavigation.background #2E34400D
editorOverviewRuler.border #e5e9f0
editorOverviewRuler.errorForeground #BF616A66
editorOverviewRuler.findMatchForeground #5e81ac
editorOverviewRuler.infoForeground #376F9C66
editorOverviewRuler.warningForeground #8E5F0066
editorRuler.foreground #5E81ACFF
editorSuggestWidget.background #e5e9f0
editorSuggestWidget.border #2E34401A
editorSuggestWidget.foreground #2e3440
editorSuggestWidget.highlightForeground #5e81ac
editorSuggestWidget.selectedBackground #D8DEE980
editorWarning.foreground #8E5F00B3
editorWhitespace.foreground #2E344066
editorWidget.background #e5e9f0
editorWidget.border #5e81ac
editorWidget.resizeBorder #5e81ac
extensionBadge.remoteForeground #2e3440
extensionButton.prominentBackground #4D653CE6
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #4D653C
focusBorder #FFFFFF00
foreground #2e3440
gitDecoration.conflictingResourceForeground #8E5F00E6
gitDecoration.deletedResourceForeground #BF616AE6
gitDecoration.ignoredResourceForeground #5E81ACE6
gitDecoration.modifiedResourceForeground #376F9CE6
gitDecoration.untrackedResourceForeground #4D653CE6
input.background #FFFFFFFF
input.border #2E34401A
input.foreground #2e3440
input.placeholderForeground #2E344099
inputOption.activeBackground #2E34404D
inputOption.activeBorder #2E34404D
inputValidation.errorBorder #bf616a
inputValidation.infoBorder #376F9C
inputValidation.warningBorder #8E5F00
list.activeSelectionBackground #e5e9f0
list.activeSelectionForeground #5e81ac
list.dropBackground #bf616a80
list.focusBackground #2E344033
list.focusForeground #2e3440
list.highlightForeground #5e81ac
list.hoverBackground #e5e9f0
list.hoverForeground #5e81ac
list.inactiveSelectionBackground #0000004D
list.inactiveSelectionForeground #5e81ac
listFilterWidget.background #0000004D
listFilterWidget.noMatchesOutline #0000004D
listFilterWidget.outline #0000004D
menu.background #e5e9f0
menu.foreground #2e3440
menu.selectionBackground #D8DEE980
menu.selectionBorder #0000004D
menu.selectionForeground #5e81ac
menu.separatorBackground #2e3440
menubar.selectionBackground #0000004D
menubar.selectionBorder #0000004D
menubar.selectionForeground #5e81ac
notebook.focusedCellBorder #5e81ac
notebook.inactiveFocusedCellBorder #5E81AC80
notificationLink.foreground #5e81ac
notifications.background #e5e9f0
notifications.foreground #2e3440
panel.background #e5e9f0
panel.border #8C9EBD33
panel.dropBackground #2e3440
panelTitle.activeBorder #5e81ac
panelTitle.activeForeground #2e3440
panelTitle.inactiveForeground #2e3440
peekView.border #0000004D
peekViewEditor.background #2E34400D
peekViewEditor.matchHighlightBackground #5E81AC33
peekViewEditorGutter.background #2E34400D
peekViewResult.background #2E34400D
peekViewResult.matchHighlightBackground #5E81AC33
peekViewResult.selectionBackground #5E81ACB3
peekViewTitle.background #2E34400D
peekViewTitleDescription.foreground #2E344099
pickerGroup.border #FFFFFF1a
pickerGroup.foreground #5e81ac
progressBar.background #5e81ac
quickInput.background #e5e9f0
quickInput.foreground #5e81ac
quickInput.list.focusBackground #2E344033
scrollbar.shadow #0000004D
scrollbarSlider.activeBackground #5e81ac
scrollbarSlider.background #2E344033
scrollbarSlider.hoverBackground #2E34401A
selection.background #D8DEE9CC
settings.checkboxBackground #e5e9f0
settings.checkboxForeground #2e3440
settings.dropdownBackground #e5e9f0
settings.dropdownForeground #2e3440
settings.headerForeground #5e81ac
settings.modifiedItemIndicator #5e81ac
settings.numberInputBackground #e5e9f0
settings.numberInputForeground #2e3440
settings.textInputBackground #e5e9f0
settings.textInputForeground #2e3440
sideBar.background #e5e9f0
sideBar.border #8C9EBD33
sideBar.foreground #5E81ACB3
sideBarSectionHeader.background #e5e9f0
sideBarSectionHeader.border #8C9EBD33
sideBarTitle.foreground #2e3440
statusBar.background #e5e9f0
statusBar.border #8C9EBD33
statusBar.debuggingBackground #860086
statusBar.debuggingForeground #ffffff
statusBar.foreground #5E81AC4D
statusBar.noFolderBackground #e5e9f0
statusBarItem.activeBackground #bf616a80
statusBarItem.hoverBackground #2E344033
statusBarItem.remoteBackground #5e81ac
statusBarItem.remoteForeground #000000
tab.activeBackground #e5e9f0
tab.activeBorder #5e81ac
tab.activeForeground #2e3440
tab.activeModifiedBorder #5e81ac
tab.border #e5e9f0
tab.inactiveBackground #e5e9f0
tab.inactiveForeground #5e81ac
tab.inactiveModifiedBorder #723a3f
tab.unfocusedActiveBorder #2E344080
tab.unfocusedActiveForeground #2e3440
tab.unfocusedActiveModifiedBorder #984d54
tab.unfocusedInactiveModifiedBorder #723a3f
terminal.ansiBlack #000000
terminal.ansiBlue #376F9C
terminal.ansiBrightBlack #2E344080
terminal.ansiBrightBlue #376F9C
terminal.ansiBrightCyan #1F7187
terminal.ansiBrightGreen #4D653C
terminal.ansiBrightMagenta #860086
terminal.ansiBrightRed #bf616a
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #8E5F00
terminal.ansiCyan #1F7187
terminal.ansiGreen #4D653C
terminal.ansiMagenta #860086
terminal.ansiRed #bf616a
terminal.ansiWhite #ffffff
terminal.ansiYellow #8E5F00
terminalCursor.background #000000
terminalCursor.foreground #8E5F00
textLink.activeForeground #2e3440
textLink.foreground #5e81ac
titleBar.activeBackground #e5e9f0
titleBar.activeForeground #2e3440
titleBar.border #8C9EBD33
titleBar.inactiveBackground #e5e9f0
titleBar.inactiveForeground #5e81ac
tree.indentGuidesStroke #5E81ACB3
widget.shadow #0000004D variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #2e3440 —
keyword, modifier, variable.language.this, support.type.object, constant.language #1F7187 —
entity.name.function, support.function #376F9C —
storage.type, storage.modifier, storage.control #860086 —
support.module, support.node #bf616a italic
support.type, constant.other.key #8E5F00 —
entity.name.type, entity.other.inherited-class, entity.other #8E5F00 —
comment punctuation.definition.comment, string.quoted.docstring #2E344080 italic
entity.name, entity.name.type.class, support.type, support.class, meta.use #8E5F00 —
variable.object.property, meta.field.declaration entity.name.function #bf616a —
meta.definition.method entity.name.function #bf616a —
meta.function entity.name.function #376F9C —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #1F7187 —
meta.embedded, source.groovy.embedded, meta.template.expression #2e3440 —
entity.name.tag.yaml #bf616a —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #bf616a —
constant.language.json #1F7187 —
entity.other.attribute-name.class #8E5F00 —
entity.other.attribute-name.id #d08770 —
source.css entity.name.tag #8E5F00 —
support.type.property-name.css #27717B —
meta.tag, punctuation.definition.tag #1F7187 —
entity.other.attribute-name #860086 —
punctuation.definition.entity.html #2e3440 —
text.html.markdown meta.link.inline, meta.link.reference #bf616a —
text.html.markdown beginning.punctuation.definition.list #1F7187 —
markup.italic #bf616a italic
markup.bold markup.italic, markup.italic markup.bold #bf616a italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #4D653C —
markup.inline.raw.string.markdown #4D653C —
keyword.other.definition.ini #bf616a —
entity.name.section.group-title.ini #1F7187 —
source.cs meta.class.identifier storage.type #8E5F00 —
source.cs meta.method.identifier entity.name.function #bf616a —
source.cs meta.method-call meta.method, source.cs entity.name.function #376F9C —
source.cs storage.type #8E5F00 —
source.cs meta.method.return-type #8E5F00 —
source.cs meta.preprocessor #2E344080 —
source.cs entity.name.type.namespace #2e3440 —
meta.jsx.children, SXNested #2e3440 —
support.class.component #8E5F00 —
source.cpp meta.block variable.other #2e3440 —
source.python meta.member.access.python #bf616a —
source.python meta.function-call.python, meta.function-call.arguments #376F9C —
entity.name.function.call #376F9C —
source.php support.other.namespace, source.php meta.use support.class #2e3440 —
constant.keyword #1F7187 italic
entity.name.function #376F9C —
markup.underline — underline
keyword.control #1F7187 italic
variable.parameter — italic
punctuation.definition.block black italic
meta.brace.round.js #8E5F00 —
meta.brace.round.js #8E5F00 —
variable.other.property.ts #bf616a —
variable.other.property.js #bf616a —
variable.other.property.vue #bf616a italic
variable.other.property.vue #bf616a italic
variable.other.constant.object #2e3440 —
variable.other.constant.object.ts #2e3440 —
variable.parameter.function.language.special.self.python #bf616a italic
constant.character.format.placeholder.other.python #d08770 —
markup.quote #1F7187 italic
markup.fenced_code.block #2E3440E6 —
punctuation.definition.quote #AD2582 —
meta.structure.dictionary.json support.type.property-name.json #860086 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #8E5F00 —
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 #d08770 —
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 #bf616a —
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 #376F9C —
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 #AD2582 —
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 #860086 —
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 #4D653C —
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
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
fetchUser
31
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 } ! ` ;
}