Skip to main content
Home Theme VS Code aGen Theme VSCode theme: Palenight + Github tokens + medium contrast and rich colors
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.activeBorder #F806A4 activityBar.background #26252B activityBar.border #4E4E51 activityBar.foreground #ffffff activityBar.inactiveForeground #eeeeeeae activityBarBadge.background #F806A4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #d6dde5 — comment #636b94 italic string #ace673 — string.quoted #ace673 — string.unquoted
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#ffffff
badge.background #F806A4ee
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #f2f2f2
breadcrumb.background #161619
breadcrumb.focusForeground #eeeeee
breadcrumb.foreground #eeeeeebe
button.background #F806A4
button.foreground #ffffff
button.hoverBackground #F806A4ee
button.secondaryBackground #161619aa
button.secondaryForeground #eeeeee
button.secondaryHoverBackground #F806A460
checkbox.background #F806A460
checkbox.border #26252B
checkbox.foreground #f2f2f2
debugExceptionWidget.background #7681a499
debugExceptionWidget.border #454746
debugToolBar.background #26252B
debugToolBar.border #4E4E51
diffEditor.border #26252B
diffEditor.insertedTextBackground #00ff5533
diffEditor.removedTextBackground #ff000033
dropdown.background #454746
dropdown.border #454746
dropdown.foreground #f2f2f2
editor.background #161619
editor.findMatchBackground #7681a430
editor.findMatchBorder #7681a488
editor.findMatchHighlightBackground #F806A410
editor.findMatchHighlightBorder #7681a488
editor.findRangeHighlightBackground #7681a433
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #F806A426
editor.foreground #efeeee
editor.hoverHighlightBackground #F806A410
editor.inactiveSelectionBackground #7681a433
editor.lineHighlightBorder #ffffff00
editor.rangeHighlightBackground #ffffff00
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #7681a466
editor.selectionHighlightBackground #7681a433
editor.selectionHighlightBorder #7681a422
editor.wordHighlightStrongBackground #7681a422
editorBracketMatch.background #eeeeee2f
editorBracketMatch.border #ffffff00
editorBracketPairGuide.activeBackground1 #ffb86ca0
editorBracketPairGuide.activeBackground2 #ff75b5a0
editorBracketPairGuide.activeBackground3 #45a9f9a0
editorBracketPairGuide.activeBackground4 #b084eba0
editorBracketPairGuide.activeBackground5 #e6e6e6a0
editorBracketPairGuide.activeBackground6 #19f9d8a0
editorBracketPairGuide.background1 #ffb86c30
editorBracketPairGuide.background2 #ff75b530
editorBracketPairGuide.background3 #45a9f930
editorBracketPairGuide.background4 #b084eb30
editorBracketPairGuide.background5 #e6e6e630
editorBracketPairGuide.background6 #19f9d830
editorCodeLens.foreground #999999
editorCursor.background #161619
editorCursor.foreground #f2f2f2
editorError.background #ffffff00
editorError.border #ffffff00
editorError.foreground #ff4d33cc
editorGroup.border #26252B
editorGroup.emptyBackground #161619
editorGroupHeader.tabsBackground #26252B
editorGutter.addedBackground #00ff55aa
editorGutter.background #161619
editorGutter.commentRangeForeground #eeeeeee8
editorGutter.deletedBackground #ff4d33aa
editorGutter.foldingControlForeground #eeeeee
editorGutter.modifiedBackground #33f4ffaa
editorHoverWidget.background #26252B
editorHoverWidget.border #4E4E51
editorHoverWidget.foreground #eeeeee
editorIndentGuide.activeBackground1 #eeeeee2f
editorIndentGuide.background1 #eeeeee1f
editorInfo.background #ffffff00
editorInfo.border #ffffff00
editorInfo.foreground #33f4ffcc
editorInlayHint.background #525767cc
editorInlayHint.foreground #ffffffcc
editorLineNumber.activeForeground #F806A4be
editorLineNumber.foreground #7681a477
editorLink.activeForeground #F806A4ee
editorMarkerNavigation.background #161619
editorMarkerNavigationError.background #ff4d33cc
editorMarkerNavigationInfo.background #33f4ffcc
editorMarkerNavigationWarning.background #fff233cc
editorOverviewRuler.background #161619
editorOverviewRuler.border #ffffff00
editorRuler.foreground #eeeeee2f
editorSuggestWidget.background #26252B
editorSuggestWidget.border #4E4E51
editorSuggestWidget.foreground #eeeeee
editorSuggestWidget.highlightForeground #F806A4ee
editorSuggestWidget.selectedBackground #F806A460
editorWarning.background #ffffff00
editorWarning.border #ffffff00
editorWarning.foreground #fff233cc
editorWhitespace.foreground #454746
editorWidget.background #26252B
editorWidget.foreground #eeeeee
editorWidget.resizeBorder #F806A4ee
focusBorder #ffffff00
foreground #b4becf
gitDecoration.addedResourceForeground #21d94a
gitDecoration.conflictingResourceForeground #c486eb
gitDecoration.deletedResourceForeground #ff4d33cc
gitDecoration.ignoredResourceForeground #7681a4cc
gitDecoration.modifiedResourceForeground #f8b049
gitDecoration.stageDeletedResourceForeground #ff4d33cc
gitDecoration.stageModifiedResourceForeground #f8b049
gitDecoration.submoduleResourceForeground #33f4ffcc
gitDecoration.untrackedResourceForeground #21d94a
icon.foreground #eeeeee
input.background #454746
input.border #454746
input.foreground #ffffff
input.placeholderForeground #eeeeeeae
inputOption.activeBackground #F806A460
inputOption.activeBorder #F806A460
inputOption.activeForeground #ffffff
inputOption.hoverBackground #F806A430
list.activeSelectionBackground #161619
list.activeSelectionForeground #eeeeee
list.dropBackground #161619cc
list.errorForeground #ff4d33
list.focusBackground #F806A460
list.focusForeground #eeeeee
list.highlightForeground #F806A4
list.hoverBackground #16161999
list.hoverForeground #eeeeee
list.inactiveSelectionBackground #161619aa
list.inactiveSelectionForeground #eeeeee
listFilterWidget.background #F806A460
listFilterWidget.noMatchesOutline #ff4d33
listFilterWidget.outline #ffffff00
menu.background #26252B
menu.border #26252B
menu.foreground #eeeeee
menu.selectionBackground #F806A460
menu.selectionBorder #ffffff00
menu.selectionForeground #eeeeee
menu.separatorBackground #eeeeee1f
menubar.selectionBackground #eeeeee1f
menubar.selectionBorder #eeeeee1f
menubar.selectionForeground #eeeeee
merge.commonContentBackground #ffffff11
merge.commonHeaderBackground #ffffff33
merge.currentContentBackground #00ff5511
merge.currentHeaderBackground #00ff5533
merge.incomingContentBackground #0067fd11
merge.incomingHeaderBackground #0067fd33
minimap.background #161619
minimap.errorHighlight #ff220066
minimap.findMatchHighlight #7681a455
minimap.selectionHighlight #7681a499
minimap.warningHighlight #fff23366
minimapGutter.addedBackground #00ff55aa
minimapGutter.deletedBackground #ff2200
minimapGutter.modifiedBackground #33f4ffaa
notificationCenter.border #4E4E51
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #eeeeee
notifications.background #26252B
notifications.border #4E4E51
notifications.foreground #eeeeee
notificationsErrorIcon.foreground #ff4d33cc
notificationsInfoIcon.foreground #33f4ffcc
notificationsWarningIcon.foreground #fff233cc
notificationToast.border #4E4E51
panel.background #161619
panel.border #26252B
panelSection.border #7681a499
panelTitle.activeBorder #F806A4
panelTitle.activeForeground #F806A4
panelTitle.inactiveForeground #eeeeee
peekView.border #F806A460
peekViewEditor.background #26252B
peekViewEditor.matchHighlightBackground #F806A430
peekViewEditor.matchHighlightBorder #F806A430
peekViewEditorGutter.background #26252B
peekViewResult.background #26252B
peekViewResult.fileForeground #eeeeee
peekViewResult.lineForeground #eeeeee
peekViewResult.matchHighlightBackground #161619
peekViewResult.selectionBackground #F806A477
peekViewResult.selectionForeground #eeeeee
peekViewTitle.background #26252B
peekViewTitleDescription.foreground #eeeeee
peekViewTitleLabel.foreground #f2f2f2
pickerGroup.border #26252B
pickerGroup.foreground #F806A4ee
progressBar.background #F806A4
scrollbar.shadow #ffffff00
scrollbarSlider.activeBackground #f2f2f250
scrollbarSlider.background #f2f2f240
scrollbarSlider.hoverBackground #f2f2f260
selection.background #F806A460
settings.focusedRowBackground #7681a422
settings.headerForeground #f2f2f2
sideBar.background #26252B
sideBar.border #4E4E51
sideBar.dropBackground #161619
sideBar.foreground #eeeeeeae
sideBarSectionHeader.background #ffffff00
sideBarSectionHeader.border #4E4E51
sideBarSectionHeader.foreground #eeeeeeae
sideBarTitle.foreground #F806A4
statusBar.background #26252B
statusBar.border #4E4E51
statusBar.debuggingBackground #ff730070
statusBar.debuggingForeground #ffffff
statusBar.foreground #eeeeee
statusBar.noFolderBackground #26252B
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #7681a499
statusBarItem.hoverBackground #eeeeee1f
statusBarItem.remoteBackground #F806A4ee
statusBarItem.remoteForeground #ffffff
tab.activeBackground #161619
tab.activeBorder #161619
tab.activeBorderTop #161619
tab.activeForeground #eeeeee
tab.border #4E4E51
tab.inactiveBackground #26252B
tab.inactiveForeground #eeeeeeae
terminal.ansiBlack #000000
terminal.ansiBlue #0067fd
terminal.ansiBrightBlack #565a74
terminal.ansiBrightBlue #1854fd
terminal.ansiBrightCyan #33f4ff
terminal.ansiBrightGreen #00ff55
terminal.ansiBrightMagenta #ff0062
terminal.ansiBrightRed #ff4d33
terminal.ansiBrightWhite #fff8f8
terminal.ansiBrightYellow #fff233
terminal.ansiCyan #3ff3ff
terminal.ansiGreen #12ee43
terminal.ansiMagenta #f12c85
terminal.ansiRed #e63016
terminal.ansiWhite #f8eee6
terminal.ansiYellow #e8e41e
terminal.border #eeeeee2f
terminal.foreground #eeeeee
terminal.selectionBackground #7681a499
terminalCursor.background #161619
terminalCursor.foreground #eeeeee
textLink.activeForeground #F806A4
textLink.foreground #eeeeeeae
titleBar.activeBackground #26252B
titleBar.activeForeground #eeeeeeae
titleBar.border #4E4E51
titleBar.inactiveBackground #26252B99
titleBar.inactiveForeground #eeeeeeae
tree.indentGuidesStroke #eeeeee1f
walkThrough.embeddedEditorBackground #7681a450
widget.shadow #26252Bdd
#d6dde5
support.constant.math #f7c218 —
constant.numeric, constant.character.numeric #f97d51 bold
constant.language, punctuation.definition.constant, variable.other.constant #72a2ff —
constant.character, constant.other #72a2ff —
constant.character.escape #f97d51 —
string.regexp, string.regexp keyword.other #76c2bb —
meta.function punctuation.separator.comma #eeffff —
punctuation.accessor, keyword #c486eb bold
bitwise-operator #c486eb bold
storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js #c486eb bold
entity.name.class, meta.class entity.name.type.class #f7c218 bold
entity.other.inherited-class #a0be74 bold
entity.name.function #72a2ff bold
variable.parameter #6f7ee9 —
punctuation.definition.tag, meta.tag #5cd6ff —
entity.name.tag support.class.component, meta.tag.js #ff4267 —
meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag #ff4267 bold
entity.other.attribute-name #f7c218 —
entity.name.tag.custom #f7c218 —
support.function, support.constant #72a2ff —
support.constant.meta.property-value #5cd6ff —
support.type, support.class #f7c218 —
support.variable.dom #f7c218 —
invalid.deprecated #f2f2f2 —
entity.name.filename.find-in-files #f2f2f2 bold
keyword.operator.relational #c486eb —
keyword.operator.assignment #c486eb —
comment.line.double-slash #636b94 —
constant.language.null #ff4569 bold
meta.delimiter.period #c486eb —
punctuation.definition.string #b9efc1 —
constant.language.boolean #ff4569 bold
variable.parameter.function #5cd6ff —
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag #76c2bb —
meta.property-list entity.name.tag.reference #ff4267 —
constant.other.color.rgb-value punctuation.definition.constant #f97d51 —
constant.other.color #fde000 —
keyword.other.unit #fde000 —
entity.other.attribute-name.id #efca10 —
meta.property-name #76c2bb —
entity.name.tag.doctype, meta.tag.sgml.doctype #c486eb italic
punctuation.definition.parameters #b9efc1 —
keyword.control.operator #5cd6ff —
keyword.operator.logical #c486eb —
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance #ff4267 —
variable.other.property, variable.other.object.property #5cd6ff bold
entity.name.function #72a2ff —
keyword.operator.comparison #c486eb —
support.constant, keyword.other.special-method, keyword.other.new #5cd6ff —
invalid.unimplemented #f2f2f2 —
variable.language #ff4267 —
support.variable.property #5cd6ff —
variable.function #72a2ff —
variable.interpolation #ee4d58 —
meta.function-call #72a2ff —
punctuation.section.embedded #cc3c37 —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #d6dde5 —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #b9efc1 —
string.template meta.template.expression #cc3c37 —
string.template punctuation.definition.string #d6dde5 bold
variable.assignment.coffee #5cd6ff —
variable.parameter.function.coffee #d6dde5 —
variable.assignment.coffee #5cd6ff —
variable.other.readwrite.cs #d6dde5 —
entity.name.type.class.cs, storage.type.cs #72a2ff —
entity.name.type.namespace.cs #a8c2cc —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css #ff4267 bold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #ff4267 —
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass #fde000 —
meta.attribute-selector.css entity.other.attribute-name.attribute #f97d51 —
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma #d6dde5 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #72a2ff —
source.elixir entity.name.function #f7c218 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #72a2ff —
source.elixir punctuation.definition.string #a0be74 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #f7c218 —
source.elixir .punctuation.binary.elixir #c486eb —
source.go meta.function-call.go #d2d2d2 —
entity.other.attribute-name.id.html #f7c218 —
punctuation.definition.tag.html #5cd6ff —
meta.tag.sgml.doctype.html #c486eb italic
meta.class entity.name.type.class.js #ffbe5c —
meta.method.declaration storage.type.js #72a2ff —
meta.js punctuation.definition.js #d6dde5 —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #eeffff —
variable.other.jsdoc, variable.other.phpdoc #60c4eb —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #d6dde5 —
variable.parameter.function.js #6f7ee9 —
variable.other.readwrite.js #d6dde5 —
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #d6dde5 —
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx #d6dde5 —
variable.js, variable.other.js #d6dde5 —
entity.name.type.js, entity.name.type.module.js #ffbe5c bold
support.type.property-name.json #ace673 bold
support.constant.json #f7c218 —
meta.structure.dictionary.value.json string.quoted.double #76c2bb bold
string.quoted.double.json punctuation.definition.string.json #76c2bb bold
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #ff4569 —
variable.other.ruby #d6dde5 —
constant.language.symbol.hashkey.ruby #5cd6ff —
entity.name.tag.less #ff4267 bold
meta.attribute-selector.less entity.other.attribute-name.attribute #f97d51 bold
markup.heading #70a9ff bold
markup.italic #c486eb italic
markup.quote #636b94 italic
markup.inline.raw #76c2bb —
markup.underline.link, markup.underline.link.image #ff778f —
markup.meta.attribute-list #a0be74 —
markup.list.bullet #b9efc1 —
markup.superscript, markup.subscript — italic
string.other.link.title.markdown, string.other.link.description.markdown #d6dde5 —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #70a9ff —
punctuation.definition.metadata.markdown #ff4267 —
beginning.punctuation.definition.list.markdown #70a9ff —
entity.name.function.asciidoc #f97d51 —
variable.other.php #b3bcce —
support.class.php #ffbe5c —
meta.function-call.php punctuation #d6dde5 —
variable.other.global.php #f7c218 —
variable.other.global.php punctuation.definition.variable #f7c218 —
constant.language.python #ff4569 bold
variable.parameter.function.python, meta.function-call.arguments.python #6f7ee9 —
meta.function-call.python, meta.function-call.generic.python #a8c2cc bold
punctuation.python #d6dde5 —
entity.name.function.decorator.python #f7c218 —
source.python variable.language.special #7fa4e3 bold
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #d2d2d2 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #72a2ff —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #b3bcce —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #f97d51 —
entity.name.tag.scss, entity.name.tag.sass #ff4267 —
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 #d6dde5 bold
entity.name.type.ts, entity.name.type.tsx #60c4eb —
support.class.node.ts, support.class.node.tsx #72a2ff —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #eeffff —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #d6dde5 —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #72a2ff —
meta.tag.js meta.jsx.children.tsx #72a2ff —
entity.name.tag.yaml #5cd6ff bold
variable.parameter.handlebars #b3bcce —
entity.other.attribute-name.handlebars variable.parameter.handlebars #f7c218 —
entity.other.attribute-name.handlebars #5cd6ff —
entity.other.attribute-value.handlebars variable.parameter.handlebars #6f7ee9 —
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, 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.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuation — —
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*
aGen Theme | 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 } ! ` ;
}