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 #181818 activityBar.foreground #D7DAE0 activityBarBadge.background #528bff activityBarBadge.foreground #F8FAFD editor.background #181818 editor.lineHighlightBackground #212121 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #D4D4D4 — meta.diff.header #569cd6 — meta.preprocessor, entity.name.function.preprocessor #569cd6 — meta.preprocessor.string #ce9178 — meta.preprocessor.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
DarkLight Theme — DarkLight
editor.selectionBackground
#00ffff30
editor.selectionHighlightBackground #00ffff10
editor.selectionHighlightBorder #00ffff60
editorBracketMatch.background #00ffff30
editorBracketMatch.border #00000000
editorCursor.foreground #ffffff
editorGroup.border #00ffff70
editorGroupHeader.tabsBackground #0e0e0e
editorGroupHeader.tabsBorder #191919
editorIndentGuide.background #202020
editorLineNumber.activeForeground #00ffff
editorLineNumber.foreground #00ffff80
focusBorder #00ffff30
foreground #FFFFFF
icon.foreground #00ffff80
panel.background #141414
panelSection.border #00ffff
panelTitle.activeBorder #00ffff
scrollbar.shadow #0000
scrollbarSlider.activeBackground #00ffff70
scrollbarSlider.background #00ffff30
scrollbarSlider.hoverBackground #00ffff50
sideBar.background #0f0f0f
sideBar.foreground #ffffff
sideBarTitle.foreground #00ffff
statusBar.background #181818
statusBar.foreground #00ffff
statusBar.noFolderBackground #181818
statusBarItem.hoverBackground #00ffff20
tab.activeBackground #191919
tab.activeBorder #00ffff00
tab.activeBorderTop #00ffff
tab.activeForeground #00ffff
tab.border #202020
tab.hoverForeground #00ffff
tab.inactiveBackground #0e0e0e
tab.inactiveForeground #c5c5c5
titleBar.activeBackground #000000
titleBar.activeForeground #DEF7F7 meta.structure.dictionary.key.python #9cdcfe —
support.function.git-rebase #9cdcfe —
constant.sha.git-rebase #b5cea8 —
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 #F1FF7B —
punctuation, text, source #FFFFFF
comment, punctuation.definition.comment #808080 —
string, punctuation.definition.string, source.coffee.embedded #00FA9A —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #7ea5fa
punctuation.definition.interpolation, punctuation.section.embedded #7ea5fa bold
constant, variable.other.enummember, variable.other.constant.property, punctuation.definition.constant, support.constant #EE82EE —
variable, meta.definition.variable.name, support.variable, entity.name.variable #FFFFFF —
storage, keyword, variable.language.wildcard.java, entity.name.operator #FF1493 —
entity.name.function, support.function, variable.language.super, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #00FFFF —
variable.other.makefile #FFFFFF
punctuation.separator.key-value.makefile #FF1493
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json #FF9999 bold
meta.structure.dictionary.value.json support.type.property-name.json, meta.structure.dictionary.value.json punctuation.support.type.property-name.begin.json, meta.structure.dictionary.value.json punctuation.support.type.property-name.end.json #FF9999
meta.tag.metadata.doctype.html entity.other.attribute-name.html #FFA500 bold
entity.name.tag #FF1493 bold
entity.other.attribute-name #00ffff
punctuation.definition.entity.html #FFA500 bold
punctuation.definition.keyword.css, punctuation.definition.keyword.scss, keyword.control #FF1493
keyword.control.at-rule.media.scss, keyword.control.at-rule.keyframes.scss, keyword.control.at-rule.fontface.scss, keyword.control.at-rule.media.scss punctuation.definition.keyword.scss, keyword.control.at-rule.keyframes.scss punctuation.definition.keyword.scss, keyword.control.at-rule.fontface.scss punctuation.definition.keyword.scss, meta.at-rule.include.scss entity.name.function.scss, meta.at-rule.mixin.scss entity.name.function.scss #FF9999 bold
support.function.misc.css, support.function.misc.scss #FFA500 bold
support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name.css, meta.at-rule.media.header.css, meta.property-list.scss entity.name.tag.css, meta.property-value.scss support.type.property-name.css, argument.name.scss, meta.property-name.scss, meta.property-name.media-query.scss #37FFB2
support.constant.font-name.css, support.constant.property-value.css, meta.property-value.scss, meta.property-value.media-query.scss, meta.at-rule.keyframes.scss, entity.name.function.scss #FFF969
keyword.operator.css #EEE8AA bold
keyword.operator.comparison.scss, source.css keyword.operator.logical, keyword.control.operator.css.scss #F0E68C bold
meta.at-rule.if.scss support.constant.property-value.css, meta.at-rule.else.scss support.constant.property-value.css #FFFF00 bold
entity.other.attribute-name.class.css, entity.other.attribute-name.class.css punctuation.definition.entity.css #00BFFF bold
entity.other.attribute-name.id.css, entity.other.attribute-name.id.css punctuation.definition.entity.css #EE82EE bold
entity.name.tag.reference.scss #FF1493 bold
entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css #00BFFF
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css #F0E68C bold
variable.css, variable.scss #00FFFF
constant.numeric.css #FFFFFF
keyword.other.unit #FF1493
keyword.keyframes.scss #FF1493 bold
entity.other.attribute-name.placeholder.css #6adfff
keyword.other.important.css, keyword.other.important.scss #FF6347 bold
variable.language.expanded-namespace.scss #FF9999 bold
entity.name.tag.wildcard.scss, entity.name.tag.wildcard.css #FF1493 bold
variable.other.readwrite.js, variable.other.constant.js, meta.brace.round.js, meta.brace.square.js, variable.other.readwrite.ts, variable.other.constant.ts, meta.brace.round.ts, meta.brace.square.ts, keyword.operator.type.annotation.ts, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts #ffffff
keyword.operator, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.assignment.ts, keyword.operator.relational.ts #EEE8AA bold
keyword.operator.comparison.js, keyword.operator.assignment.compound.js, keyword.operator.comparison.ts, keyword.operator.assignment.compound.ts #F0E68C bold
keyword.operator.logical.js, keyword.operator.ternary.js, keyword.operator.logical.ts, keyword.operator.ternary.ts #FFFF00 bold
variable.other.readwrite.alias.js, constant.language.import-export-all.js, meta.function-call.js support.constant, variable.other.readwrite.alias.ts, constant.language.import-export-all.ts, meta.function-call.ts support.constant #F1FF7B
variable.other.object.js, variable.other.object.ts, entity.name.type.enum.ts #F7FFB3
keyword.control.import.js, keyword.control.from.js, keyword.control.as.js, keyword.control.export.js, keyword.control.default.js, support.type.object.module.js, keyword.control.import.ts, keyword.control.from.ts, keyword.control.as.ts, keyword.control.export.ts, keyword.control.default.ts, support.type.object.module.ts #FF69B4 bold
variable.parameter.js, keyword.control.trycatch.js, punctuation.definition.character-class.regexp, variable.parameter.ts, punctuation.decorator.ts, keyword.control.trycatch.ts #FFA500
meta.object-literal.key.js, variable.other.object.property.js, variable.other.property.js, support.variable.property.js, meta.object-literal.key.ts, variable.other.object.property.ts, variable.other.property.ts, variable.object.property.ts, support.variable.property.ts #ff9999 —
punctuation.definition.binding-pattern.object.js, punctuation.definition.binding-pattern.object.ts #ebf786
support.constant.math.js, entity.name.type.module.js, entity.name.type.class.js, support.class, entity.name.type.module.ts, entity.name.type.class.ts, entity.other.inherited-class.ts #F1FF7B bold
variable.language.this.js, variable.language.this.ts #F0E68C bold
entity.name.type.ts, support.type.primitive.ts, entity.name.type.alias.ts, entity.name.type.interface.ts, meta.interface.ts entity.other.inherited-class.ts #00BFFF
text.html.vue-html, source.vue #ffffff
text.html.vue-html string.quoted.double.html, text.html.vue-html punctuation.definition.string #F0E68C
punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html #00FA9A bold
vue.generic.tag.html #FF1493 bold
generic.attribute.html #00ffff
vue.tag.template.html, vue.tag.script.html, vue.tag.style.html, vue.tag.reserved.html #3aeda0 bold
punctuation.definition.vue.tag.begin.html, punctuation.definition.vue.tag.end.html #00f7bd
vue.attribute.html #5cf1b1 bold
vue.attribute.string.begin.html, vue.attribute.string.end.html #00FA9A
vue.attribute.seperator.html #7affcc bold
vue.attribute.seperator.key-value.html #7affcc
entity.name.tag support.class.component #FF69B4 —
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 #CE9178 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #d16969 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #DCDCAA —
keyword.operator.quantifier.regexp #d7ba7d —
markup.heading, heading.1.markdown punctuation #6fbeff bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown #c0c0c0 —
markup.fenced_code.block.markdown punctuation #fb7b7b bold
fenced_code.block.language.markdown #f0ff23 bold
punctuation.definition.list.begin.markdown #6796e6 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #fb7b7b bold
meta.link.inline.markdown #d395ff —
string.other.link.title.markdown #67a4ff bold
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 } !` ;
}
DarkLight Theme | Coding Theme