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 #111111 activityBar.foreground #ffffff activityBarBadge.background #353535 activityBarBadge.foreground #fff editor.background #2b2b2b editor.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #afafaf italic string, markup.inline.raw.string.markdown #ffdb99 punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.raw.markdown, meta.fstring.python string.interpolated.python string.quoted.single.python storage.type.string.python #ffcb6b constant.numeric.dec, constant.numeric.decimal, constant.numeric.float, constant.numeric, constant.language.true, constant.language.false, constant.language.boolean, keyword.other.unit.hexadecimal.cpp, keyword.other.unit.octal.cpp, constant.language.python, constant.language.undefined, constant.language.null, meta.return.type.ts support.type.primitive.ts, support.type.primitive.ts, support.type.builtin.ts, keyword.type.cs
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
editorBracketHighlight.foreground1
#FFFFFF
editorBracketHighlight.foreground2 #ffdb99
editorBracketHighlight.foreground3 #dbffa5
editorBracketHighlight.foreground4 #9cd8ff
editorBracketHighlight.foreground5 #e9cbff
editorBracketHighlight.foreground6 #ffacb3
editorBracketHighlight.unexpectedBracket.foreground #ff6a6a
editorGroup.border #1e1e1e
editorGroup.dropBackground #3535358F
editorGroupHeader.tabsBackground #1e1e1e
icon.foreground #ffffff
list.activeSelectionBackground #2b2b2b
list.dropBackground #434343
list.focusBackground #2b2b2b70
list.hoverBackground #2b2b2b70
list.inactiveSelectionBackground #2b2b2b70
minimap.selectionHighlight #ffffff
scrollbar.shadow #fff
sideBar.background #1e1e1e
sideBarSectionHeader.background #232323
sideBarTitle.foreground #bbbbbb
statusBar.background #111111
statusBar.debuggingBackground #cca256
statusBar.noFolderBackground #111111
statusBarItem.activeBackground #2b2b2b
statusBarItem.hoverBackground #1e1e1e
tab.activeBackground #2b2b2b
tab.inactiveBackground #232323
terminal.ansiBlue #7bcbff
terminal.ansiBrightBlue #9cd8ff
terminal.ansiBrightCyan #c5fffb
terminal.ansiBrightGreen #dbffa5
terminal.ansiBrightMagenta #e9cbff
terminal.ansiBrightRed #ffacb3
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffdb99
terminal.ansiCyan #9fece7
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #deb2ff
terminal.ansiRed #ff929b
terminal.ansiWhite #f0f0f0
terminal.ansiYellow #ffcb6b
titleBar.activeBackground #1e1e1e
titleBar.inactiveBackground #1e1e1e entity.name.function, entity.name.function.js, entity.name.function.definition, entity.name.function.call, entity.name.function.member, support.function.magic.python, source.python meta.function-call.python meta.function-call.generic.python, keyword.other.definition.coq #C3E88D
variable.parameter.function, meta.type.annotation.ts meta.type.function.ts meta.parameters.ts variable.parameter.ts #ffcb6b
keyword.control, keyword.operator.expression.of.js, keyword.operator, keyword.operator.bitwise.shift.cpp, meta.type.annotation.ts meta.brace.round.ts, keyword.other.important.scss, keyword.other.important.css #FF9FEF
storage.modifier, meta.function.definition.parameters.cpp storage.type, storage.modifier.specifier.const.cpp, storage.type, support.type.python, support.type.primitive.ts, constant.character.escape, keyword.other.fn.rust, keyword.other.rust, keyword.other.unit.suffix.floating-point.cpp #7bcbff
meta.preprocessor, keyword.control.directive.define.cpp, keyword.control.directive.include, keyword.control.import.python, storage.modifier.package.java, keyword.other.package.java, keyword.control.import, meta.import.js keyword.control.as.js, meta.import.js keyword.control.from.js, meta.import.ts keyword.control.as.ts, meta.import.ts keyword.control.from.ts, keyword.other.import.haskell, keyword.other.module.haskell, keyword.other.qualified.haskell, keyword.other.as.haskell, keyword.other.import.qml, keyword.other.using.cs, keyword.other.module.coq #ff929b
entity.name.type.class, entity.name.type.interface, entity.name.type.struct, entity.name.type.enum, variable.language.super, meta.var.expr.ts meta.var-single-variable.expr.ts meta.type.annotation.ts entity.name.type.ts, meta.class.ts meta.method.declaration.ts storage.type.ts, meta.type.parameters.ts entity.name.type.ts, meta.type.annotation.ts, entity.other.inherited-class.ts, entity.other.inherited-class.js, support.function.magic.python, entity.name.type.rust, storage.class.std.rust, entity.name.function.constructor.cpp entity.name.function.definition.special.constructor.cpp, meta.function.definition.special.constructor.cpp meta.head.function.definition.special.constructor.cpp entity.name.function.constructor.cpp entity.name.function.definition.special.constructor.cpp, support.class.qml, variable.other.readwrite.js #9fece7
variable.language.this, variable.language.special.self, keyword.other.this.cs #ffcb6b
punctuation.definition.template-expression, meta.fstring.python constant.character.format.placeholder.other.python, meta.fstring.python constant.character.format.placeholder.other.python #ff9fef
meta.template.expression, meta.template.expression.js #ffffff
punctuation.separator.scope-resolution.constructor.cpp, punctuation.separator.colon.access.control.cpp, meta.function.definition.special.constructor.cpp punctuation.section, entity.name.function.operator.member.cpp #fff
entity.name.scope-resolution.function.definition.cpp, entity.name.namespace.cpp, entity.name.function.constructor.cpp, meta.body.namespace.cpp meta.function.definition.cpp meta.body.function.definition.cpp entity.name.scope-resolution.cpp, meta.block.class.cpp meta.qualified_type.cpp entity.name.scope-resolution.cpp, entity.name.type.constructor, entity.name.function.constructor.cpp, entity.name.type.namespace.cs, entity.name.type.cs, keyword.other.assertion.coq #9fece7
storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.protected.cpp, keyword.other.proof.coq, keyword.other.gallina.coq, keyword.other.vernacular #FF9FEF
punctuation.separator.pointer-access.cpp, keyword.operator.pointer-access #7bcbff
keyword.other.namespace.cs, keyword.other.class.cs #7BCBFF
variable.other.object.cs #FFCB6B
variable.parameter.uppercase.prolog #FF9FEF
keyword.control.cut.prolog #ffcb6b
keyword.control.fact.end.prolog, keyword.control.clause.bodyend.prolog #ffffff
keyword.other.instance.haskell, keyword.other.newtype.haskell, keyword.other.where.haskell, keyword.other.class.haskell, keyword.other.data.haskell, keyword.other.deriving.haskell, keyword.other.type.haskell, keyword.other.let.haskell #FF9FEF
meta.function.type-declaration.haskell entity.name.function.haskell punctuation.paren.haskell #cdf196
constant.other.haskell #9fece7
storage.modifier.mut.rust #DEB2FF
meta.attribute.rust #ff929b
punctuation.definition.attribute.rust #ff929b bold
support.class.console.js, support.class.builtin.js #9fece7
variable.other.object.js, variable.other.object.property.js, meta.function-call.js, meta.function-call.ts #fff
entity.name.type.js, meta.class.ts support.class.builtin.ts #9FECE7
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.js #9FECE7
meta.decorator.ts punctuation.decorator.ts, meta.decorator.ts meta.function-call.ts entity.name.function.ts, meta.decorator.ts meta.brace.round.ts #FF929B bold
meta.decorator.ts meta.objectliteral.ts meta.brace.round.ts, meta.type.annotation.ts meta.object.type.ts, meta.type.annotation.ts meta.type.tuple.ts meta.brace.square.ts #ffffff —
meta.decorator.ts meta.objectliteral.ts meta.function-call.ts entity.name.function.ts #C3E88D —
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, meta.type.parameters.ts punctuation.separator.comma.ts, meta.type.annotation.ts punctuation.definition.parameters.begin.ts, meta.type.annotation.ts punctuation.definition.parameters.end.ts #fff
support.variable.magic.python #7bcbff
support.function.builtin.python #9FECE7 —
meta.function.decorator.python entity.name.function.decorator.python, meta.function.decorator.python support.type.python, meta.function.decorator.python entity.name.function.decorator.python punctuation.definition.decorator.python #9FECE7
support.type.exception.python #FF929B
punctuation.definition.tag.end, punctuation.definition.tag.begin #eb48d0
entity.other.attribute-name #c3e88d
entity.name.tag.localname, entity.name.tag #FF9FEF
text.html.derivative meta.tag.metadata.doctype.html entity.name.tag.html, text.html.derivative meta.tag.metadata.doctype.html entity.other.attribute-name.html #7BCBFF
text.html.derivative meta.tag.metadata.doctype.html punctuation.definition.tag.begin.html, text.html.derivative meta.tag.metadata.doctype.html punctuation.definition.tag.end.html #209bec
variable.css, meta.function.variable.css variable.argument.css #FFDB99
support.function.misc.css #C3E88D
source.css keyword.operator, punctuation.definition.entity.css #FFF
entity.other.attribute-name.class.css, entity.other.attribute-name.class.css punctuation.definition.entity.css #ffb982
entity.other.attribute-name.id.css, entity.other.attribute-name.id.css punctuation.definition.entity.css #FF929B
entity.other.attribute-name.pseudo-class.css #C3E88D
support.constant.property-value.css #C3E88D
keyword.other.DML.sql, keyword.other.alias.sql, keyword.other.sql #7BCBFF bold
constant.other.database-name.sql #FFFFFF
heading.1.markdown #7bcbff bold
heading.2.markdown #deb2ff bold
heading.3.markdown #ff929b bold
heading.4.markdown #ffb982 bold
heading.5.markdown #c3e88d bold
source.json meta.structure.dictionary.json support.type.property-name.json #7bcbff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #deb2ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ff929b —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffb982 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffcb6b —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #c3e88d —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #7bcbff —
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 } !` ;
}
Kubu theme | Coding Theme