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 #232831 activityBar.foreground #cdcecf activityBar.inactiveForeground #60728a activityBarBadge.background #81a1c1 activityBarBadge.foreground #2e3440 barBadge.background #81a1c1 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle text, source, variable.other.readwrite, punctuation.definition.variable #cdcecf — punctuation #abb1bb — comment, punctuation.definition.comment #60728a — string, punctuation.definition.string #a3be8c — constant.character.escape
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
barBadge.foreground
#2e3440
breadcrumb.foregreound #cdcecf
button.background #81a1c1
button.foreground #2e3440
button.hoverBackground #668aab
button.secondaryBackground #444c5e
button.secondaryForeground #cdcecf
button.secondaryHoverBackground #5a657d
debugToolBar.background #232831
diffEditor.insertedLineBackground #3c4548
diffEditor.removedLineBackground #403843
editor.background #2e3440
editor.findMatchBackground #a3be8c
editor.findMatchForeground #2e3440
editor.findMatchHighlightBackground #4f6074
editor.findMatchHighlightForeground #cdcecf
editor.foreground #cdcecf
editor.lineHighlightBackground #444c5e
editor.lineHighlightBorder #444c5e
editor.selectionBackground #3e4a5b
editor.selectionForeground #cdcecf
editor.selectionHighlightBackground #3e4a5b
editor.wordHighlightBackground #3e4a5b
editor.wordHighlightStrongBackground #3e4a5b
editorBracketHighlight.foreground1 #ebcb8b
editorBracketHighlight.foreground2 #81a1c1
editorBracketHighlight.foreground3 #c9826b
editorBracketHighlight.foreground4 #a3be8c
editorBracketHighlight.foreground5 #b16286
editorBracketHighlight.foreground6 #88c0d0
editorBracketHighlight.unexpectedBracket.foreground #bf616a
editorCodeLens.foreground #60728a
editorCursor.background #2e3440
editorCursor.foreground #cdcecf
editorError.foreground #bf616a
editorGroupHeader.border #232831
editorGroupHeader.tabsBackground #191c23
editorGroupHeader.tabsBorder #2e3440
editorGutter.addedBackground #a3be8c
editorGutter.background #2e3440
editorGutter.deletedBackground #bf616a
editorGutter.modifiedBackground #ebcb8b
editorHint.foreground #a3be8c
editorHoverWidget.background #232831
editorHoverWidget.foreground #cdcecf
editorIndentGuide.activeBackground1 #ebcb8b
editorIndentGuide.activeBackground2 #81a1c1
editorIndentGuide.activeBackground3 #c9826b
editorIndentGuide.activeBackground4 #a3be8c
editorIndentGuide.activeBackground5 #b16286
editorIndentGuide.activeBackground6 #88c0d0
editorIndentGuide.background1 #5a657d
editorIndentGuide.background2 #5a657d
editorIndentGuide.background3 #5a657d
editorIndentGuide.background4 #5a657d
editorIndentGuide.background5 #5a657d
editorIndentGuide.background6 #5a657d
editorLightBulb.foreground #ebcb8b
editorLineNumber.foreground #7e8188
editorSuggestWidget.background #3e4a5b
editorSuggestWidget.foreground #cdcecf
editorSuggestWidget.highlightForeground #8cafd2
editorSuggestWidget.selectedBackground #4f6074
editorWarning.foreground #ebcb8b
editorWidget.background #232831
editorWidget.foreground #cdcecf
editorWidget.resizeBorder #7e8188
errorLens.errorBackground #4b3d48
errorLens.errorForeground #bf616a
errorLens.hintBackground #45504f
errorLens.hintForeground #a3be8c
errorLens.infoBackground #3f4a5a
errorLens.infoForeground #81a1c1
errorLens.warningBackground #54524f
errorLens.warningForeground #ebcb8b
focusBorder #81a1c1
foreground #cdcecf
gitDecoration.addedResourceForeground #a3be8c
gitDecoration.conflictingResourceForeground #c9826b
gitDecoration.deletedResourceForeground #bf616a
gitDecoration.ignoredResourceForeground #60728a
gitDecoration.modifiedResourceForeground #ebcb8b
gitDecoration.untrackedResourceForeground #9d7495
input.background #2e3440
input.foreground #cdcecf
input.placeholderForeground #60728a
inputOption.activeBackground #3e4a5b
inputOption.activeBorder #3e4a5b
inputOption.activeForeground #cdcecf
keybindingLabel.background #232831
keybindingLabel.border #7e8188
keybindingLabel.bottomBorder #7e8188
keybindingLabel.foreground #7e8188
list.activeSelectionBackground #444c5e
list.activeSelectionForeground #cdcecf
list.activeSelectionIconForeground #cdcecf
list.dropBackground #2e3440
list.errorForeground #bf616a
list.highlightForeground #8cafd2
list.hoverBackground #2e3440
list.inactiveSelectionBackground #2e3440
list.warningForeground #ebcb8b
listFilterWidget.background #232831
listFilterWidget.noMatchesOutline #bf616a
panel.background #232831
panelInput.border #232831
panelTitle.activeBackground #2e3440
panelTitle.activeForeground #cdcecf
panelTitle.inactiveBackground #232831
panelTitle.inactiveForeground #60728a
peekView.border #7e8188
peekViewEditor.background #2e3440
peekViewEditor.matchHighlightBackground #4f6074
peekViewResult.background #232831
peekViewResult.fileForeground #abb1bb
peekViewResult.lineForeground #abb1bb
peekViewResult.matchHighlightBackground #4f6074
peekViewResult.selectionBackground #3e4a5b
peekViewResult.selectionForeground #cdcecf
peekViewTitle.background #232831
peekViewTitleDescription.foreground #7e8188
peekViewTitleLabel.foreground #8cafd2
pickerGroup.border #7e8188
pickerGroup.foreground #7e8188
progressBar.background #8cafd2
scrollbar.shadow #232831
scrollbarSlider.activeBackground #2e3440
scrollbarSlider.background #3e4a5b
scrollbarSlider.hoverBackground #3e4a5b
searchEditor.findMatchBackground #4f6074
selection.background #3e4a5b
sideBar.background #232831
sideBar.border #232831
sideBar.foreground #cdcecf
sideBarSectionHeader.background #232831
sideBarSectionHeader.border #2e3440
sideBarSectionHeader.foreground #cdcecf
sideBarTitle.foreground #cdcecf
statusBar.background #232831
statusBar.border #232831
statusBar.debuggingBackground #c9826b
statusBar.debuggingForeground #232831
statusBar.foreground #abb1bb
statusBar.noFolderBackground #b48ead
statusBar.noFolderForeground #232831
statusBarItem.remoteBackground #81a1c1
statusBarItem.remoteForeground #232831
tab.activeBackground #2e3440
tab.activeForeground #cdcecf
tab.border #191c23
tab.hoverBackground #232831
tab.inactiveBackground #232831
tab.inactiveForeground #60728a
terminal.ansiBlack #3b4252
terminal.ansiBlue #81a1c1
terminal.ansiBrightBlack #465780
terminal.ansiBrightBlue #8cafd2
terminal.ansiBrightCyan #93ccdc
terminal.ansiBrightGreen #b1d196
terminal.ansiBrightMagenta #c895bf
terminal.ansiBrightRed #d06f79
terminal.ansiBrightWhite #e7ecf4
terminal.ansiBrightYellow #f0d399
terminal.ansiCyan #88c0d0
terminal.ansiGreen #a3be8c
terminal.ansiMagenta #b48ead
terminal.ansiRed #bf616a
terminal.ansiWhite #e5e9f0
terminal.ansiYellow #ebcb8b
terminal.background #232831
terminal.foreground #cdcecf
terminal.initialHintForeground #60728a
terminal.selectionBackground #3e4a5b
terminalCursor.background #cdcecf
terminalCursor.foreground #2e3440
textLink.foreground #8cafd2
titleBar.activeBackground #232831
titleBar.activeForeground #cdcecf
titleBar.border #2e3440
titleBar.inactiveBackground #2e3440
titleBar.inactiveForeground #cdcecf
tree.inactiveIndentGuidesStroke #5a657d
tree.indentGuidesStroke #81a1c1 constant.numeric, variable.other.constant, entity.name.constant, constant.language.boolean, constant.language.false, constant.language.true, keyword.other.unit.user-defined, keyword.other.unit.suffix.floating-point #d89079 —
keyword, keyword.operator.word, keyword.operator.new, variable.language.super, support.type.primitive, storage.type, storage.modifier, punctuation.definition.keyword #b48ead —
entity.name.tag.documentation #b48ead —
keyword.operator, punctuation.accessor, punctuation.definition.generic, meta.function.closure punctuation.section.parameters, punctuation.definition.tag, punctuation.separator.key-value #8cafd2 —
entity.name.function, meta.function-call.method, support.function, support.function.misc, variable.function #8cafd2 —
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct #ebcb8b —
meta.enum variable.other.readwrite, variable.other.enummember #d89079 —
meta.property.object #81a1c1 —
meta.type, meta.type-alias, support.type, entity.name.type #ebcb8b —
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator #d89079 —
variable.parameter, meta.function.parameters #93ccdc —
constant.language, support.function.builtin #bf616a —
entity.other.attribute-name.documentation #d89079 —
keyword.control.directive, punctuation.definition.directive #d092ce —
punctuation.definition.typeparameters #ebcb8b —
entity.name.namespace #93ccdc —
support.type.property-name.css #81a1c1 —
variable.language.this, variable.language.this punctuation.definition.variable #bf616a —
variable.object.property #81a1c1 —
string.template variable, string variable #e5e9f0 —
keyword.operator.new — bold
storage.modifier.specifier.extern.cpp #b48ead —
entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.function.definition.cpp #8cafd2 —
storage.modifier.reference.cpp #abb1bb —
meta.interpolation.cs #a3be8c —
source.css entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css #ebcb8b —
punctuation.separator.operator.css #abb1bb —
source.css entity.other.attribute-name.pseudo-class #b48ead —
source.css constant.other.unicode-range #d89079 —
source.css variable.parameter.url #e5e9f0 —
support.type.vendored.property-name #81a1c1 —
source.css meta.property-value variable, source.css meta.property-value variable.other.less, source.css meta.property-value variable.other.less punctuation.definition.variable.less, meta.definition.variable.scss #e5e9f0 —
source.css meta.property-list variable, meta.property-list variable.other.less, meta.property-list variable.other.less punctuation.definition.variable.less #e5e9f0 —
keyword.other.unit.percentage.css #c9826b —
source.css meta.attribute-selector #a3be8c —
keyword.other.definition.ini, punctuation.support.type.property-name.json, support.type.property-name.json, punctuation.support.type.property-name.toml, support.type.property-name.toml, entity.name.tag.yaml, punctuation.support.type.property-name.yaml, support.type.property-name.yaml #81a1c1 —
constant.language.json, constant.language.yaml #d89079 —
entity.name.type.anchor.yaml, variable.other.alias.yaml #93ccdc —
support.type.property-name.table, entity.name.section.group-title.ini #93ccdc —
constant.other.time.datetime.offset.toml #d89079 —
punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml #8cafd2 —
entity.other.document.begin.yaml #8cafd2 —
markup.changed.diff #ebcb8b —
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff #81a1c1 —
markup.inserted.diff #a3be8c —
markup.deleted.diff #bf616a —
variable.other.env #e5e9f0 —
string.quoted variable.other.env #e5e9f0 —
support.function.builtin.gdscript #8cafd2 —
constant.language.gdscript #d89079 —
comment meta.annotation.go #b48ead —
comment meta.annotation.parameters.go #b48ead —
constant.language.go #d89079 —
string.unquoted.alias.graphql #e5e9f0 —
constant.character.enum.graphql #d89079 —
meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql #81a1c1 —
keyword.other.doctype, meta.tag.sgml.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag #b48ead —
text.html constant.character.entity, text.html constant.character.entity punctuation, constant.character.entity.xml, constant.character.entity.xml punctuation, constant.character.entity.js.jsx, constant.charactger.entity.js.jsx punctuation, constant.character.entity.tsx, constant.character.entity.tsx punctuation #f0d399 —
entity.other.attribute-name #81a1c1 —
support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.vue #ebcb8b —
punctuation.definition.annotation, storage.type.annotation #d89079 —
constant.other.enum.java #ebcb8b —
storage.modifier.import.java #b48ead —
comment.block.javadoc.java keyword.other.documentation.javadoc.java —
meta.export variable.other.readwrite.js #e5e9f0 —
variable.other.constant.js, variable.other.constant.ts #d89079 —
variable.other.property.js, variable.other.property.ts #81a1c1 —
variable.other.jsdoc, comment.block.documentation variable.other #93ccdc —
support.type.object.console.js #ebcb8b —
support.constant.node, support.type.object.module.js #b48ead —
storage.modifier.implements #b48ead —
constant.language.null.js, constant.language.null.ts, constant.language.undefined.js, constant.language.undefined.ts, support.type.builtin.ts #93ccdc —
variable.parameter.generic #ebcb8b —
keyword.declaration.function.arrow.js, storage.type.function.arrow.ts #8cafd2 —
punctuation.decorator.ts #d89079 —
keyword.operator.expression.in.js, keyword.operator.expression.in.ts, keyword.operator.expression.infer.ts, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.is, keyword.operator.expression.keyof.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.typeof.ts #b48ead —
support.function.macro.julia #d092ce —
constant.language.julia #d89079 —
constant.other.symbol.julia #d89079 —
text.tex keyword.control.preamble #b48ead —
text.tex support.function.be #8cafd2 —
constant.other.general.math.tex #d89079 —
comment.line.double-dash.documentation.lua storage.type.annotation.lua #b48ead —
comment.line.double-dash.documentation.lua entity.name.variable.lua, comment.line.double-dash.documentation.lua variable.lua #e5e9f0 —
heading.1.markdown punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.atx.1.mdx, markup.heading.atx.1.mdx punctuation.definition.heading.mdx, markup.heading.setext.1.markdown, markup.heading.heading-0.asciidoc #8cafd2 —
markup.italic #cdcecf italic
markup.strikethrough #cdcecf strikethrough
punctuation.definition.link, markup.underline.link #b48ead —
text.html.markdown punctuation.definition.link.title, string.other.link.title.markdown, markup.link, punctuation.definition.constant.markdown, constant.other.reference.link.markdown, markup.substitution.attribute-reference #b48ead —
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown, markup.raw.block.markdown #bf88bc —
fenced_code.block.language #88c0d0 —
markup.fenced_code.block punctuation.definition, markup.raw support.asciidoc #8cafd2 —
markup.quote, punctuation.definition.quote.begin #abb1bb —
meta.separator.markdown #8cafd2 —
punctuation.definition.list.begin.markdown, markup.list.bullet #93ccdc —
entity.other.attribute-name.multipart.nix, entity.other.attribute-name.single.nix #81a1c1 —
variable.parameter.name.nix #93ccdc —
meta.embedded variable.parameter.name.nix #93ccdc —
string.unquoted.path.nix #a3be8c —
support.attribute.builtin, meta.attribute.php #81a1c1 —
meta.function.parameters.php punctuation.definition.variable.php #93ccdc —
constant.language.php #d89079 —
text.html.php support.function #8cafd2 —
support.variable.magic.python, meta.function-call.arguments.python #cdcecf —
support.function.magic.python #8cafd2 —
variable.parameter.function.language.special.self.python, variable.language.special.self.python #bf616a —
keyword.control.flow.python, keyword.operator.logical.python #b48ead —
storage.type.function.python #8cafd2 —
support.token.decorator.python, meta.function.decorator.identifier.python #d89079 —
meta.function-call.python #8cafd2 —
entity.name.function.decorator.python, punctuation.definition.decorator.python #d89079 —
constant.character.format.placeholder.other.python #a3be8c —
support.type.exception.python, support.function.builtin.python #bf616a —
support.type.python #ebcb8b —
constant.language.python #d89079 —
meta.indexed-name.python, meta.item-access.python #e5e9f0 —
storage.type.string.python #a3be8c —
meta.function.parameters.python — @lsp.type.type.fg
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #f0d399 —
keyword.control.anchor.regexp #f0d399 —
punctuation.definition.group.regexp, keyword.other.back-reference.regexp #f0d399 —
punctuation.definition.character-class.regexp #f0d399 —
constant.other.character-class.regexp #f0d399 —
constant.other.character-class.range.regexp #f0d399 —
keyword.operator.quantifier.regexp #f0d399 —
constant.character.numeric.regexp #f0d399 —
punctuation.definition.group.no-capture.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp #8cafd2 —
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust #d89079 —
entity.name.function.macro.rules.rust, storage.type.module.rust, storage.modifier.rust, storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.union.rust, storage.type.impl.rust, storage.type.rust, storage.type.function.rust, storage.type.type.rust #b48ead —
entity.name.type.numeric.rust #ebcb8b —
meta.generic.rust #ebcb8b —
entity.name.impl.rust #ebcb8b —
entity.name.module.rust #93ccdc —
entity.name.trait.rust #ebcb8b —
storage.type.source.rust #ebcb8b —
entity.name.union.rust #ebcb8b —
meta.enum.rust storage.type.source.rust #d89079 —
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust #d092ce —
storage.modifier.lifetime.rust, entity.name.type.lifetime #ebcb8b —
string.quoted.double.rust constant.other.placeholder.rust #a3be8c —
meta.function.return-type.rust meta.generic.rust storage.type.rust #ebcb8b —
meta.function.call.rust #8cafd2 —
punctuation.brackets.angle.rust #abb1bb —
constant.other.caps.rust #d89079 —
meta.function.definition.rust variable.other.rust #93ccdc —
meta.function.call.rust variable.other.rust #e5e9f0 —
variable.language.self.rust #bf616a —
variable.other.metavariable.name.rust, meta.macro.metavariable.rust keyword.operator.macro.dollar.rust #e5e9f0 —
comment.line.shebang, comment.line.shebang punctuation.definition.comment, comment.line.shebang, punctuation.definition.comment.shebang.shell, meta.shebang.shell #bf616a —
comment.line.shebang constant.language #bf616a —
meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation, meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation #8cafd2 —
meta.string meta.interpolation.parameter.shell variable.other.readwrite #e5e9f0 —
source.shell punctuation.section.interpolation, punctuation.definition.evaluation.backticks.shell #8cafd2 —
entity.name.tag.heredoc.shell #bf616a —
string.quoted.double.shell variable.other.normal.shell #e5e9f0 —
markup.heading.synopsis.man, markup.heading.title.man, markup.heading.other.man, markup.heading.env.man #8cafd2 —
markup.heading.commands.man #8cafd2 —
markup.heading.env.man #8cafd2 —
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...
main*
Nordfox | Coding Theme Button.tsx
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 } !` ;
}