Skip to main content
Home Theme VS Code Light++ An adaptation of the Light+ theme with stronger emphasis on panel distinction
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.activeBackground #c9c9c9 activityBar.activeBorder #c9c9c9 activityBar.background #dddddd activityBar.border #969ca0 activityBar.foreground #000000 activityBar.inactiveForeground #6d6d6d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #000000 — emphasis — italic strong — bold meta.diff.header #000080 — comment #008000 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background
#007acc
editor.background #ffffff
editor.foreground #000000
editor.inactiveSelectionBackground #e5ebf1
editor.selectionHighlightBackground #add6ff80
editorGroup.border #969ca0
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #d3d3d3
editorSuggestWidget.background #f3f3f3
input.placeholderForeground #767676
list.hoverBackground #e8e8e8
notebook.cellBorderColor #e8e8e8
panel.border #969ca0
searchEditor.textInputBorder #cecece
settings.numberInputBorder #cecece
settings.textInputBorder #cecece
sideBar.border #969ca0
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #61616130
sideBarTitle.foreground #6f6f6f
statusBar.background #355944
statusBar.debuggingBackground #142774
statusBar.noFolderBackground #355944
statusBarItem.errorBackground #c72e0f
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.lastPinnedBorder #61616130
terminal.border #d7d7d7
window.activeBorder #142774
window.inactiveBorder #142774 constant.language #0000FF —
constant.numeric, 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.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, 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 #6f4a00 —
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 #22738c —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #22738c —
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 #000000 —
variable.other.constant, variable.other.enummember #0070C1 —
meta.object-literal.key #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 —
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 #EE0000 —
constant.character #0000FF —
constant.character.escape #EE0000 —
entity.name.label #000000 —
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*
Light++ | Coding Theme
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 } !` ;
}