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 #332f2d activityBar.border #00000000 activityBar.dropBackground #82d4c655 activityBar.foreground #82d4c6cc activityBarBadge.background #82d4c6 activityBarBadge.foreground #332f2d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #7a7775 — comment.block #9f9d9b — string, string.quoted #e69ee1 — string.regexp #e69ee1 normal keyword.control.anchor.regexp
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#82d4c6
badge.foreground #332f2d
button.background #82d4c6
button.foreground #332f2d
button.hoverBackground #e69ee1
contrastBorder #332f2d
debugExceptionWidget.background #332f2d
debugExceptionWidget.border #e69ee1
debugToolBar.background #332f2d
diffEditor.insertedTextBackground #bfe07633
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #e1797933
diffEditor.removedTextBorder #00000000
dropdown.background #332f2d
dropdown.border #00000000
dropdown.foreground #ecedea
editor.background #332f2d
editor.findMatchBackground #bfe07633
editor.findMatchHighlightBackground #bfe07633
editor.findRangeHighlightBackground #ecedea22
editor.foreground #ecedea
editor.hoverHighlightBackground #ecedea11
editor.inactiveSelectionBackground #ecedea11
editor.lineHighlightBackground #ecedea11
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #ecedea22
editor.selectionBackground #585553
editor.selectionHighlightBackground #4a4745
editor.wordHighlightBackground #4a4745
editor.wordHighlightStrongBackground #413d3b
editorCursor.foreground #908e8c
editorError.foreground #e17979
editorGroupHeader.tabsBackground #332f2d
editorGroupHeader.tabsBorder #332f2d
editorGutter.addedBackground #bfe07633
editorGutter.deletedBackground #e1797933
editorGutter.modifiedBackground #82d4c644
editorHoverWidget.background #413d3b
editorHoverWidget.border #82d4c6
editorIndentGuide.activeBackground #6b6866
editorIndentGuide.background #4a4745
editorLineNumber.foreground #908e8c
editorMarkerNavigation.background #332f2d
editorMarkerNavigationError.background #e17979
editorMarkerNavigationWarning.background #e17979
editorOverviewRuler.commonContentForeground #e69ee1
editorOverviewRuler.currentContentForeground #e69ee1
editorOverviewRuler.incomingContentForeground #e69ee1
editorRuler.foreground #908e8c
editorSuggestWidget.background #413d3b
editorSuggestWidget.border #6b6866
editorSuggestWidget.foreground #ecedea
editorWarning.foreground #e17979
editorWidget.background #332f2d
errorForeground #e17979
extensionButton.prominentBackground #e69ee1
extensionButton.prominentForeground #332f2d
extensionButton.prominentHoverBackground #e69ee1
focusBorder #00000000
foreground #ecedea
gitDecoration.addedResourceForeground #bfe076
gitDecoration.conflictingResourceForeground #e17979
gitDecoration.ignoredResourceForeground #908e8c
gitDecoration.modifiedResourceForeground #82d4c6
gitDecoration.submoduleResourceForeground #e69ee1
gitDecoration.untrackedResourceForeground #bfe076
input.background #413d3b
input.border #82d4c644
input.foreground #ecedea
input.placeholderForeground #908e8c
inputOption.activeBorder #ecedea
inputValidation.errorBackground #e17979
inputValidation.errorBorder #e17979
inputValidation.infoBackground #e69ee1
inputValidation.infoBorder #e69ee1
inputValidation.warningBackground #e1797933
inputValidation.warningBorder #e1797933
list.activeSelectionBackground #585553
list.activeSelectionForeground #ecedea
list.errorForeground #e17979
list.focusBackground #585553
list.focusForeground #ecedea
list.highlightForeground #ecedea
list.hoverBackground #413d3b
list.hoverForeground #ecedea
list.inactiveFocusBackground #4a4745
list.inactiveSelectionBackground #4a4745
list.inactiveSelectionForeground #ecedea
list.invalidItemForeground #e17979
list.warningForeground #e17979
merge.currentHeaderBackground #e69ee1
merge.incomingHeaderBackground #e69ee1
panel.background #332f2d
panel.border #4a4745
panelTitle.activeBorder #82d4c6
panelTitle.activeForeground #ecedea
panelTitle.inactiveForeground #908e8c
peekView.border #e69ee1
peekViewEditor.matchHighlightBackground #bfe07633
peekViewResult.fileForeground #ecedea
peekViewResult.lineForeground #ecedea
peekViewResult.matchHighlightBackground #bfe07633
peekViewResult.selectionForeground #ecedea
peekViewTitle.background #332f2d
peekViewTitleLabel.foreground #ecedea
pickerGroup.foreground #e69ee1
progressBar.background #e69ee1
scrollbarSlider.activeBackground #4a4745
scrollbarSlider.background #585553
scrollbarSlider.hoverBackground #4a4745
settings.checkboxBackground #4a4745
settings.checkboxBorder #00000000
settings.checkboxForeground #ecedea
settings.dropdownBackground #4a4745
settings.dropdownBorder #00000000
settings.inactiveSelectedItemBorder #82d4c6
settings.modifiedItemForeground #82d4c6
settings.numberInputBackground #4a4745
settings.numberInputBorder #00000000
settings.textInputBackground #4a4745
settings.textInputBorder #00000000
sideBar.background #3a3634
sideBar.border #00000000
sideBar.foreground #ecedea
sideBarSectionHeader.background #332f2d
sideBarSectionHeader.foreground #908e8c
sideBarTitle.foreground #ecedea
statusBar.background #332f2d
statusBar.border #332f2d
statusBar.debuggingBackground #e1797933
statusBar.foreground #ecedea88
statusBar.noFolderBackground #332f2d
tab.activeBackground #4a4745
tab.activeBorder #82d4c6
tab.activeForeground #ecedea
tab.border #332f2d
tab.inactiveBackground #413d3b
tab.inactiveForeground #908e8c
tab.unfocusedActiveBorder #332f2d
terminal.ansiBlack #b5b4b1
terminal.ansiBrightBlack #b5b4b1
terminal.ansiBrightBlue #e69ee1
terminal.ansiBrightCyan #e69ee1
terminal.ansiBrightGreen #bfe076
terminal.ansiBrightMagenta #b9a1f3
terminal.ansiBrightRed #e17979
terminal.ansiBrightWhite #ecedea
terminal.ansiBrightYellow #bfe076
terminal.ansiCyan #e69ee1
terminal.ansiGreen #bfe076
terminal.ansiMagenta #82d4c6
terminal.ansiRed #e17979
terminal.ansiWhite #ecedea
terminal.ansiYellow #bfe076
textLink.activeForeground #82d4c6
titleBar.activeBackground #332f2d
titleBar.activeForeground #908e8c
titleBar.inactiveForeground #908e8c #82d4c6
constant.character.escape.backslash.regexp #b9a1f3 —
punctuation.definition.group.regexp #bfe076 —
punctuation.definition.template-expression #bfe076 —
string.regexp keyword.other #82d4c6 —
string.template meta.template.expression, string.template.js #82d4c6 —
constant.language.boolean #82d4c6 —
support.constant.math #bfe076 —
constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #b5b4b1 —
constant.character, constant.other #bfe076 —
support.constant, keyword.other.special-method, keyword.other.new #82d4c6 —
support.constant.json #bfe076 —
keyword.operator.arithmetic.js, keyword.operator.increment.js, meta.var.expr keyword.operator.assignment #b9a1f3 —
meta.array.literal.js variable.other.readwrite.js #e69ee1 —
constant.character.escape #e69ee1 —
constant.numeric, constant.character.numeric #bfe076 —
punctuation.accessor, keyword #b5b4b1 —
keyword.other.unit #b9a1f3 —
constant.language.undefined #b5b4b1 italic
constant.language.null #9f9d9b bold italic
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js #82d4c6 —
entity.name.class, meta.class entity.name.type.class #bfe076 —
entity.other.inherited-class #e69ee1 —
entity.name.function #bfe076 —
variable.parameter #e69ee1 —
punctuation.definition.tag, meta.tag #ecedea —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #ecedea —
variable.other.jsdoc, variable.other.phpdoc #e69ee1 —
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html #b9a1f3 —
meta.tag.structure.body entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.metadata.style entity.name.tag, meta.tag.structure.html punctuation.definition.tag, meta.tag.structure.head punctuation.definition.tag, meta.tag.structure.body punctuation.definition.tag, meta.tag.metadata.style punctuation.definition.tag — bold
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, punctuation.definition.tag #e69ee1 —
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag #82d4c6 —
punctuation.definition.tag.html #82d4c6 —
entity.other.attribute-name #bfe076 —
meta.attribute string.quoted #82d4c6 —
entity.other.attribute-name.id.html, meta.attribute.id.html entity.other.attribute-name, meta.attribute.name.html entity.other.attribute-name, meta.attribute.href.html entity.other.attribute-name, meta.attribute.src.html entity.other.attribute-name #b9a1f3 —
entity.name.tag.custom #bfe076 —
constant.character.entity.named #82d4c6 —
meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag #b9a1f399 italic
support.constant.meta.property-value #82d4c6 —
support.type, support.class #bfe076 —
support.variable.dom #bfe076 —
keyword.operator.relational #b9a1f3 —
keyword.operator.assignment #b9a1f3 —
meta.delimiter.period #b9a1f3 —
variable.parameter.function #82d4c6 —
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag #e69ee1 —
meta.property-list entity.name.tag.reference #82d4c6 —
constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css #82d4c6 —
constant.other.color #b9a1f3 —
entity.other.attribute-name.id #e69ee1 —
meta.property-name #e69ee1 —
punctuation.definition.parameters #ecedea —
keyword.control.operator #82d4c6 —
keyword.control.flow #b9a1f3 —
keyword.operator.logical #b9a1f3 —
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance #82d4c6 —
variable.language #82d4c6 —
variable.other.property #b9a1f3 —
variable.other.object.property #ecedea —
entity.name.function #bfe076 —
keyword.operator.comparison #b9a1f3 —
invalid, invalid.deprecated #e17979 —
invalid.unimplemented #e17979 —
support.variable.property #82d4c6 —
support.variable.property.dom.js #e69ee1 —
variable.function #ecedea —
variable.interpolation #82d4c6 —
meta.function-call #bfe076 —
punctuation.section.embedded #82d4c6 —
variable.assignment.coffee #82d4c6 —
variable.parameter.function.coffee #ecedea —
variable.assignment.coffee #82d4c6 —
variable.other.readwrite.cs #ecedea —
entity.name.type.class.cs, storage.type.cs #bfe076 —
entity.name.type.namespace.cs #b9a1f3 —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css #82d4c6 —
keyword.control.at-rule, keyword.control.at-rule punctuation.definition — bold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.css — bold
source.css keyword.other.unit, source.css constant.numeric #b9a1f3 —
meta.attribute-selector.css entity.other.attribute-name.attribute #82d4c6 —
support.type.property-name.css #ecedea —
meta.property-value.scss, meta.property-value.scss support.type.property-name.css #bfe076 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #bfe076 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #82d4c6 —
entity.name.tag.scss, entity.name.tag.sass #82d4c6 —
keyword.other.unit.scss, keyword.other.unit.sass #b9a1f3 —
support.function.misc.scss, support.function.misc.sass #e69ee1 —
variable.parameter.url.scss, variable.parameter.url.sass #9f9d9b italic underline
meta.directive.vue entity.other.attribute-name, meta.directive.vue punctuation.separator.key-value.html #b9a1f3 —
source.directive.vue string.unquoted.label.js #82d4c6 —
source.directive.vue variable.other.object.js #bfe076 —
expression.embedded.vue punctuation.definition #82d4c6 —
expression.embedded.vue variable.other.readwrite.js #ecedea —
expression.embedded.vue meta.property.object.js #b9a1f3 —
source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string #e69ee1 —
meta.directive.vue string.quoted.single.js #82d4c6 —
source.vue meta.tag string.quoted #ecedea —
source.vue source.directive.vue string.quoted #e69ee1 —
source.vue entity.name.tag.template.html — bold
source.vue entity.name.tag.script.html — bold
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #bfe076 —
source.elixir entity.name.function #bfe076 —
source.elixir punctuation.definition.string #e69ee1 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #bfe076 —
source.elixir .punctuation.binary.elixir #b9a1f3 —
source.go meta.function-call.go #bfe076 —
meta.class entity.name.type.class.js #bfe076 —
meta.method.declaration storage.type.js #bfe076
meta.js punctuation.definition.js #ecedea —
variable.other.meta.import.js, meta.import.js variable.other, keyword.operator.module.js #e69ee1bb —
source.js keyword.control #82d4c6 —
support.type.object.module.js #bfe07699 —
source.js keyword.control.conditional #82d4c6 —
constant.numeric.hex.js #bfe076 —
variable.parameter.function.js #e69ee1 —
variable.other.readwrite.js #ecedea —
string.quoted.double.js meta.object-literal.key #b9a1f3 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #ecedea —
meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag #ecedea —
variable.js, variable.other.js #ecedea —
entity.name.type.js, entity.name.type.module.js #bfe076 —
meta.object-literal.key.js string.quoted, meta.object-literal.key.js #b9a1f3 —
string.unquoted.label.js #b9a1f3 —
support.type.property-name.json #82d4c6 —
string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json #e69ee1 —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #82d4c6 —
variable.other.ruby #ecedea —
constant.language.symbol.hashkey.ruby #82d4c6 —
meta.embedded.line.ruby variable.other.readwrite.instance.ruby, meta.embedded.line.swift #bfe076 —
entity.name.tag.less #82d4c6 —
meta.attribute-selector.less entity.other.attribute-name.attribute #82d4c6 —
markup.heading.markdown #bfe076 —
markup.italic.markdown #82d4c6 italic
markup.bold.markdown #ecedea bold
markup.quote.markdown #e69ee1 italic
markup.inline.raw.markdown #e69ee1 —
markup.underline.link.markdown, markup.underline.link.image.markdown #e69ee1 —
string.other.link.title.markdown, string.other.link.description.markdown #ecedea —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #bfe076 —
punctuation.definition.metadata.markdown #82d4c6 —
beginning.punctuation.definition.list.markdown #b9a1f3 —
support.class.php #bfe076 —
meta.function-call.php punctuation #ecedea —
variable.other.global.php #bfe076 —
variable.other.global.php punctuation.definition.variable #bfe076 —
constant.language.python #82d4c6 —
storage.type.number.python #908e8c —
variable.parameter.function.python, meta.function-call.arguments.python #e69ee1 —
punctuation.python #ecedea —
entity.name.function.decorator.python #b5b4b1 italic
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #ecedea —
entity.name.type.ts, entity.name.type.tsx #bfe076 —
support.class.node.ts, support.class.node.tsx #bfe076 —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #ecedea —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block #ecedea —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #bfe076 —
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx #bfe076 —
entity.name.tag.yaml #82d4c6 —
comment.block.javadoc keyword.other.documentation #bfe07690 —
comment.block.javadoc entity.name.type.class #bfe07690 —
comment.block.javadoc variable.parameter #e69ee190 —
punctuation.separator #b5b4b1 —
string.quoted.double.java #bfe076 —
storage.type.generic.java #82d4c6 —
variable.other.object.java #ecedea —
meta.method-call.java entity.name.function.java #e69ee1 —
meta.class.java storage.modifier.java #b9a1f3 —
meta.class.body.java storage.modifier.java #b5b4b1 —
meta.class.body meta.method storage.modifier.java #b9a1f3 —
storage.modifier.import.java, meta.import.java storage.modifier.java #908e8c —
storage.modifier.import.java variable.language.wildcard #82d4c699 —
keyword.other.import.java #b9a1f399 —
keyword.other.package.java #e69ee1 —
meta.import.java punctuation #ecedea99 —
meta.definition.variable.java storage.type.java #e69ee1 —
storage.modifier.extends.java #9f9d9b —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.other.unit, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.control.ternary, keyword.operator.or.regexp, punctuation.definintion.string, punctuation —
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, comment — italic
token.error-token #e17979 —
token.debug-token #e69ee1 —
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 } !` ;
}
Flunky Theme | Coding Theme