Skip to main content
Home Theme VS Code Vuesual Vuesual is component level colorized theme to improve coding and help you see well.
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 #19191f activityBar.foreground #41414e activityBarBadge.background #23EBD0 activityBarBadge.foreground #19191f badge.background #282c34 button.background #404754 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.constant.edge #d55fdeff — constant.other.character-class.regexp #e06c75ff — keyword.operator.quantifier.regexp #d19a66ff — punctuation.definition.string.begin,punctuation.definition.string.end #98c378 — variable.parameter.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
debugToolBar.background
#21252b
diffEditor.insertedTextBackground #00809b33
dropdown.background #1d1f23
dropdown.border #181a1f
editor.background #19191f
editor.findMatchBackground #23EBD0
editor.findMatchBorder #457dff
editor.findMatchHighlightBackground #314365
editor.lineHighlightBackground #1c1c23
editor.selectionBackground #3D0863
editor.selectionHighlightBackground #059c56fe
editor.selectionHighlightBorder #dddddd
editor.wordHighlightBackground #484e5b
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #aab1c026
editor.wordHighlightStrongBorder #7f848e
editorActiveLineNumber.foreground #737984
editorBracketMatch.background #515a6b
editorBracketMatch.border #8146FE
editorCursor.background #FFCC00
editorCursor.foreground #FFCC00
editorError.foreground #c24038
editorGroup.background #19191f
editorGroup.border #5a77c0
editorGroupHeader.tabsBackground #19191f
editorHoverWidget.background #21252b
editorHoverWidget.border #181a1f
editorIndentGuide.activeBackground #c8c8c859
editorIndentGuide.background #ffffff
editorLineNumber.foreground #495162
editorMarkerNavigation.background #21252b
editorRuler.foreground #aab1c026
editorSuggestWidget.background #21252b
editorSuggestWidget.border #181a1f
editorSuggestWidget.selectedBackground #2c313a
editorWhitespace.foreground #252525
editorWidget.background #19191f
focusBorder #21252b
input.background #19191f
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.focusBackground #8146FE
list.focusForeground #ffffff
list.highlightForeground #FFCC00
list.hoverBackground #F03A52
list.inactiveSelectionBackground #2c2c2e
list.inactiveSelectionForeground #ffffff
peekViewEditor.matchHighlightBackground #29244b
scrollbar.shadow #19191f
scrollbarSlider.activeBackground #19191f83
scrollbarSlider.background #8146FE52
scrollbarSlider.hoverBackground #23EBD0
sideBar.background #19191f
sideBarSectionHeader.background #15151a
statusBar.background #19191f
statusBar.debuggingBackground #7e0097
statusBar.debuggingBorder #66017a
statusBar.debuggingForeground #ffffff
statusBar.foreground #8146FE
statusBar.noFolderBackground #21252b
statusBarItem.hoverBackground #2c313a
tab.activeBackground #23EBD0
tab.activeForeground #19191f
tab.border #242629
tab.hoverBackground #1cc4ae
tab.inactiveBackground #19191f
tab.inactiveForeground #9929e4
tab.unfocusedHoverBackground #315ba5
terminal.ansiBlack #2d3139
terminal.ansiBlue #2e8ccf
terminal.ansiGreen #23EBD0
terminal.ansiYellow #b4881d
terminal.foreground #c8c8c8
titleBar.activeBackground #282c34
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #3d3de0
titleBar.inactiveForeground #8146FE comment, punctuation.definition.comment #ffcc0038 italic
comment markup.link #5C6370 —
markup.changed.diff #e0c285 —
meta.diff.header.from-file,punctuation.definition.from-file.diff #569cd6 —
markup.inserted.diff #89CA78 —
markup.deleted.diff #EF596F —
keyword.control.cpp #e5c07b —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #AAB1C0 —
punctuation.separator.key-value #bbbbbb —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
keyword.operator.expression.import #52ADF2 —
support.constant.math #e5c07b —
support.constant.property.math #d19a66 —
variable.other.constant #e5c07b —
storage.type.annotation.java #e5c07bff —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java #AAB1C0 —
storage.modifier.import.java,storage.type.java #e5c07b —
meta.definition.variable.name.java #EF596F —
keyword.operator.logical #2BBAC5 —
keyword.operator.bitwise #2BBAC5 —
support.constant.property-value.scss,support.constant.property-value.css #D8985F —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #D8985F —
punctuation.separator.list.comma.css #b9c0ca —
support.constant.color.w3c-standard-color-name.css #D8985F —
support.type.vendored.property-name.css #2BBAC5 —
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end #EF596F —
support.module.node,support.type.object.module #e5c07b —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #EF596F —
comment.line.double-slash,comment.block.documentation #ffcc0036 italic
support.constant.json #D8985F —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional #D55FDE —
support.type.object.console #EF596F —
support.variable.property.process #D8985F —
entity.name.function,support.function.console #52ADF2 —
support.type.object.dom #2BBAC5 —
support.variable.dom,support.variable.property.dom #EF596F —
keyword.operator.arithmetic,keyword.operator.comparison #2BBAC5 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.bitwise.shift.c #D55FDEff —
punctuation.separator.delimiter.c #bbbbbb —
support.type.posix-reserved.c #57adb8 —
keyword.operator.sizeof.c #C178DD —
variable.parameter.function.language.python #D8985F —
support.type.python #2BBAC5 —
keyword.operator.logical.python #D55FDE —
meta.function-call.arguments.python #E06C60 —
meta.function-call.python #E06C60 —
variable.parameter.function.python #D18C4E —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python #AAB1C0 —
meta.function-call.generic.python #52ADF2 —
constant.character.format.placeholder.other.python #98c379 —
token.variable.parameter.java #AAB1C0 —
import.storage.java #e5c07b —
token.package.keyword #D55FDE —
entity.name.function, meta.require, support.function.any-method #52ADF2 —
entity.name.type.namespace #e5c07b —
support.class, entity.name.type.class #e5c07b —
entity.name.class.identifier.namespace.type #e5c07b —
entity.name.class, variable.other.class #e5c07b —
variable.other.class.php #ef596fff —
control.elements, keyword.operator.less #D8985F —
keyword.other.special-method #52ADF2 —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #D55FDE —
token.storage.type.java #e5c07b —
support.type.property-name #AAB1C0 —
support.constant.property-value #AAB1C0 —
support.constant.font-name #D8985F —
meta.tag.block.any.html #FFCC00 —
string, entity.other.inherited-class #89CA78 —
constant.other.symbol #2BBAC5 —
punctuation.definition.constant #D8985F —
entity.name.tag.block.any.html, entity.name.tag.inline.any.html, meta.tag.inline.any.html #EF596F —
entity.other.attribute-name.id #52ADF2 normal
entity.other.attribute-name.class.css #D8985F normal
markup.heading #EF596F bold
markup.heading punctuation.definition.heading, entity.name.section #52ADF2 —
keyword.other.unit #d8985fff —
markup.bold,todo.bold #D8985F bold
punctuation.definition.bold #e5c07b —
markup.italic,punctuation.definition.italic,todo.emphasis #D55FDE —
entity.name.section.markdown #EF596F —
punctuation.definition.heading.markdown #EF596F —
markup.heading.setext #AAB1C0 —
punctuation.definition.bold.markdown #D8985F —
markup.inline.raw.markdown #89CA78 —
markup.inline.raw.string.markdown #98c379 —
beginning.punctuation.definition.list.markdown #EF596F —
markup.quote.markdown #e0c28583 italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown #AAB1C0 —
punctuation.definition.metadata.markdown #D55FDE —
markup.underline.link.markdown,markup.underline.link.image.markdown #D55FDE —
string.other.link.title.markdown,string.other.link.description.markdown #52ADF2 —
markup.italic.markdown — italic
markup.bold.markdown — bold
constant.character.escape #57B6C2 —
punctuation.section.embedded, variable.interpolation #BE4F44 —
invalid.deprecated #FFFFFF —
invalid.unimplemented #FFFFFF —
source.json meta.structure.dictionary.json > string.quoted.json #EF596F —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #EF596F —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #89CA78 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #2BBAC5 —
support.type.property-name.json #EF596F —
support.type.property-name.json punctuation #EF596F —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #C679DD —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #C679DD —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #e5c07b —
keyword.operator.error-control.php #D55FDE —
keyword.operator.type.php #D55FDE —
punctuation.section.array.begin.php #AAB1C0 —
punctuation.section.array.end.php #AAB1C0 —
invalid.illegal.non-null-typehinted.php #ff0000 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #e5c07b —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #52ADF2 —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #bbbbbb —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #D8985F —
entity.name.goto-label.php,support.other.php #52ADF2 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #2BBAC5 —
keyword.operator.regexp.php #D55FDE —
keyword.operator.comparison.php #2BBAC5 —
punctuation.definition.variable.php #EF596F —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #D55FDE —
meta.function.decorator.python #52ADF2 —
support.token.decorator.python,meta.function.decorator.identifier.python #2BBAC5 —
function.parameter #D8985F —
function.parameter #AAB1C0 —
function.parameter.ruby, function.parameter.cs #AAB1C0 —
inline-color-decoration rgb-value #D8985F —
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx #e5c07b italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #e5c07b —
block.scope.end,block.scope.begin #AAB1C0 —
storage.type.cs #e5c07bff —
entity.name.variable.local.cs #EF596F —
token.error-token #f44747 —
token.debug-token #b267e6 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #D55FDE —
meta.template.expression #aab1c0 —
keyword.operator.assignment.go, keyword.operator.address.go #e5c07bff —
support.type.prelude.elm #2bbac5ff —
support.constant.elm #d8985fff —
punctuation.quasi.element #D55FDE —
constant.character.entity #EF596F —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56B6C2 —
text.html.vue-html, meta.tag.other.html text.html.vue, entity.name.tag.style.html, entity.name.tag.other.html, entity.name.tag.template.html #8146FE —
entity.other.attribute - name.html, meta.directive.vue, text.html.vue - html #23EBD0 —
string.quoted.double.html, meta.tag.block.any.html #7e7e7e —
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*
Vuesual | Coding Theme 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 } !` ;
}