Skip to main content
Home Theme VS Code Visual Studio 2019 Light Theme (Standalone) A standalone version of the 'Visual Studio 2019 Light' theme from Microsoft's C++ extension, for those who want just the theme without the extra tooling.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBarBadge.background #007ACC editor.background #FFFFFF editor.foreground #000000 editor.inactiveSelectionBackground #E5EBF180 editor.selectionHighlightBackground #ADD6FF80 editorIndentGuide.activeBackground1 #939393 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.
Visual Studio 2019 Light Theme (Standalone) — Visual Studio 2019 Light
editorIndentGuide.background1 #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.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, entity.name.variable #001080 —
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, entity.name.type.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.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 —
string.regexp.comment.cs #008000 —
constant.character.character-class.regexp.cs #0073FF —
keyword.control.anchor.regexp.cs #FF00C1 —
keyword.operator.quantifier.regexp.cs #FF00C1 —
string.regexp.self-escaped-character.cs #05C3BA —
keyword.operator.or.regexp.cs #05C3BA —
punctuation.definition.group.regexp.cs #800000 —
string.regexp.other-escape.cs #9E5B71 —
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 } !` ; } Visual Studio 2019 Light Theme (Standalone) | Coding Theme
