Skip to main content
Home Theme VS Code Ax&Stuff Syntax A visual studio code color scheme optimized for identify language elements.
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 #222629 activityBar.border #1a1d1f activityBar.foreground #fff activityBarBadge.background #00D4FF activityBarBadge.foreground #000 badge.background #00D4FF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #737e7e italic variable, string constant.other.placeholder #EEFFFF — constant.other.color #ffffff — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Ax&Stuff Syntax — A&Stuff Syntax
badge.foreground
#000
button.background #0088ff
button.foreground #fff
button.hoverBackground #00D4FF
contrastActiveBorder #ffffff00
contrastBorder #ffffff00
debugExceptionWidget.background #1a1d1f
debugExceptionWidget.border #aaa
debugToolBar.background #1a1d1f
descriptionForeground #aaa
diffEditor.insertedTextBackground #3ad90033
diffEditor.insertedTextBorder #3ad90055
diffEditor.removedTextBackground #ee3a4333
diffEditor.removedTextBorder #ee3a4355
editor.background #1a1d1f
editor.foreground #eeeeee
editor.wordHighlightBackground #ffffff21
editorBracketMatch.background #1a1d1f
editorBracketMatch.border #ffc60080
editorCodeLens.foreground #aaa
editorCursor.foreground #ffc600
editorError.border #1a1d1f
editorError.foreground #A22929
editorMarkerNavigation.background #3B536433
editorMarkerNavigationError.background #A22929
editorMarkerNavigationWarning.background #ffc600
menu.background #1a1d1f
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #185294
merge.incomingHeaderBackground #185294
panel.background #000000
panel.border #00D4FF
panelTitle.activeBorder #00D4FF
panelTitle.activeForeground #00D4FF
panelTitle.inactiveForeground #ffffff
sideBar.background #1a1d1f
sideBar.border #122738
sideBar.foreground #aaa
sideBarSectionHeader.background #193549
sideBarSectionHeader.foreground #aaaaaa
sideBarTitle.foreground #aaaaaa
statusBar.background #1a1d1f
statusBar.border #1a1d1f
statusBar.debuggingBackground #1a1d1f
statusBar.debuggingBorder #ffc600
statusBar.debuggingForeground #ffc600
statusBar.foreground #aaa
statusBar.noFolderBackground #1a1d1f
statusBar.noFolderBorder #1a1d1f
statusBar.noFolderForeground #aaa
statusBarItem.activeBackground #c942ce
statusBarItem.hoverBackground #1a1d1f
statusBarItem.prominentBackground #15232d
statusBarItem.prominentHoverBackground #1a1d1f
tab.activeBackground #1a1d1f
tab.activeBorder #ffc600
tab.activeForeground #fff
tab.border #15232D
tab.inactiveBackground #0e1011
tab.inactiveForeground #aaa
tab.unfocusedActiveForeground #aaa
tab.unfocusedInactiveForeground #aaa
titleBar.activeBackground #1a1d1f
titleBar.inactiveBackground #1a1d1f keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #5dca94 bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #b671f7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #47b7d3 —
meta.block variable.other #f07178 —
support.other.variable, string.other.link #f07178 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #9176f5 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #e6b448 —
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #92d374 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #B2CCD6 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF5370 italic
entity.name.method.js #82AAFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #82AAFF —
entity.other.attribute-name #d692ea italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx #4aa778 bold
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #ff9a6b italic
entity.other.attribute-name.class #FFCB6B —
source.sass keyword.control #82AAFF —
constant.character.escape #89DDFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #FF55FF italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
source.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #d4e280 —
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 #F78C6C —
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 #FF5370 —
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 #C17E70 —
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 #82AAFF —
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 #f07178 —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #C792EA —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #C3E88D —
markup.italic #f07178 italic
markup.bold, markup.bold string #f07178 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #f07178 bold
markup.underline #F78C6C underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #82AAFF —
string.other.link.description.title.markdown #C792EA —
constant.other.reference.link.markdown #FFCB6B —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
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 } ! ` ;
}
Ax&Stuff Syntax | Coding Theme