Skip to main content
Home Theme VS Code Acheron A 'neo-retro' utilitarian theme with a focus on legibility and minimal distraction.
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 #cdd3d3 activityBar.border #c7cece activityBar.foreground #2f4146 activityBarBadge.background #f1d28e activityBarBadge.foreground #353535 badge.background #ebc36b tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.tag.localname.xml #a31515 entity.other.attribute-name.localname.xml #f73d06 meta.tag.xml #0000ff string.quoted.double.xml #0000ff punctuation.definition.tag.xml
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.background
#ebc36b
button.foreground #414141
debugConsole.infoForeground #333333
descriptionForeground #020202
dropdown.background #ffffff
dropdown.border #030405
dropdown.foreground #292929
dropdown.listBackground #ffffff
editor.background #edf1f1
editor.findMatchBackground #9bcad2
editor.findMatchHighlightBackground #ebc36bb6
editor.foreground #212427
editor.lineHighlightBorder #ff000000
editor.rangeHighlightBackground #ebc36bb9
editor.selectionBackground #0099ff23
editor.selectionForeground #eeff00
editor.snippetTabstopHighlightBackground #edf2f3
editor.stackFrameHighlightBackground #91c29379
editor.wordHighlightBackground #e2e2e2b7
editorBracketHighlight.foreground1 #212427
editorBracketHighlight.foreground2 #212427
editorBracketHighlight.foreground3 #837569
editorBracketHighlight.foreground4 #698b55
editorBracketHighlight.foreground5 #976b41
editorBracketHighlight.foreground6 #896ea5
editorGroup.border #c7cccc
editorGroupHeader.tabsBackground #dfe4e4
editorHoverWidget.background #ebc36b
editorHoverWidget.border #d1b200
editorHoverWidget.foreground #353535
editorLineNumber.activeForeground #e99f00
editorLineNumber.foreground #b4b4b4
editorMarkerNavigationInfo.background #77afd4
editorSuggestWidget.focusHighlightForeground #198558
editorSuggestWidget.highlightForeground #3367c9
editorSuggestWidget.selectedBackground #e9c371
editorSuggestWidget.selectedForeground #000000
editorSuggestWidget.selectedIconForeground #000000
editorWidget.background #f8d588
editorWidget.border #c7cece
focusBorder #7f8591
icon.foreground #000000
list.activeSelectionBackground #eec66e
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #000000
list.dropBackground #7f859186
list.errorForeground #ec4300
list.focusAndSelectionOutline #e9b714
list.focusOutline #7f8591
list.highlightForeground #4d853c
list.hoverBackground #edf1f1
list.hoverForeground #000000
list.inactiveSelectionBackground #9ea4af33
list.inactiveSelectionForeground #333333
list.inactiveSelectionIconForeground #333333
list.warningForeground #b68601
menu.background #f8d78f
menu.selectionBackground #dfba6c
menu.selectionForeground #ffffff
menu.separatorBackground #d8b976
menubar.selectionForeground #333333
panel.background #dfe4e4
panel.border #c7cccc
panelInput.border #7f8591
panelSection.dropBackground #7f8591
panelTitle.activeBorder #7f8591
panelTitle.activeForeground #333333
peekView.border #7f859133
peekViewEditor.background #e9f6f8
peekViewEditor.matchHighlightBackground #ebc36b
peekViewEditorGutter.background #eeeeee
peekViewResult.background #7f859133
peekViewResult.lineForeground #000000
peekViewResult.matchHighlightBackground #ebc36b
peekViewResult.selectionBackground #7f859133
peekViewTitle.background #90c3e6
peekViewTitleDescription.foreground #333333
peekViewTitleLabel.foreground #333333
pickerGroup.border #d8b976
pickerGroup.foreground #1f1f1f
quickInput.foreground #181818
quickInputList.focusBackground #ddb04d
quickInputList.focusForeground #f8f8f8
quickInputList.focusIconForeground #ffffff
scmGraph.historyItemHoverLabelForeground #ffffff
scmGraph.historyItemRemoteRefColor #0cb87f
searchEditor.findMatchBackground #ebc36b
sideBar.background #dfe4e4
sideBar.border #c7cccc
sideBar.foreground #363636
sideBarSectionHeader.background #cdd3d3
sideBarSectionHeader.foreground #4b4b4b
statusBar.background #71818d
statusBar.debuggingBackground #718f60
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #71818d
statusBar.noFolderForeground #ffffff
statusBarItem.hoverBackground #6cadd8
statusBarItem.hoverForeground #f5f5f5
statusBarItem.remoteBackground #eec66e
statusBarItem.remoteForeground #333333
statusBarItem.remoteHoverBackground #ffdb98
statusBarItem.remoteHoverForeground #000000
tab.activeBackground #edf1f1
tab.activeBorderTop #f5cd77
tab.border #b9b9b9
tab.hoverBackground #F8D68E
tab.inactiveBackground #dfe4e4
tab.inactiveForeground #333333
terminal.ansiBrightBlack #c7c7c7
terminal.ansiBrightBlue #4296ce
terminal.ansiBrightCyan #f7e4a6
terminal.ansiBrightRed #ff8f8f
terminal.ansiBrightWhite #ffffff
terminal.ansiGreen #35da0c
terminal.ansiWhite #ebebeb
terminal.background #5c5c5c
terminal.foreground #dda900
terminal.selectionForeground #00c3ff
testing.iconPassed #05b413
textLink.foreground #414141
titleBar.activeBackground #c7cece
titleBar.inactiveBackground #c7cece
toolbar.hoverBackground #ffe3a8 #000000
entity.other.attribute-name.namespace.xml #22970d
punctuation.separator.namespace.xml #000000
punctuation.definition.tag.xml #0000ff
keyword.control.razor.directive #03a5f0 —
keyword.other.using.cs #03a5f0 —
keyword.control.razor.directive.inject #03a5f0 —
keyword.control.razor.directive.layout #03a5f0 —
keyword.control.razor.directive.section #03a5f0 —
keyword.control.razor.directive.inherits #03a5f0 —
keyword.control.razor.directive.implements #03a5f0 —
keyword.control.razor.directive.attribute #03a5f0 —
keyword.control.razor.directive.functions #03a5f0 —
keyword.control.cshtml.transition #03a5f0 —
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file #a2bffc —
markup.deleted.diff #EF535090 —
markup.inserted.diff #4876d6ff —
string.quoted, variable.other.readwrite.js #df7e00 —
support.constant.math #4876d6 —
constant.numeric, constant.character.numeric #DF7E00
constant.language, punctuation.definition.constant, variable.other.constant #4876d6 —
constant.character, constant.other #4876d6 —
constant.character.escape #aa0982 —
string.regexp, string.regexp keyword.other #5ca7e4 —
meta.function punctuation.separator.comma #5f7e97 —
punctuation.accessor, keyword #c34c4c —
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx #994cc3 —
storage.type.function.arrow.js —
entity.name.class, meta.class entity.name.type.class #111111 —
entity.other.inherited-class #4876d6 —
entity.name.function #994cc3 —
punctuation.definition.tag, meta.tag #994cc3 —
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html #994cc3 —
entity.other.attribute-name #4876d6 —
entity.name.tag.custom #4876d6 —
support.function, support.constant #4876d6 —
support.constant.meta.property-value #0c969b —
support.type, support.class #242424 —
support.variable.dom #4876d6 —
invalid.deprecated #d3423e —
keyword.operator.relational #994cc3 —
keyword.operator.assignment #994cc3 —
keyword.operator.arithmetic #994cc3 —
keyword.operator.bitwise #994cc3 —
keyword.operator.increment #994cc3 —
keyword.operator.ternary #994cc3 —
comment.line.double-slash #939dbb —
constant.language.null #bc5454 —
meta.delimiter.period #994cc3 —
punctuation.definition.string #111111 —
punctuation.definition.string.begin.markdown #bc5454 —
constant.language.boolean #bc5454 —
variable.parameter.function #0c969b
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag #0c969b
meta.property-list entity.name.tag.reference #57eaf1 —
constant.other.color.rgb-value punctuation.definition.constant #aa0982 —
constant.other.color #aa0982 —
keyword.other.unit #222222 —
entity.other.attribute-name.id #aa0982 —
meta.property-name #0c969b —
entity.name.tag.doctype, meta.tag.sgml.doctype #994cc3 —
punctuation.definition.parameters #111111 —
keyword.control.operator #0c969b —
keyword.operator.logical #994cc3
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property #3d3d3d —
variable.other.object.property #333333 —
variable.other.object.js —
entity.name.function #4876d6 —
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #994cc3 —
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts #994cc3
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control #0c969b —
invalid.unimplemented #8BD649 —
variable.language #0c969b —
support.variable.property #0c969b —
variable.function #4876d6 —
variable.interpolation #ec5f67 —
meta.function-call #4876d6 —
punctuation.section.embedded #d3423e —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #403f53 —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #111111 —
string.template meta.template.expression #d3423e —
string.template punctuation.definition.string #403f53 —
variable.assignment.coffee #31e1eb —
variable.parameter.function.coffee #403f53 —
variable.assignment.coffee #0c969b —
variable.other.readwrite.cs #403f53 —
entity.name.type.class.cs, storage.type.cs #4876d6 —
entity.name.type.namespace.cs #0c969b —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css #c96765
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #0c969b —
keyword.other.unit.css #4876d6 —
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js #aa0982 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #4876d6 —
source.elixir entity.name.function #4876d6 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #4876d6 —
source.elixir punctuation.definition.string #4876d6 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #4876d6 —
source.elixir .punctuation.binary.elixir #994cc3 —
constant.keyword.clojure #0c969b —
source.go meta.function-call.go #0c969b —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go #994cc3 —
source.go constant.language.go, source.go constant.other.placeholder.go #bc5454 —
entity.name.function.operator.member.cpp #212427 —
entity.name.function.preprocessor.cpp, entity.scope.name.cpp #0c969bff —
punctuation.accessor, entity.name.function.member.cpp #00b1b8 —
meta.namespace-block.cpp #212427 —
storage.type.language.primitive.cpp #bc5454 —
meta.preprocessor.macro.cpp #212427 —
variable.parameter #212427 —
punctuation.accessor, variable.other.object.access.cpp #212427 —
keyword.control.if.cpp #d034ff —
variable.other.local.cpp #212427 —
keyword.control.directive.include.cpp #6e6e6e —
storage.type.modifier.access.control.public.cpp #212427 —
variable.other.readwrite.powershell #4876d6 —
support.function.powershell #0c969bff —
entity.other.attribute-name.id.html #4876d6 —
punctuation.definition.tag.html #994cc3 —
meta.tag.sgml.doctype.html #994cc3 —
meta.class entity.name.type.class.js #111111 —
meta.method.declaration storage.type.js #4876d6 —
meta.js punctuation.definition.js #403f53 —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #5f7e97 —
variable.other.jsdoc, variable.other.phpdoc #78ccf0 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #403f53 —
variable.parameter.function.js #7986E7 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #403f53 —
variable.js, variable.other.js #403f53 —
entity.name.type.js, entity.name.type.module.js #111111
support.type.property-name.json #0c969b —
support.constant.json #4876d6 —
meta.structure.dictionary.value.json string.quoted.double #aa44be —
string.quoted.double.json punctuation.definition.string.json #0c969b —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #bc5454 —
variable.other.object.js #0c969b —
variable.other.ruby #403f53 —
entity.name.type.class.ruby #c96765 —
constant.language.symbol.hashkey.ruby #0c969b —
constant.language.symbol.ruby #0c969b —
entity.name.tag.less #994cc3 —
keyword.other.unit.css #0c969b —
meta.attribute-selector.less entity.other.attribute-name.attribute #aa0982 —
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #4876d6 —
markup.italic.markdown #994cc3 italic
markup.bold.markdown #4876d6 bold
markup.quote.markdown #697098 —
markup.inline.raw.markdown #0c969b —
markup.underline.link.markdown, markup.underline.link.image.markdown #ff869a —
string.other.link.title.markdown, string.other.link.description.markdown #403f53 —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #4876d6 —
punctuation.definition.metadata.markdown #0c969b —
beginning.punctuation.definition.list.markdown #4876d6 —
markup.inline.raw.string.markdown #4876d6 —
variable.other.php, variable.other.property.php #111111 —
support.class.php #111111 —
meta.function-call.php punctuation #403f53 —
variable.other.global.php #4876d6 —
variable.other.global.php punctuation.definition.variable #4876d6 —
constant.language.python #bc5454 —
variable.parameter.function.python, meta.function-call.arguments.python #4876d6 —
meta.function-call.python, meta.function-call.generic.python #0c969b —
punctuation.python #403f53 —
entity.name.function.decorator.python #4876d6 —
source.python variable.language.special #aa0982 —
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #4876d6 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #4876d6 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #111111 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #aa0982 —
entity.name.tag.scss, entity.name.tag.sass #0c969b —
keyword.other.unit.scss, keyword.other.unit.sass #994cc3 —
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 #403f53 —
entity.name.type.ts, entity.name.type.tsx #111111 —
support.class.node.ts, support.class.node.tsx #4876d6 —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #5f7e97 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #403f53 —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #4876d6 —
meta.tag.js meta.jsx.children.tsx #4876d6 —
entity.name.tag.yaml #111111 —
variable.other.readwrite.js, variable.parameter #403f53 —
support.class.component.js, support.class.component.tsx #aa0982
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #403f53 —
meta.class entity.name.type.class.tsx #111111 —
entity.name.type.tsx, entity.name.type.module.tsx #111111 —
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx #C792EA —
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx #4876d6 —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted —
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
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*
Button.tsx
fetchUser
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 } ! ` ;
}
Acheron | Coding Theme