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 #16161E activityBar.foreground #deddd7 activityBarBadge.background #16161E activityBarBadge.foreground #C9C6B8 badge.background #16161E button.background #16161E tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #696b72 — variable, string constant.other.placeholder #deddd7 — constant.other.color #FFA066 — invalid, invalid.illegal #E82424 — storage.type
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.secondaryBackground
#0c0d12e7
button.secondaryForeground #deddd7
checkbox.border #0c0d12e7
debugToolBar.background #282837
descriptionForeground #deddd7
diffEditor.insertedTextBackground #2B3328
dropdown.background #282837
dropdown.border #282837
editor.background #0C0D12
editor.findMatchBackground #161C39
editor.findMatchBorder #FF9E3B
editor.findMatchHighlightBackground #161C39
editor.foreground #deddd7
editor.lineHighlightBackground #16161E
editor.selectionBackground #20264e
editor.selectionHighlightBackground #20264e
editor.selectionHighlightBorder #9BC968
editor.wordHighlightBackground #2222324d
editor.wordHighlightBorder #54546D
editor.wordHighlightStrongBackground #2222324d
editor.wordHighlightStrongBorder #54546D
editorBracketHighlight.foreground1 #957FB8
editorBracketHighlight.foreground2 #FFD700
editorBracketHighlight.foreground3 #7E9CD8
editorBracketHighlight.foreground4 #D27E99
editorBracketHighlight.foreground5 #E6C384
editorBracketHighlight.foreground6 #56d66d
editorBracketHighlight.unexpectedBracket.foreground #FF5D62
editorBracketMatch.background #282837
editorBracketMatch.border #54546D
editorBracketPairGuide.activeBackground1 #957FB8
editorBracketPairGuide.activeBackground2 #FFD700
editorBracketPairGuide.activeBackground3 #7E9CD8
editorBracketPairGuide.activeBackground4 #D27E99
editorBracketPairGuide.activeBackground5 #E6C384
editorBracketPairGuide.activeBackground6 #56d66d
editorCursor.background #deddd7
editorCursor.foreground #deddd7
editorError.foreground #E82424
editorGroup.border #282837
editorGroupHeader.tabsBackground #16161E
editorGutter.addedBackground #87D034
editorGutter.deletedBackground #C34043
editorGutter.modifiedBackground #DCA561
editorHoverWidget.background #0C0D12
editorHoverWidget.border #16161E
editorHoverWidget.highlightForeground #658594
editorIndentGuide.activeBackground #222232
editorIndentGuide.background #16161E
editorInlayHint.background #0C0D12
editorInlayHint.foreground #696b72
editorLineNumber.activeForeground #957FB8
editorLineNumber.foreground #54546D
editorMarkerNavigation.background #222232
editorRuler.foreground #222232
editorSuggestWidget.background #0c0d12e7
editorSuggestWidget.border #C9C6B8
editorSuggestWidget.focusHighlightForeground #8dd5fe
editorSuggestWidget.selectedBackground #161C39
editorWarning.foreground #FF9E3B
editorWhitespace.foreground #0C0D12
editorWidget.background #0C0D12
focusBorder #0c0d12e7
gitDecoration.ignoredResourceForeground #696b72
input.background #282837
list.activeSelectionBackground #222232
list.activeSelectionForeground #deddd7
list.focusBackground #16161E
list.focusForeground #deddd7
list.highlightForeground #7E9CD8
list.hoverBackground #222232
list.hoverForeground #deddd7
list.inactiveSelectionBackground #222232
list.inactiveSelectionForeground #deddd7
list.warningForeground #FF9E3B
menu.foreground #deddd7
menu.separatorBackground #282837
minimapGutter.addedBackground #87D034
minimapGutter.deletedBackground #C34043
minimapGutter.modifiedBackground #DCA561
panel.border #282837
panelSectionHeader.background #0C0D12
peekView.border #54546D
peekViewEditor.background #16161E
peekViewEditor.matchHighlightBackground #161C39
peekViewResult.background #222232
scrollbar.shadow #222232
scrollbarSlider.activeBackground #6f6f9080
scrollbarSlider.background #54546D66
scrollbarSlider.hoverBackground #54546D80
settings.focusedRowBackground #222232
settings.headerForeground #deddd7
sideBar.background #0C0D12
sideBar.border #282837
sideBar.foreground #deddd7
sideBarSectionHeader.background #222232
sideBarSectionHeader.foreground #deddd7
statusBar.background #282837
statusBar.debuggingBackground #E82424
statusBar.debuggingBorder #957FB8
statusBar.debuggingForeground #deddd7
statusBar.foreground #deddd7
statusBar.noFolderBackground #0C0D12
statusBarItem.hoverBackground #222232
statusBarItem.remoteBackground #161C39
statusBarItem.remoteForeground #deddd7
tab.activeBackground #0C0D12
tab.activeBorderTop #deddd7
tab.activeForeground #deddd7
tab.border #282837
tab.hoverBackground #54546D
tab.inactiveBackground #16161E
tab.unfocusedHoverBackground #16161E
tab.unfocusedInactiveBackground #16161E
terminal.ansiBlack #0C0D12
terminal.ansiBlue #658594
terminal.ansiBrightBlack #16161E
terminal.ansiBrightBlue #67cbf6
terminal.ansiBrightCyan #5ed4d6
terminal.ansiBrightGreen #9ece6a
terminal.ansiBrightMagenta #D27E99
terminal.ansiBrightRed #FF5D62
terminal.ansiBrightWhite #deddd7
terminal.ansiBrightYellow #E6C384
terminal.ansiCyan #b1cafd
terminal.ansiGreen #87D034
terminal.ansiMagenta #957FB8
terminal.ansiRed #E82424
terminal.ansiWhite #deddd7
terminal.ansiYellow #FF9E3B
terminal.background #0C0D12
terminal.border #282837
terminal.foreground #deddd7
terminal.selectionBackground #20264e
textBlockQuote.background #0C0D12
textBlockQuote.border #282837
textLink.foreground #70b8a3
textPreformat.foreground #FF9E3B
titleBar.activeBackground #222232
titleBar.activeForeground #deddd7
titleBar.inactiveBackground #0C0D12
titleBar.inactiveForeground #deddd7
walkThrough.embeddedEditorBackground #0C0D12 #FF1778
keyword.control.flow, keyword.control.conditional, keyword.control.loop #FF1778 bold
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, keyword.other #7DCFFF —
keyword.other.definition.ini #FFA066 —
keyword.control.trycatch #FF5D62 bold
keyword.other.unit, keyword.operator #a0a7cd —
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace #b1cafd —
entity.name.tag, meta.tag.sgml #E6C384 —
entity.name.tag.html #957FB8 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #86d3f7 —
entity.name.function.macro #FFA066 —
meta.block variable.other #deddd7 —
support.other.variable #deddd7 —
string.other.link #FFA066 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape #67cbf6 —
constant.language.boolean #FFA066 —
string, punctuation.definition.string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string #9ece6a —
support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types #56d66d —
entity.name.type.interface #FFA066 —
entity.name.type.module, entity.name.namespace #deddd7 —
entity.name.import.go #9ece6a —
variable.other.property #c3c3ff —
keyword.control.import, keyword.import, meta.import #7DCFFF —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, support.class, source.postcss support.type.property-name #9cdcfe —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5D62 —
variable.language #FF5D62 —
entity.name.method.js #86d3f7 —
meta.class-method.js entity.name.function.js, variable.function.constructor #86d3f7 —
entity.other.attribute-name #957FB8 —
entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html #E6C384 —
entity.other.attribute-name.class #E6C384 —
source.sass keyword.control #67cbf6 —
constant.character.escape #67cbf6 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #957FB8 —
source.js constant.other.object.key.js string.unquoted.label.js #FF5D62 —
source.json meta.structure.dictionary.json support.type.property-name.json #DCA561 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C9C6B8 —
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 #FFA066 —
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 #FF5D62 —
keyword.operator.logical, keyword.operator.relational #E46876 bold
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFA066 —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #86d3f7 —
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 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 #C7CCD4 —
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 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 #957FB8 —
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 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 #9ece6a —
text.html.markdown, punctuation.definition.list_item.markdown #deddd7 —
text.html.markdown markup.inline.raw.markdown #957FB8 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #957FB8 —
markdown.heading, entity.name.section.markdown, markup.heading.markdown #86d3f7 —
markup.italic #E46876 italic
markup.bold, markup.bold string — bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #E46876 bold
markup.underline #67cbf6 underline
markup.quote punctuation.definition.blockquote.markdown #696b72 —
string.other.link.title.markdown #FFA066 —
string.other.link.description.title.markdown #957FB8 —
constant.other.reference.link.markdown #E6C384 —
markup.raw.block.fenced.markdown #696b72 —
punctuation.definition.fenced.markdown #696b72 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #deddd7 —
variable.language.fenced.markdown #696b72 —
meta.separator #b1cafd bold
comment, storage.modifier, storage.type.php, keyword.other.new.php, entity.other.attribute-name, fenced_code.block.language.markdown, keyword, storage.modifier, storage.type, keyword.control, constant.language, entity.other.attribute-name, entity.name.method, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.import.js, keyword.control.flow.js, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx — italic
entity.name.type.class — bold
entity.name.section.markdown — italic bold
invalid, keyword.operator, constant.numeric.css, keyword.other.unit.px.css, constant.numeric.decimal.js, constant.numeric.json, comment.block, entity.other.attribute-name.class.css —
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 } !` ;
}
Tanuki Theme | Coding Theme