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.
button.background #415565 diffEditor.border #2b3034 diffEditor.insertedTextBackground #c5e88c1e diffEditor.removedTextBackground #ff89731e dropdown.background #415565 dropdown.border #415565 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #f8f8f2 — comment #67899f — string #ffe083 — constant.numeric #ae9ad3 — constant.language, meta.preprocessor
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
editor.background
#354551
editor.findMatchBackground #a4cccb66
editor.findMatchHighlightBackground #a4cccb66
editor.findRangeHighlightBackground #a4cccb66
editor.foreground #f8f8f2
editor.lineHighlightBackground #415565
editor.selectionBackground #2b3034
editor.wordHighlightBackground #a4cccb4c
editor.wordHighlightStrongBackground #a4cccb4c
editorCursor.foreground #f8f8f0
editorError.foreground #ff8973
editorGroup.border #354551
editorGroup.dropBackground #4155657F
editorGroupHeader.noTabsBackground #2b3034
editorGroupHeader.tabsBackground #2b3034
editorGroupHeader.tabsBorder #354551
editorGutter.addedBackground #c5e88c
editorGutter.deletedBackground #ff8973
editorGutter.modifiedBackground #ae9ad3
editorIndentGuide.background #415565
editorInfo.foreground #c5e88c
editorOverviewRuler.addedForeground #c5e88c
editorOverviewRuler.deletedForeground #ff8973
editorOverviewRuler.modifiedForeground #ae9ad3
editorSuggestWidget.background #2b3034
editorWarning.foreground #ffe083
editorWhitespace.foreground #3b3a32
editorWidget.background #2b3034
input.background #415565
input.foreground #ffffff
input.placeholderForeground #a4cccb
inputValidation.errorBorder #ff8973
inputValidation.infoBorder #c5e88c
inputValidation.warningBorder #ffe083
list.activeSelectionBackground #354551
list.errorForeground #ff8973
list.focusBackground #354551
list.hoverBackground #354551
list.inactiveSelectionBackground #354551
list.warningForeground #ffe083
panel.background #313b44
panel.border #415565
scrollbar.shadow #313b44
scrollbarSlider.activeBackground #66869d7F
scrollbarSlider.background #5c788d7F
scrollbarSlider.hoverBackground #66869d7F
sideBar.background #313b44
sideBarSectionHeader.background #2b3034
statusBar.background #2b3034
statusBar.border #2b3034
tab.activeBorder #2b3034
tab.border #2b3034
tab.hoverBackground #31404b
tab.inactiveBackground #2b3034
tab.inactiveForeground #a4cccb
widget.shadow #2b30347F
#ae9ad3
constant.character, constant.other #ae9ad3 —
variable.language, variable.other #ffffff —
storage.type #a4cccb italic
entity.name.class #c5e88c italic
entity.other.inherited-class #c5e88c italic
entity.name.function #c5e88c
variable.parameter #e7a358 italic
entity.other.attribute-name #c5e88c
support.type, support.class #ffffff italic
string.regexp, keyword.operator.regexp #ffe083 —
string.regexp punctuation.definition.string #e7a358 —
string.regexp constant.character.escape #ffe083 —
punctuation.definition.variable #ffffff —
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype #c5e88c —
comment.block.html #67899f
entity.name.tag.script.html —
text.html.basic meta.tag.other.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, punctuation.separator.key-value.html #c5e88c —
text.html.basic entity.other.attribute-name.html #c5e88c —
text.html.basic meta.tag.structure.any.html punctuation.definition.string.begin.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html #ffe083
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag #ff8973 —
keyword.control.twig, keyword.operator.arithmetic.twig, keyword.operator.assignment.twig, keyword.operator.comparison.twig, keyword.operator.bitwise.twig, keyword.operator.logical.twig, keyword.operator.other.twig #a4cccb —
punctuation.section.tag.twig #ffffff —
variable.parameter.handlebars #e7a358 —
support.constant.handlebars, meta.function.block.start.handlebars #a4cccb —
meta.preprocessor.at-rule keyword.control.at-rule #e7a358 —
entity.other.attribute-name.id.css #ffe083 —
meta.selector.css entity.other.attribute-name.class #c5e88c —
support.type.property-name.css #ffffff italic
meta.constructor.argument.css #e7a358 —
punctuation.section.property-list.css #ffffff —
punctuation.definition.tag.css #ff8973 —
punctuation.separator.key-value.css, punctuation.terminator.rule.css #ffffff —
keyword.other.unit.css #ae9ad3 —
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-selector.css #c5e88c
source.scss variable.other.root, source.scss sass-script-maps variable.other #e7a358 —
source.scss sass-script-maps variable.other.value #ffffff —
support.function.name.sass.library #ffffff —
variable.other.less #ffffff —
entity.other.less.mixin #c5e88c italic
entity.other.attribute-name.pseudo-element.less #e7a358
meta.function.js, entity.name.function.js, support.function.dom.js #c5e88c
support.function.dom.js #a4cccb
storage.type.js #a4cccb italic
text.html.basic source.js.embedded.html #ffffff —
storage.type.function.js #a4cccb italic
constant.numeric.js #ae9ad3 —
meta.brace.square.js #ffffff —
meta.brace.round, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js #ffffff —
meta.brace.curly.js #ffffff —
keyword.operator.index-start.php, keyword.operator.index-end.php #ffffff —
meta.array.php support.function.construct.php, meta.array.empty.php support.function.construct.php #a4cccb
support.function.construct.php #a4cccb —
storage.type.function.php #a4cccb —
constant.numeric.php #ae9ad3 —
keyword.other.new.php #ff8973 —
variable.other.property.php, constant.other.php #a4cccb —
keyword.operator.string.php #ffffff —
keyword.operator.class.php #ff8973 —
storage.modifier.extends.php, storage.type.class.php #ff8973 normal
entity.name.type.class.php #ffffff italic
entity.other.inherited-class.php #ffffff italic
entity.name.function.php #c5e88c —
entity.name.type.class.php, meta.function-call.php, meta.function-call.static.php, meta.function-call.object.php, source.php.embedded.block.html support.function #ffffff —
keyword.other.phpdoc #67899f —
source.php.embedded.block.html #ffffff —
invalid.deprecated #67899f —
meta.diff, meta.diff.header #67899f —
meta.diff, meta.diff.range #a4cccb —
storage.type.class.python, storage.type.function.python, storage.modifier.global.python #ff8973
entity.name.function.python, support.function.magic.python #c5e88c
entity.name.type.class.python #ffffff italic
meta.function-call.python variable.language.python #a4cccb —
keyword.control.import.python, keyword.control.import.from.python #a4cccb —
support.type.exception.python #a4cccb —
entity.name.function.decorator.python, entity.name.function.decorator.python support.type.python #a4cccb —
punctuation.definition.variable.perl, variable.other.readwrite.global.perl, variable.other.predefined.perl, keyword.operator.comparison.perl #ff8973 —
support.function.perl #a4cccb —
comment.line.number-sign.perl #67899f italic
punctuation.definition.string.begin.perl, punctuation.definition.string.end.perl #ffffff —
constant.character.escape.perl #ff8973 —
constant.language.ruby, constant.numeric.ruby #ae9ad3 —
punctuation.definition.variable.ruby #ffffff
meta.function.method.with-arguments.ruby #c5e88c —
variable.language.ruby #ffffff —
entity.name.function.ruby #c5e88c —
punctuation.definition.parameters.ruby #ffffff —
keyword.control.ruby, keyword.control.def.ruby #ff8973 —
keyword.control.class.ruby, meta.class.ruby #ff8973 —
entity.name.type.class.ruby #ffffff italic
keyword.control.ruby #ff8973
support.class.ruby #ffffff italic
variable.other.constant.ruby italic
constant.other.symbol.ruby #a4cccb
punctuation.section.embedded.ruby, punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby —
punctuation.section.embedded.ruby #ffffff —
keyword.other.special-method.ruby #a4cccb —
text.html.markdown markup.raw.inline #a4cccb —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading.markdown, markup.heading, entity.name.section.markdown #ff8973
markup.underline #67899f underline
markup.quote, punctuation.definition.blockquote.markdown #ae9ad3 italic
markup.quote #ae9ad3 italic
string.other.link.title.markdown #ffe083 underline
markup.fenced_code.block.markdown, markup.raw.block, markup.inline.raw.string.markdown #a4cccb —
punctuation.definition.list_item.markdown #ff8973 —
markup.raw.block.fenced.markdown #a4cccb —
punctuation.definition.fenced.markdown, variable.language.fenced.markdown #a4cccb —
variable.language.fenced.markdown #a4cccb
meta.separator #67899f bold
other.package.exclude, other.remove #ff8973
support.function.builtin.shell #c5e88c —
variable.other.normal.shell #a4cccb —
meta.scope.for-in-loop.shell, variable.other.loop.shell #e7a358
entity.name.function.shell #c5e88c
punctuation.definition.string.end.shell, punctuation.definition.string.begin.shell #ffffff
meta.scope.case-block.shell, meta.scope.case-body.shell #e7a358
punctuation.definition.logical-expression.shell #ffffff
comment.line.number-sign.shell #67899f italic
comment.line.number-sign.makefile #67899f
punctuation.definition.comment.makefile #67899f
variable.other.makefile #ff8973
entity.name.function.makefile #c5e88c
meta.function.makefile #a4cccb
markup.deleted.git_gutter #ff8973 —
markup.inserted.git_gutter #c5e88c —
markup.changed.git_gutter #ae9ad3 —
markup.ignored.git_gutter #67899f —
markup.untracked.git_gutter #67899f —
sublimelinter.annotations #354551 —
sublimelinter.outline.illegal — —
sublimelinter.underline.illegal — —
sublimelinter.outline.warning — —
sublimelinter.underline.warning — —
sublimelinter.outline.violation #354551 underline
sublimelinter.underline.violation #354551 —
constant.numeric.line-number.find-in-files - match #ae9ad3 —
entity.name.filename.find-in-files #ffe083 —
sublimelinter.mark.error #ff8973 —
sublimelinter.mark.warning #ffe083 —
sublimelinter.gutter-mark #FFFFFF —
source.json meta.structure.dictionary.value.json string.quoted.double.json #ffffff —
source.json meta meta meta meta meta meta meta support.type.property-name, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta support.type.property-name #ff8973 —
source.json meta meta meta meta meta support.type.property-name, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta support.type.property-name #ffe083 —
source.json meta meta meta support.type.property-name, source.json meta meta meta meta meta meta meta meta meta meta meta support.type.property-name #c5e88c —
source.json meta support.type.property-name, source.json meta meta meta meta meta meta meta meta meta support.type.property-name #a4cccb normal
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 }!` ;
}
Pacific | Coding Theme