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 #222831 activityBar.foreground #00FFF5 activityBar.inactiveForeground #68696888 activityBarBadge.background #00FFF5 activityBarBadge.foreground #222831 badge.background #00FFF5 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle invalid.illegal #00FFF5 — meta.object-literal.key, meta.object-literal.key constant.character.escape, meta.object-literal string, meta.object-literal string constant.character.escape, support.type.property-name, support.type.property-name constant.character.escape #FFD369 — keyword, storage, meta.class storage.type, keyword.operator.expression.import, keyword.operator.new #FF3E78 — support.type, meta.type.annotation entity.name.type, new.expr meta.type.parameters entity.name.type, storage.type.primitive, storage.type.built-in.primitive, meta.function.parameter storage.type
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#222831
button.background #00FFF5
button.foreground #222831
debugExceptionWidget.background #FFAEAC33
debugExceptionWidget.border #FF5C57
debugToolBar.border #E9EAEB
diffEditor.insertedTextBackground #2DAE5824
diffEditor.removedTextBackground #FFAEAC44
dropdown.border #E9EAEB
editor.background #222831
editor.findMatchBackground #EBB1006A
editor.findMatchHighlightBackground #EBB1002A
editor.findRangeHighlightBackground #F5B90011
editor.focusedStackFrameHighlightBackground #2DAE5822
editor.foldBackground #F3F4F5
editor.foreground #ffffff
editor.hoverHighlightBackground #EBB10018
editor.lineHighlightBackground #1B262C
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #F5B90033
editor.selectionBackground #EBB10022
editor.snippetTabstopHighlightBackground #ADB1C23A
editor.stackFrameHighlightBackground #F5B90033
editor.wordHighlightBackground #ADB1C23A
editorBracketMatch.background #1B262C
editorBracketMatch.border #00000000
editorError.foreground #FF5C56
editorGroup.emptyBackground #222831
editorGutter.addedBackground #2DAE58
editorGutter.deletedBackground #FF5C57
editorGutter.modifiedBackground #00A39FAA
editorLineNumber.activeForeground #00FFF5
editorLineNumber.foreground #9194A2aa
editorLink.activeForeground #35CF68
editorOverviewRuler.addedForeground #2DAE58
editorOverviewRuler.deletedForeground #FF5C57
editorOverviewRuler.errorForeground #FF5C56
editorOverviewRuler.findMatchForeground #04d1bcAA
editorOverviewRuler.modifiedForeground #00A39FAA
editorOverviewRuler.warningForeground #ebb100
editorOverviewRuler.wordHighlightForeground #ADB1C288
editorOverviewRuler.wordHighlightStrongForeground #35CF68
editorWarning.foreground #ebb100
editorWhitespace.foreground #5b74e655
extensionButton.prominentBackground #2DAE58
extensionButton.prominentHoverBackground #238744
focusBorder #393E46
foreground #DDDDDD
gitDecoration.modifiedResourceForeground #00A39F
gitDecoration.untrackedResourceForeground #2DAE58
input.border #E9EAEB
list.activeSelectionBackground #1B262C
list.activeSelectionForeground #ffffff
list.errorForeground #FF5C56
list.focusBackground #1B262C
list.focusForeground #ffffff
list.highlightForeground #F5FDB0
list.hoverBackground #393E46
list.inactiveSelectionBackground #687175
list.inactiveSelectionForeground #ffffff
list.warningForeground #B38700
menu.background #222831
menu.selectionBackground #E9EAEB
menu.selectionForeground #686968
menubar.selectionBackground #E9EAEB
menubar.selectionForeground #686968
merge.currentContentBackground #35CF6833
merge.currentHeaderBackground #35CF6866
merge.incomingContentBackground #14B1FF33
merge.incomingHeaderBackground #14B1FF77
notifications.background #1B262C
peekView.border #09A1ED
peekViewEditor.background #14B1FF08
peekViewEditor.matchHighlightBackground #F5B90088
peekViewEditor.matchHighlightBorder #F5B90000
peekViewResult.matchHighlightBackground #F5B90088
peekViewResult.selectionBackground #09A1ED
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #09A1ED11
pickerGroup.foreground #FF3E78
progressBar.background #00FFF5
scrollbar.shadow #00000000
selection.background #2DAE5844
settings.modifiedItemIndicator #04d1bc
sideBar.background #222831
sideBar.border #393E46
sideBarSectionHeader.background #393E46
sideBarSectionHeader.border #393E46
statusBar.background #1B262C
statusBar.debuggingBackground #04d1bc
statusBar.debuggingBorder #00A39F
statusBar.noFolderBackground #565869
statusBarItem.remoteBackground #00FFF5
tab.activeBorderTop #00FFF5
tab.border #393E46
tab.inactiveBackground #1B262C
terminal.ansiBlack #565869
terminal.ansiBlue #09A1ED
terminal.ansiBrightBlack #75798F
terminal.ansiBrightBlue #14B1FF
terminal.ansiBrightCyan #04d1bc
terminal.ansiBrightGreen #35CF68
terminal.ansiBrightMagenta #FF94D2
terminal.ansiBrightRed #FFAEAC
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #F5B900
terminal.ansiCyan #04d1bc
terminal.ansiGreen #2DAE58
terminal.ansiMagenta #FF3E78
terminal.ansiRed #FF5C57
terminal.ansiWhite #FAFBF9
terminal.ansiYellow #ebb100
titleBar.activeBackground #F3F4F5
#2DAE58
storage.type.annotation #C25193 —
keyword.other.unit #FF5C57CC —
constant.language, support.constant, variable.language #2DAE58 —
variable, support.variable #94DAFF —
variable.language.this #04d1bc —
entity.name.function, support.function #A9F1DF —
entity.name.function.decorator #11658F —
meta.class entity.name.type, new.expr entity.name.type, entity.other.inherited-class, support.class #04d1bc —
keyword.preprocessor.pragma, keyword.control.directive.include, keyword.other.preprocessor #11658F —
entity.name.exception #FF5C56 —
constant, constant.character #2DAE58 —
constant.character.escape #F5B900 —
string.regexp, string.regexp constant.character.escape #04d1bc —
string.regexp punctuation #00A39F —
string.regexp keyword, string.regexp keyword.control, string.regexp constant #FF3E78 —
string.regexp keyword.other #00A39FBB —
constant.other.symbol #ebb100 —
comment, punctuation.definition.comment #ADB1C2 italic
comment.block.preprocessor #9194A2
comment.block.documentation entity.name.type #2DAE58 —
comment.block.documentation storage, comment.block.documentation keyword.other, meta.class comment.block.documentation storage.type #9194A2 —
comment.block.documentation variable #C25193 —
keyword.operator, keyword.other.arrow, keyword.control.@ #adc2ad —
meta.tag.metadata.doctype.html entity.name.tag, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html #9194A2 —
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html #ADB1C2 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #FF3E78 —
constant.character.entity, punctuation.definition.entity #ebb100 —
meta.selector, meta.selector entity, meta.selector entity punctuation, source.css entity.name.tag #FF3E78 —
source.css variable #11658F —
punctuation.definition.entity.css #FF82CBBB —
source.css meta.property-name, source.css support.type.property-name #ED50F1 —
source.css support.type.vendored.property-name #565869AA —
meta.property-value, support.constant.property-value #04d1bc —
source.css support.constant #2DAE58 —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #ebb100 —
source.css support.function #09A1ED —
keyword.other.important #04D1BC —
source.css.scss entity.other.attribute-name.class.css, source.css.scss entity.other.attribute-name.id.css #FF3E78 —
source.css.less entity.other.attribute-name.class.css #FF3E78 —
source.stylus meta.brace.curly.css #ADB1C2 —
source.stylus entity.other.attribute-name.class, source.stylus entity.other.attribute-name.id, source.stylus entity.name.tag #FF3E78 —
source.stylus support.type.property-name #565869 —
source.stylus variable #11658F —
string.other.link.title.markdown #09A1ED —
markup.output, markup.raw #999999 —
markup.underline — underline
markup.bold, markup.italic #04d1bc —
meta.brace.round, meta.brace.square, storage.type.function.arrow #ffffff —
support.function.js #11658F —
variable.language.super, support.type.object.module.js #FF3E78 —
entity.name.tag.yaml #11658F —
variable.other.alias.yaml #2DAE58 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #75798F —
meta.use.php entity.other.alias.php #04d1bc —
source.php support.function.construct, source.php support.function.var #11658F —
storage.modifier.extends.php, source.php keyword.other, storage.modifier.php #FF3E78 —
meta.class.body.php storage.type.php #FF3E78 —
storage.type.php, meta.class.body.php meta.function-call.php storage.type.php, meta.class.body.php meta.function.php storage.type.php #2DAE58 —
source.php keyword.other.DML #D94E4A —
source.sql.embedded.php keyword.operator #2DAE58 —
source.ini keyword, source.toml keyword, source.env variable #11658F —
source.ini entity.name.section, source.toml entity.other.attribute-name #FF3E78 —
source.go storage.type #2DAE58 —
keyword.import.go, keyword.package.go #FF5C56 —
source.reason variable.language string #565869 —
source.reason support.type, source.reason constant.language, source.reason constant.language constant.numeric, source.reason support.type string.regexp #2DAE58 —
source.reason keyword.operator keyword.control, source.reason keyword.control.less, source.reason keyword.control.flow #ADB1C2 —
source.reason string.regexp #ebb100 —
source.reason support.property-value #11658F —
source.rust support.function.core.rust #11658F —
source.rust storage.type.core.rust, source.rust storage.class.std #2DAE58 —
source.rust entity.name.type.rust #04d1bc —
storage.type.function.coffee #ADB1C2 —
keyword.type.cs, storage.type.cs #2DAE58 —
entity.name.type.namespace.cs #04d1bc —
markup.inserted.diff #2DAE58 —
markup.deleted.diff #FF5C56 —
meta.diff.range, meta.diff.index, meta.separator #09A1ED —
source.makefile variable #11658F —
keyword.control.protocol-specification.objc #FF3E78 —
meta.parens storage.type.objc, meta.return-type.objc support.class, meta.return-type.objc storage.type.objc #2DAE58 —
source.sql keyword #11658F —
keyword.other.special-method.dockerfile #09A1ED —
constant.other.symbol.elixir #11658F —
storage.type.elm, support.module.elm #04d1bc —
source.elm keyword.other #ADB1C2 —
source.erlang entity.name.type.class #04d1bc —
variable.other.field.erlang #11658F —
source.erlang constant.other.symbol #2DAE58 —
storage.type.haskell #2DAE58 —
meta.declaration.class.haskell storage.type.haskell, meta.declaration.instance.haskell storage.type.haskell #04d1bc —
meta.preprocessor.haskell #75798F —
source.haskell keyword.control #FF3E78 —
source.ocaml markup.underline —
source.ocaml punctuation.definition.tag emphasis, source.ocaml entity.name.class constant.numeric, source.ocaml support.type #FF3E78 —
source.ocaml constant.numeric entity.other.attribute-name #04d1bc —
source.ocaml comment meta.separator #ADB1C2 —
source.ocaml support.type strong, source.ocaml keyword.control strong #ADB1C2 —
source.ocaml support.constant.property-value #11658F —
source.scala entity.name.class #04d1bc —
storage.type.scala #2DAE58 —
variable.parameter.scala #11658F —
meta.bracket.scala, meta.colon.scala #ADB1C2 —
meta.metadata.simple.clojure #ADB1C2 —
meta.metadata.simple.clojure meta.symbol #04d1bc —
source.r keyword.other #ADB1C2 —
source.svelte meta.block.ts entity.name.label #11658F —
keyword.operator.word.applescript #FF3E78 —
meta.function-call.livescript #09A1ED —
variable.language.self.lua #04d1bc —
entity.name.type.class.swift, meta.inheritance-clause.swift, meta.import.swift entity.name.type #04d1bc —
source.swift punctuation.section.embedded #B38700 —
variable.parameter.function.swift entity.name.function.swift #565869 —
meta.function-call.twig #565869 —
string.unquoted.tag-string.django #565869 —
entity.tag.tagbraces.django, entity.tag.filter-pipe.django #ADB1C2 —
meta.section.attributes.haml constant.language, meta.section.attributes.plain.haml constant.other.symbol #FF8380 —
support.constant.handlebars #ADB1C2 —
text.log log.constant #C25193 —
source.c string constant.other.placeholder, source.cpp string constant.other.placeholder #B38700 —
constant.other.key.groovy #11658F —
storage.type.groovy #04d1bc —
meta.definition.variable.groovy storage.type.groovy #2DAE58 —
storage.modifier.import.groovy #ebb100 —
entity.other.attribute-name.class.pug, entity.other.attribute-name.id.pug #04d1bc —
constant.name.attribute.tag.pug #ADB1C2 —
entity.name.type.wasm #2DAE58 —
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 } ! ` ;
}
witcher | Coding Theme