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 #ddd6c1 activityBar.dropBackground #eee8d5 activityBar.foreground #4b0b64 activityBarBadge.background #76448a badge.background #b58900aa button.background #ac9d57 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #93A1A1 italic punctuation.output.jekyll, punctuation.tag.jekyll, punctuation.frontmatter.jekyll, punctuation.output.liquid, punctuation.tag.liquid #BBBBBB — entity.name.tag.jekyll, entity.name.tag.liquid #D33682 italic punctuation.tag.jekyll, punctuation.tag.liquid #BBBBBB —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
wills-solarized-light — Will's Solarized Light
debugExceptionWidget.background
#ddd6c1
debugExceptionWidget.border #ab395b
debugToolBar.background #ddd6c1
dropdown.background #eee8d5
dropdown.border #d3af86
editor.background #fdf6e3
editor.lineHighlightBackground #eee8d5
editor.selectionBackground #e3d5ee
editorCursor.foreground #914eac
editorGroup.border #ddd6c1
editorGroup.dropBackground #ddd6c1aa
editorGroupHeader.tabsBackground #d9d2c2
editorHoverWidget.background #ccc4b0
editorIndentGuide.activeBackground #081e2580
editorIndentGuide.background #586e7580
editorLineNumber.activeForeground #567983
editorWhitespace.foreground #586e7580
editorWidget.background #eee8d5
extensionButton.prominentBackground #b58900
extensionButton.prominentHoverBackground #584c27aa
focusBorder #d3af86
input.background #ddd6c1
input.foreground #586e75
input.placeholderForeground #586e75aa
inputOption.activeBorder #d3af86
list.activeSelectionBackground #dfca88
list.activeSelectionForeground #6c6c6c
list.focusBackground #dfca8866
list.highlightForeground #b58900
list.hoverBackground #dfca8844
list.inactiveSelectionBackground #d1cbb8
minimap.selectionHighlight #eee8d5
panel.border #ddd6c1
peekView.border #b58900
peekViewEditor.background #fffbf2
peekViewEditor.matchHighlightBackground #7744aa40
peekViewResult.background #eee8d5
peekViewTitle.background #eee8d5
pickerGroup.border #2aa19899
pickerGroup.foreground #2aa19899
progressBar.background #b58900
selection.background #ccc4b0
sideBar.background #eee8d5
sideBarTitle.foreground #586e75
statusBar.background #eee8d5
statusBar.debuggingBackground #eee8d5
statusBar.foreground #586e75
statusBar.noFolderBackground #eee8d5
statusBarItem.prominentBackground #ddd6c1
statusBarItem.prominentHoverBackground #ddd6c199
statusBarItem.remoteBackground #ac9d57
tab.activeBackground #fdf6e3
tab.activeModifiedBorder #cb4b16
tab.border #ddd6c1
tab.inactiveBackground #d3cbb7
tab.inactiveForeground #586e75
terminal.ansiBlack #073642
terminal.ansiBlue #268bd2
terminal.ansiBrightBlack #586e75
terminal.ansiBrightBlue #839496
terminal.ansiBrightCyan #93a1a1
terminal.ansiBrightGreen #586e75
terminal.ansiBrightMagenta #6c71c4
terminal.ansiBrightRed #cb4b16
terminal.ansiBrightWhite #eee8d5
terminal.ansiBrightYellow #657b83
terminal.ansiCyan #2aa198
terminal.ansiGreen #859900
terminal.ansiMagenta #d33682
terminal.ansiRed #dc322f
terminal.ansiWhite #eee8d5
terminal.ansiYellow #b58900
titleBar.activeBackground #eee8d5
walkThrough.embeddedEditorBackground #00000014 variable.other.jekyll, variable.other.liquid
support.function.with-args.jekyll — italic
entity.name.type.instance.jsdoc #B58900 —
variable, string constant.other.placeholder #665470 —
invalid.deprecated #FFFFFF —
keyword, storage.type, storage.modifier #6C71C4 —
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #2AA198 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #CF4B56 —
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level #268BD2 —
support.other.variable, string.other.link #CF4B56 —
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit #CB4B16 —
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 #859900 normal
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter #B58900 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #DC322F —
variable.language #DC322F italic
entity.name.method.js #268BD2 —
meta.class-method.js entity.name.function.js, variable.function.constructor #268BD2 —
entity.other.attribute-name #6C71C4 —
constant.character.escape #2AA198 —
*url*, *link*, *uri* — underline
constant.numeric.line-number.find-in-files - match #7F2A1D —
entity.name.filename.find-in-files #859900 —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #268BD2 italic
source.js constant.other.object.key.js string.unquoted.label.js #DC322F italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #DC322FBF —
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #268BD2BF —
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #B58900BF —
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #6C71C4BF —
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #CB4B16 —
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #DC322F —
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #268BD2 —
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #B58900 —
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string #6C71C4 —
text.html.markdown, punctuation.definition.list_item.markdown #657B83 —
text.html.markdown markup.raw.inline #657B83CC —
text.html.markdown meta.dummy.line-break #00000050 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #CF4B56 —
markup.italic, markup.italic string — 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 — bold italic
markup.underline #859900 underline
markup.strike #93A1A1 strike
markup.quote punctuation.definition.blockquote.markdown #00000016
markup.quote #93A1A1 italic
string.other.link.title.markdown #268BD2 —
string.other.link.description.title.markdown #6C71C4 —
constant.other.reference.link.markdown #B58900 —
markup.raw.block #657B83CC —
markup.raw.block.fenced.markdown — —
punctuation.definition.fenced.markdown — —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #657B83 —
punctuation.definition.fenced.markdown, meta.definition.language.raw.block.fenced.markdown #00000050
variable.language.fenced.markdown #93A1A1
meta.separator #93A1A1 bold
text.html.markdown punctuation.definition, text.html.markdown.note punctuation.definition.list_item.markdown, markup.table.markdown punctuation.definition.table.vertical-line.markdown, text.html.markdown markup.checkbox.markdown #00000050
text.html.markdown meta.disable-markdown punctuation.definition #2AA198 —
punctuation.definition.list_item.todo.done #859900 —
punctuation.definition.list_item.todo.cancelled #DC322F —
markup.checkbox.markdown markup.checkbox.checked_symbol.markdown #859900 —
markup.admonition.markdown string.other.admonition.title.markdown #657B83 bold
markup.admonition.markdown markup.admonition.header.markdown — —
markup.admonition.markdown markup.admonition.body.markdown — —
markup.admonition.markdown punctuation.definition.admonition.markdown, markup.admonition.markdown punctuation.definition.heading, markup.admonition.markdown punctuation.definition.table.vertical-line, markup.admonition.markdown punctuation.definition.table.horizontal-line, markup.admonition.markdown punctuation.definition.table.alignments, markup.admonition.markdown punctuation.definition.heading, markup.admonition.markdown punctuation.definition.bold, markup.admonition.markdown punctuation.definition.italic, markup.admonition.markdown punctuation.definition.list_item, markup.admonition.markdown punctuation.definition.raw, markup.admonition.markdown markup.checkbox.markdown, markup.admonition.markdown punctuation.definition.list_item.todo.pending, markup.admonition.markdown meta.link punctuation.definition, markup.admonition.markdown meta.link.inline markup.underline.link, markup.admonition.markdown meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown punctuation.definition.entity.html, markup.admonition.markdown meta.separator.markdown, markup.admonition.markdown markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown meta.definition.language.raw.block.fenced.markdown #644EA075 —
markup.admonition.markdown entity.name.admonition.markdown #644EA0 bold
markup.admonition.markdown markup.table, markup.admonition.markdown markup.raw, markup.admonition.markdown markup.raw.block.fenced meta.language, markup.admonition.markdown punctuation.definition.blockquote.markdown, markup.admonition.markdown meta.separator, markup.admonition.markdown markup.raw.inline, markup.admonition.markdown markup.raw.block — —
markup.admonition.markdown markup.quote punctuation.definition.blockquote.markdown #644EA035 —
markup.admonition.markdown.hint markup.admonition.header.markdown — —
markup.admonition.markdown.hint markup.admonition.body.markdown — —
markup.admonition.markdown.hint punctuation.definition.admonition.markdown, markup.admonition.markdown.hint punctuation.definition.heading, markup.admonition.markdown.hint punctuation.definition.table.vertical-line, markup.admonition.markdown.hint punctuation.definition.table.horizontal-line, markup.admonition.markdown.hint punctuation.definition.table.alignments, markup.admonition.markdown.hint punctuation.definition.heading, markup.admonition.markdown.hint punctuation.definition.bold, markup.admonition.markdown.hint punctuation.definition.italic, markup.admonition.markdown.hint punctuation.definition.list_item, markup.admonition.markdown.hint punctuation.definition.raw, markup.admonition.markdown.hint markup.checkbox.markdown, markup.admonition.markdown.hint punctuation.definition.list_item.todo.pending, markup.admonition.markdown.hint meta.link punctuation.definition, markup.admonition.markdown.hint meta.link.inline markup.underline.link, markup.admonition.markdown.hint meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.hint punctuation.definition.entity.html, markup.admonition.markdown.hint meta.separator.markdown, markup.admonition.markdown.hint markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.hint meta.definition.language.raw.block.fenced.markdown #268BD275 —
markup.admonition.markdown.hint entity.name.admonition.markdown #268BD2 bold
markup.admonition.markdown.hint markup.table, markup.admonition.markdown.hint markup.raw, markup.admonition.markdown.hint markup.raw.block.fenced meta.language, markup.admonition.markdown.hint punctuation.definition.blockquote.markdown, markup.admonition.markdown.hint meta.separator, markup.admonition.markdown.hint markup.raw.inline, markup.admonition.markdown.hint markup.raw.block — —
markup.admonition.markdown.hint markup.quote punctuation.definition.blockquote.markdown #268BD235 —
markup.admonition.markdown.warning markup.admonition.header.markdown — —
markup.admonition.markdown.warning markup.admonition.body.markdown — —
markup.admonition.markdown.warning punctuation.definition.admonition.markdown, markup.admonition.markdown.warning punctuation.definition.heading, markup.admonition.markdown.warning punctuation.definition.table.vertical-line, markup.admonition.markdown.warning punctuation.definition.table.horizontal-line, markup.admonition.markdown.warning punctuation.definition.table.alignments, markup.admonition.markdown.warning punctuation.definition.heading, markup.admonition.markdown.warning punctuation.definition.bold, markup.admonition.markdown.warning punctuation.definition.italic, markup.admonition.markdown.warning punctuation.definition.list_item, markup.admonition.markdown.warning punctuation.definition.raw, markup.admonition.markdown.warning markup.checkbox.markdown, markup.admonition.markdown.warning punctuation.definition.list_item.todo.pending, markup.admonition.markdown.warning meta.link punctuation.definition, markup.admonition.markdown.warning meta.link.inline markup.underline.link, markup.admonition.markdown.warning meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.warning punctuation.definition.entity.html, markup.admonition.markdown.warning meta.separator.markdown, markup.admonition.markdown.warning markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.warning meta.definition.language.raw.block.fenced.markdown #B5890075 —
markup.admonition.markdown.warning entity.name.admonition.markdown #B58900 bold
markup.admonition.markdown.warning markup.table, markup.admonition.markdown.warning markup.raw, markup.admonition.markdown.warning markup.raw.block.fenced meta.language, markup.admonition.markdown.warning punctuation.definition.blockquote.markdown, markup.admonition.markdown.warning meta.separator, markup.admonition.markdown.warning markup.raw.inline, markup.admonition.markdown.warning markup.raw.block — —
markup.admonition.markdown.warning markup.quote punctuation.definition.blockquote.markdown #B5890035 —
markup.admonition.markdown.danger markup.admonition.header.markdown — —
markup.admonition.markdown.danger markup.admonition.body.markdown — —
markup.admonition.markdown.danger punctuation.definition.admonition.markdown, markup.admonition.markdown.danger punctuation.definition.heading, markup.admonition.markdown.danger punctuation.definition.table.vertical-line, markup.admonition.markdown.danger punctuation.definition.table.horizontal-line, markup.admonition.markdown.danger punctuation.definition.table.alignments, markup.admonition.markdown.danger punctuation.definition.heading, markup.admonition.markdown.danger punctuation.definition.bold, markup.admonition.markdown.danger punctuation.definition.italic, markup.admonition.markdown.danger punctuation.definition.list_item, markup.admonition.markdown.danger punctuation.definition.raw, markup.admonition.markdown.danger markup.checkbox.markdown, markup.admonition.markdown.danger punctuation.definition.list_item.todo.pending, markup.admonition.markdown.danger meta.link punctuation.definition, markup.admonition.markdown.danger meta.link.inline markup.underline.link, markup.admonition.markdown.danger meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.danger punctuation.definition.entity.html, markup.admonition.markdown.danger meta.separator.markdown, markup.admonition.markdown.danger markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.danger meta.definition.language.raw.block.fenced.markdown #DC322F75 —
markup.admonition.markdown.danger entity.name.admonition.markdown #DC322F bold
markup.admonition.markdown.danger markup.table, markup.admonition.markdown.danger markup.raw, markup.admonition.markdown.danger markup.raw.block.fenced meta.language, markup.admonition.markdown.danger punctuation.definition.blockquote.markdown, markup.admonition.markdown.danger meta.separator, markup.admonition.markdown.danger markup.raw.inline, markup.admonition.markdown.danger markup.raw.block — —
markup.admonition.markdown.danger markup.quote punctuation.definition.blockquote.markdown #DC322F35 —
markup.admonition.markdown.attention markup.admonition.header.markdown — —
markup.admonition.markdown.attention markup.admonition.body.markdown — —
markup.admonition.markdown.attention punctuation.definition.admonition.markdown, markup.admonition.markdown.attention punctuation.definition.heading, markup.admonition.markdown.attention punctuation.definition.table.vertical-line, markup.admonition.markdown.attention punctuation.definition.table.horizontal-line, markup.admonition.markdown.attention punctuation.definition.table.alignments, markup.admonition.markdown.attention punctuation.definition.heading, markup.admonition.markdown.attention punctuation.definition.bold, markup.admonition.markdown.attention punctuation.definition.italic, markup.admonition.markdown.attention punctuation.definition.list_item, markup.admonition.markdown.attention punctuation.definition.raw, markup.admonition.markdown.attention markup.checkbox.markdown, markup.admonition.markdown.attention punctuation.definition.list_item.todo.pending, markup.admonition.markdown.attention meta.link punctuation.definition, markup.admonition.markdown.attention meta.link.inline markup.underline.link, markup.admonition.markdown.attention meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.attention punctuation.definition.entity.html, markup.admonition.markdown.attention meta.separator.markdown, markup.admonition.markdown.attention markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.attention meta.definition.language.raw.block.fenced.markdown #85990075 —
markup.admonition.markdown.attention entity.name.admonition.markdown #859900 bold
markup.admonition.markdown.attention markup.table, markup.admonition.markdown.attention markup.raw, markup.admonition.markdown.attention markup.raw.block.fenced meta.language, markup.admonition.markdown.attention punctuation.definition.blockquote.markdown, markup.admonition.markdown.attention meta.separator, markup.admonition.markdown.attention markup.raw.inline, markup.admonition.markdown.attention markup.raw.block — —
markup.admonition.markdown.attention markup.quote punctuation.definition.blockquote.markdown #85990035 —
sublimelinter.mark.warning #B58900 —
sublimelinter.gutter-mark #FFFFFF —
sublimelinter.mark.error #DC322F —
markup.ignored.git_gutter #93A1A1 —
markup.untracked.git_gutter #93A1A1 —
markup.inserted.git_gutter #859900 —
markup.changed.git_gutter #B58900 —
markup.deleted.git_gutter #DC322F —
brackethighlighter.default #6C71C4 —
brackethighlighter.unmatched #DC322F —
brackethighlighter.curly #644EA0 —
brackethighlighter.round #B58900 —
brackethighlighter.square #268BD2 —
brackethighlighter.angle #CB4B16 —
brackethighlighter.tag #2AA198 —
brackethighlighter.quote #859900 —
gutter_color, mcol #FFFFFF —
token.error-token #CD3131 —
token.debug-token #800080 —
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
~/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 } ! ` ;
}
wills-solarized-light | Coding Theme