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.background #1d2021 activityBar.border #3c3836 activityBar.foreground #ebdbb2 activityBarBadge.background #458588 activityBarBadge.foreground #ebdbb2 badge.background #d3869b tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold header #458588 — comment, punctuation.definition.comment #928374 italic constant, support.constant, variable.arguments #D3869B
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#1d2021
button.background #45858880
button.foreground #ebdbb2
button.hoverBackground #45858860
debugToolBar.background #1d2021
diffEditor.insertedTextBackground #b8bb2630
diffEditor.removedTextBackground #fb493430
dropdown.background #1d2021
dropdown.border #3c3836
dropdown.foreground #ebdbb2
editor.background #1d2021
editor.findMatchBackground #83a59870
editor.findMatchHighlightBackground #fe801930
editor.findRangeHighlightBackground #83a59870
editor.foreground #ebdbb2
editor.hoverHighlightBackground #689d6a50
editor.lineHighlightBackground #3c383660
editor.lineHighlightBorder #3c383600
editor.selectionBackground #689d6a40
editor.selectionHighlightBackground #fabd2f40
editorBracketMatch.background #92837480
editorBracketMatch.border #1d202100
editorCodeLens.foreground #a8998490
editorCursor.foreground #ebdbb2
editorError.foreground #cc241d
editorGroup.border #3c3836
editorGroup.dropBackground #3c383660
editorGroupHeader.noTabsBackground #3c3836
editorGroupHeader.tabsBackground #1d2021
editorGroupHeader.tabsBorder #3c3836
editorGutter.addedBackground #b8bb26
editorGutter.background #1d202100
editorGutter.deletedBackground #fb4934
editorGutter.modifiedBackground #83a598
editorHoverWidget.background #1d2021
editorHoverWidget.border #3c3836
editorIndentGuide.activeBackground #a8998450
editorIndentGuide.background #a8998420
editorInfo.foreground #458588
editorLineNumber.foreground #665c54
editorLink.activeForeground #ebdbb2
editorOverviewRuler.addedForeground #83a598
editorOverviewRuler.border #1d202100
editorOverviewRuler.commonContentForeground #928374
editorOverviewRuler.currentContentForeground #458588
editorOverviewRuler.deletedForeground #83a598
editorOverviewRuler.errorForeground #fb4934
editorOverviewRuler.findMatchForeground #bdae93
editorOverviewRuler.incomingContentForeground #689d6a
editorOverviewRuler.infoForeground #d3869b
editorOverviewRuler.modifiedForeground #83a598
editorOverviewRuler.rangeHighlightForeground #bdae93
editorOverviewRuler.selectionHighlightForeground #665c54
editorOverviewRuler.warningForeground #d79921
editorOverviewRuler.wordHighlightForeground #665c54
editorOverviewRuler.wordHighlightStrongForeground #665c54
editorRuler.foreground #a8998440
editorSuggestWidget.background #1d2021
editorSuggestWidget.border #3c3836
editorSuggestWidget.foreground #ebdbb2
editorSuggestWidget.highlightForeground #689d6a
editorSuggestWidget.selectedBackground #3c383660
editorWarning.foreground #d79921
editorWhitespace.foreground #a8998420
editorWidget.background #1d2021
editorWidget.border #3c3836
errorForeground #fb4934
extensionButton.prominentBackground #b8bb2680
extensionButton.prominentHoverBackground #b8bb2630
focusBorder #3c3836
foreground #ebdbb2
gitDecoration.conflictingResourceForeground #b16286
gitDecoration.deletedResourceForeground #cc241d
gitDecoration.ignoredResourceForeground #7c6f64
gitDecoration.modifiedResourceForeground #d79921
gitDecoration.untrackedResourceForeground #98971a
input.background #ebdbb205
input.border #3c3836
input.foreground #ebdbb2
input.placeholderForeground #ebdbb260
inputOption.activeBorder #ebdbb260
inputValidation.errorBackground #cc241d80
inputValidation.errorBorder #fb4934
inputValidation.infoBackground #45858880
inputValidation.infoBorder #83a598
inputValidation.warningBackground #d7992180
inputValidation.warningBorder #fabd2f
list.activeSelectionBackground #3c383680
list.activeSelectionForeground #8ec07c
list.dropBackground #3c3836
list.focusBackground #3c3836
list.focusForeground #ebdbb2
list.highlightForeground #689d6a
list.hoverBackground #3c383680
list.hoverForeground #d5c4a1
list.inactiveSelectionBackground #3c383680
list.inactiveSelectionForeground #689d6a
merge.border #1d202100
merge.currentContentBackground #45858820
merge.currentHeaderBackground #45858840
merge.incomingContentBackground #689d6a20
merge.incomingHeaderBackground #689d6a40
panel.border #3c3836
panelTitle.activeForeground #ebdbb2
peekView.border #3c3836
peekViewEditor.background #3c383650
peekViewEditor.matchHighlightBackground #ff0000
peekViewEditorGutter.background #3c383650
peekViewResult.background #3c383650
peekViewResult.fileForeground #ebdbb2
peekViewResult.matchHighlightBackground #8ec07c30
peekViewResult.selectionBackground #8ec07c30
peekViewResult.selectionForeground #8ec07c30
peekViewTitle.background #3c383650
peekViewTitleDescription.foreground #bdae93
peekViewTitleLabel.foreground #ebdbb2
progressBar.background #689d6a
scrollbar.shadow #1d2021
scrollbarSlider.activeBackground #689d6a
scrollbarSlider.background #50494599
scrollbarSlider.hoverBackground #665c54
selection.background #689d6a80
sideBar.background #1d2021
sideBar.border #3c3836
sideBar.foreground #d5c4a1
sideBarSectionHeader.background #1d202100
sideBarSectionHeader.foreground #ebdbb2
sideBarTitle.foreground #ebdbb2
statusBar.background #1d2021
statusBar.border #3c3836
statusBar.debuggingBackground #fe8019
statusBar.debuggingBorder #1d202100
statusBar.debuggingForeground #1d2021
statusBar.foreground #ebdbb2
statusBar.noFolderBackground #1d2021
statusBar.noFolderBorder #1d202100
tab.activeBackground #32302f
tab.activeBorder #689d6a
tab.activeForeground #ebdbb2
tab.border #1d202100
tab.inactiveBackground #1d2021
tab.inactiveForeground #a89984
tab.unfocusedActiveBorder #1d202100
tab.unfocusedActiveForeground #a89984
tab.unfocusedInactiveForeground #928374
terminal.ansiBlack #3c3836
terminal.ansiBlue #458588
terminal.ansiBrightBlack #928374
terminal.ansiBrightBlue #83a598
terminal.ansiBrightCyan #8ec07c
terminal.ansiBrightGreen #b8bb26
terminal.ansiBrightMagenta #d3869b
terminal.ansiBrightRed #fb4934
terminal.ansiBrightWhite #ebdbb2
terminal.ansiBrightYellow #fabd2f
terminal.ansiCyan #689d6a
terminal.ansiGreen #98971a
terminal.ansiMagenta #b16286
terminal.ansiRed #cc241d
terminal.ansiWhite #a89984
terminal.ansiYellow #d79921
terminal.background #1d2021
terminal.foreground #ebdbb2
textLink.activeForeground #458588
textLink.foreground #83a598
titleBar.activeBackground #1d2021
titleBar.activeForeground #ebdbb2
titleBar.inactiveBackground #1d2021
widget.shadow #1d202130 constant.rgb-value #EBDBB2 —
entity.name.selector #8EC07C —
entity.other.attribute-name #FABD2F —
entity.name.tag, punctuation.tag #8EC07C —
invalid, invalid.illegal #CC241D —
invalid.deprecated #B16286 —
meta.preprocessor #FE8019 —
meta.preprocessor.string #B8BB26 —
meta.preprocessor.numeric #B8BB26 —
support.type.property-name #689D6A —
keyword.control.module #8EC07C —
keyword.control.less #D79921 —
keyword.operator.new #FE8019 —
keyword.other.unit #B8BB26 —
support.function.git-rebase #689D6A —
constant.sha.git-rebase #B8BB26 —
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class #FABD2F —
variable.this, support.variable #D3869B —
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type #FABD2F —
storage.type.function, entity.function, entity.name.function.static #8EC07C —
entity.name.function.function-call #8EC07C —
support.function.builtin #FE8019 —
entity.name.method, entity.name.method.function-call, entity.name.static.function-call #689D6A —
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder #83A598 —
storage.type.class #FB4934 —
punctuation.quoted #EBDBB2 —
punctuation.quasi #FB4934 —
*url*, *link*, *uri* — underline
meta.function.python, entity.name.function.python #8EC07C —
storage.type.function.python, storage.modifier.declaration, storage.type.class.python #FB4934 —
meta.function-call.generic #83A598 —
meta.function-call.arguments #D5C4A1 —
entity.name.function.decorator #FABD2F bold
keyword.operator.logical #FB4934 —
punctuation.definition.logical-expression #FE8019 —
string.inperpolated.dollar.shell #FE8019 —
string.interpolated.dollar.shell, string.interpolated.backtick.shell #8EC07C —
keyword.control.directive #8EC07C —
support.function.C99 #FABD2F —
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs #B8BB26 —
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs #8EC07C —
keyword.other.this.cs, keyword.other.base.cs #D3869B —
meta.scope.prerequisites #FABD2F —
entity.name.function.target #B8BB26 bold
storage.modifier.import.java, storage.modifier.package.java #BDAE93 —
keyword.other.import.java, keyword.other.package.java #8EC07C —
storage.type.java #FABD2F —
storage.type.annotation #83A598 bold
keyword.other.documentation.javadoc #8EC07C —
comment.block.javadoc variable.parameter.java #B8BB26 bold
source.java variable.other.object, source.java variable.other.definition.java #EBDBB2 —
meta.function-parameters.lisp #FABD2F —
markup.underline — underline
string.other.link.title.markdown #928374 underline
markup.underline.link #D3869B —
markup.heading #FE8019 bold
markup.punctuation.quote.beginning #98971A —
markup.punctuation.list.beginning #83A598 —
markup.inline.raw, markup.fenced_code.block #8EC07C —
string.quoted.double.json #83A598 —
source.json meta.structure.dictionary.json support.type.property-name.json #B8BB26 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #8EC07C —
source.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 #D3869B —
source.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 #B8BB26 —
entity.other.attribute-name.css #FE8019 —
source.css meta.selector #EBDBB2 —
support.type.property-name.css #FE8019 —
entity.other.attribute-name.class #B8BB26 —
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc #FB4934 —
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss #D65D0E —
entity.name.tag.css — normal
punctuation.definition.tag #83A598 —
text.html entity.name.tag, text.html punctuation.tag #8EC07C bold
source.js variable.language #FE8019 —
source.ts variable.language #FE8019 —
source.go storage.type #FABD2F —
source.go entity.name.import #B8BB26 —
source.go keyword.package, source.go keyword.import #8EC07C —
source.go keyword.interface, source.go keyword.struct #83A598 —
source.go entity.name.type #EBDBB2 —
source.go entity.name.function #D3869B —
keyword.control.cucumber.table #83A598 —
source.reason string.double, source.reason string.regexp #B8BB26 —
source.reason keyword.control.less #8EC07C —
source.reason entity.name.function #83A598 —
source.reason support.property-value, source.reason entity.name.filename #FE8019 —
source.powershell variable.other.member.powershell #FE8019 —
source.powershell support.function.powershell #FABD2F —
source.powershell support.function.attribute.powershell #BDAE93 —
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell #FE8019 —
entity.name.function #B8BB26 —
meta.parameter.type.variable, variable, variable.name, variable.other, variable.parameter, string.constaint.other.placeholder #EBDBB2 —
variable.other.property #D3869B —
entity.name.type.interface #83A598 —
variable.other.object.property.cs, entity.name.variable.property.cs #D3869B —
entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs #EBDBB2 —
entity.name.type.namespace.cs #EBDBB2 —
keyword.other.using.cs #FB4934 —
token.error-token #F44747 —
token.debug-token #B267E6 —
entity.name.namespace.rust, entity.name.module.rust #EBDBB2 —
entity.name.function.macro.rust #FABD2F —
entity.name.type.lifetime #D3869B —
meta.attribute.rust #FABD2F —
entity.name.type.primitive.rust, entity.name.type.numeric.rust #FABD2F —
constant.numeric.decimal.rust #D3869B —
entity.name.function.python, meta.function-call.generic.python, support.function.builtin.python #B8BB26 —
storage.type.function.async.python #FB4934 —
storage.type.format.python #D3869B —
variable.parameter.function.language.special.self.python, variable.language.special.self.python #FE8019 —
meta.member.access.python #D3869B —
storage.type.java, storage.type.object.array.java #8EC07C —
storage.type.primitive.java #8EC07C —
variable.other.object.property.java #D3869B —
storage.type.annotation.java #e37c6c —
constant.other.key.java #EBDBB2 —
storage.type.generic.java #FABD2F —
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...
~/my-project
main*
Button.tsx
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 } ! ` ;
}
Treeko | Coding Theme