Skip to main content
Home Theme VS Code End of the World Light color theme based on Visual Studio 2019 Light
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.activeFocusBorder #af00db activityBar.background #D3D3D3 activityBar.foreground #0451a5 activityBar.inactiveForeground #0451a570 activityBarBadge.background #af00dbb0 activityBarBadge.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #000000ff — emphasis — italic strong — bold meta.diff.header #000080 — comment #008000 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
End of the World — End of the World
editor.background #FFFFFF
editor.foreground #000000
editor.inactiveSelectionBackground #E5EBF1
editor.selectionHighlightBackground #ADD6FF80
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #D3D3D3
editorSuggestWidget.background #F3F3F3
input.placeholderForeground #767676
list.hoverBackground #E8E8E8
searchEditor.textInputBorder #CECECE
settings.numberInputBorder #CECECE
settings.textInputBorder #CECECE
sideBarSectionHeader.background #0000
sideBarSectionHeader.border #61616130
sideBarTitle.foreground #6F6F6F
statusBarItem.remoteBackground #16825D
statusBarItem.remoteForeground #FFF constant.language #0000ff —
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #098658 —
entity.name.selector #800000 —
entity.other.attribute-name #ff0000 —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #800000 —
markup.underline — underline
markup.heading #800000 bold
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown #0451a5 —
markup.inline.raw #800000 —
punctuation.definition.tag #800000 —
meta.preprocessor, entity.name.function.preprocessor #0000ff —
meta.preprocessor.string #a31515 —
meta.preprocessor.numeric #098658 —
meta.structure.dictionary.key.python #0451a5 —
storage.modifier, keyword.operator.noexcept #0000ff —
string, entity.name.operator.custom-literal.string, meta.embedded.assembly #a31515 —
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars #0000ff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #0000ff —
meta.template.expression #000000 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #ff0000 —
support.type.property-name.json #0451a5 —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #0000ff —
keyword.other.unit #098658 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #800000 —
support.function.git-rebase #0451a5 —
constant.sha.git-rebase #098658 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #000000 —
variable.language #0000ff —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #795E26 —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #267f99 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #267f99 —
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #AF00DB —
variable, meta.definition.variable.name, support.variable #001080 —
entity.name.variable #001080 —
variable.other.object #001080 —
variable.other.object.property #811f3f italic
variable.other.constant, variable.other.enummember #328267 —
meta.object-literal.key #001080 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #d16969 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #811f3f —
keyword.operator.quantifier.regexp #000000 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #ff0000 —
constant.character #0000ff —
constant.character.escape #ff0000 —
entity.name.label #000000 —
support.other.excluded #808080 —
keyword.preprocessor #808080 —
punctuation.definition.comment #008000 —
punctuation.definition.string #a31515 —
entity.name.namespace #222222 —
entity.name.variable.field #222222 —
variable.other.property #222222 —
variable.other.constant #222222 —
variable.other.enummember #222222 —
entity.name.type.interface #267f99 —
entity.name.type.enum #267f99 —
entity.name.type.parameter #267f99 —
entity.name.type.struct #267f99 —
entity.name.function.extension #795E26 —
comment.documentation #008000 —
comment.documentation.attribute #282828 —
comment.documentation.cdata #808080 —
comment.documentation.delimiter #808080 —
comment.documentation.name #808080 —
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 } !` ;
}
End of the World | Coding Theme