Eon Theme

Name: Eon Theme
Author: Mr.kumar

Publisher: Mr.kumarThemes in package: 6

A Modern & futuristic theme by Mr.kumar

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Eon Theme — Eon Theme v3

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#08081b
activityBar.background#090919
activityBar.border#000000
activityBar.foreground#ffffff
activityBar.inactiveForeground#dfeaf966
activityBarBadge.background#1e60de
activityBarBadge.foreground#ffffff
badge.background#1e60de
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#09111f
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#b3c8d9cc
button.background#025b9d
button.foreground#fbfbfb
button.hoverBackground#0f476d
button.secondaryBackground#202f43
button.secondaryForeground#d9d9d9
button.secondaryHoverBackground#334862
checkbox.background#0e1a1f
checkbox.border#1e384b72
checkbox.foreground#dedede
debugExceptionWidget.background#122736
debugExceptionWidget.border#274c73
debugToolBar.background#122736
debugToolBar.border#274c73
diffEditor.border#444444
diffEditor.insertedTextBackground#55b9b033
diffEditor.removedTextBackground#ff6a1033
dropdown.background#0e1a1f
dropdown.border#1e384b72
dropdown.foreground#dedede
editor.background#0a141d
editor.findMatchBackground#164b4d
editor.findMatchBorder#268084
editor.findMatchHighlightBackground#4288d355
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#25383d32
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#1b3c5c4d
editor.foreground#d4d4d4
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#2e343db9
editor.lineHighlightBackground#1e61641c
editor.lineHighlightBorder#2a404b00
editor.rangeHighlightBackground#9abcff18
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#16324FB5
editor.selectionHighlightBackground#3f87cf26
editor.selectionHighlightBorder#24486f
editor.wordHighlightBackground#132936b8
editor.wordHighlightBorder#ffffff00
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#16538006
editorBracketMatch.border#3c807634
editorCodeLens.foreground#999999
editorCursor.background#fbfbfbfd
editorCursor.foreground#1e60de
editorError.background#a1292300
editorError.border#ffffff00
editorError.foreground#925132
editorGroup.border#000000
editorGroup.emptyBackground#0a141d
editorGroupHeader.tabsBackground#070713
editorGroupHeader.tabsBorder#10274b
editorGutter.addedBackground#587c0c
editorGutter.background#0a141d
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0a718e
editorHoverWidget.background#12232a
editorHoverWidget.border#2a3e58
editorHoverWidget.foreground#7c96a3
editorIndentGuide.activeBackground#394749
editorIndentGuide.background#394749
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#4695cf
editorLineNumber.activeForeground#c5d3ff
editorLineNumber.foreground#596982
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#0f2823
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#0d9266
editorOverviewRuler.background#2125476c
editorOverviewRuler.border#3c5dab4d
editorRuler.foreground#465a5e
editorSuggestWidget.background#0b0b19
editorSuggestWidget.border#05232a
editorSuggestWidget.foreground#6f878a
editorSuggestWidget.highlightForeground#5e8eea
editorSuggestWidget.selectedBackground#112f43
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#9d8103
editorWhitespace.foreground#9bd9ff22
editorWidget.background#090919
editorWidget.foreground#90a0ab
editorWidget.resizeBorder#26526d
focusBorder#0d4fb6
foreground#cccccc
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#cccccc
input.background#0e1a1f
input.border#1e384b72
input.foreground#dedede
input.placeholderForeground#8e9ea3
inputOption.activeBackground#174e7366
inputOption.activeBorder#1a80c400
inputOption.activeForeground#b4b4b4
list.activeSelectionBackground#0d1d2c
list.activeSelectionForeground#ffffff
list.dropBackground#0d1d2c
list.focusBackground#111b32
list.focusForeground#a3a3a3
list.highlightForeground#0093ff
list.hoverBackground#0d1d2c
list.hoverForeground#f1f5ff
list.inactiveSelectionBackground#111b32
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#1e3756
listFilterWidget.noMatchesOutline#2865a5
listFilterWidget.outline#00000000
menu.background#0a141d
menu.border#26354185
menu.foreground#babec4
menu.selectionBackground#0d1d2c
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#393d47
menubar.selectionBackground#0d1a26
menubar.selectionBorder#000000
menubar.selectionForeground#ffffff
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#0a141d
minimap.errorHighlight#925132
minimap.findMatchHighlight#164b4d
minimap.selectionHighlight#132232b5
minimap.warningHighlight#9d8103
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0a718e
notificationCenter.border#1b3a68
notificationCenterHeader.background#0e1726
notificationCenterHeader.foreground#cccccc
notifications.background#0c1621
notifications.border#1b3a68
notifications.foreground#9fc7d3
notificationsErrorIcon.foreground#f07d66
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#284c73
panel.background#0d1921
panel.border#3594cd59
panelSection.border#467a8e59
panelTitle.activeBorder#2790cf
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#bac5de99
peekView.border#024471
peekViewEditor.background#011928
peekViewEditor.matchHighlightBackground#43301699
peekViewEditor.matchHighlightBorder#ab722793
peekViewEditorGutter.background#001f33
peekViewResult.background#090919
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#090919
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#274e8a
pickerGroup.foreground#2882ea
progressBar.background#0e70c0
scrollbar.shadow#000000
scrollbarSlider.activeBackground#244d7766
scrollbarSlider.background#15223f66
scrollbarSlider.hoverBackground#355e8240
selection.background#181f26
settings.focusedRowBackground#ffffff07
settings.headerForeground#cccccc
sideBar.background#0a141d
sideBar.border#0000005e
sideBar.dropBackground#0d1d2c
sideBar.foreground#9ea2b4
sideBarSectionHeader.background#0713247a
sideBarSectionHeader.border#cccccc33
sideBarSectionHeader.foreground#e9eeff
sideBarTitle.foreground#94949b
statusBar.background#070d1b
statusBar.border#122345b9
statusBar.debuggingBackground#0d253b
statusBar.debuggingBorder#03668c
statusBar.debuggingForeground#b6b6b6
statusBar.foreground#f2f2f2
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#0279c0
statusBar.noFolderForeground#d7d7d7
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#f5f5f52a
statusBarItem.remoteBackground#1e60de
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0f1a2c
tab.activeBorder#00000000
tab.activeBorderTop#5a161600
tab.activeForeground#ffffff
tab.border#10274b
tab.hoverForeground#30a8ff
tab.inactiveBackground#07101b
tab.inactiveForeground#e3f4ff91
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#6b7d97
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#d17d23
terminal.ansiBrightMagenta#9858ff
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#cdcdcd
terminal.ansiBrightYellow#ff7b2e
terminal.ansiCyan#11a8cd
terminal.ansiGreen#d66210
terminal.ansiMagenta#9858ff
terminal.ansiRed#cd3131
terminal.ansiWhite#ffffff
terminal.ansiYellow#d8bf30
terminal.border#467a8e59
terminal.foreground#4ec2a7
terminal.selectionBackground#203e5846
terminalCursor.background#0e3e60
terminalCursor.foreground#ffffff
textLink.foreground#0093ff
titleBar.activeBackground#070713
titleBar.activeForeground#b4b4b4
titleBar.border#34343400
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#ffffffcb
tree.indentGuidesStroke#5b616f
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#F07171	—
meta.embedded, source.groovy.embedded, meta.template.expression	#EDEDED	—
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable	#EDEDED	—
comment, punctuation.definition.comment	#4B7575	—
string, punctuation.definition.string	#65BFEC	—
constant.character.escape	#70DBA8	—
keyword, constant.language.import-export-all	#6BDD4B	—
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type	#80C3FF	—
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new	#70DBA8	—
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class	#616BFF	—
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded	#A53DFA	—
constant	#80C3FF	—
constant.numeric, constant.language	#F7FDFC	—
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust	#F7FDFC	—
punctuation, meta.brace	#ADADAD	—
variable.language.this, variable.language.special.self	#70DBA8	—
comment.block.documentation entity.name.type	#A53DFA	—
variable.language.super	#616BFF	—
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype	#ADADAD	—
entity.name.tag	#70DBA8	—
meta.tag string	#65BFEC	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#6BDD4B	—
constant.character.entity, punctuation.definition.entity	#F7FDFC	—
entity.name.section.markdown, markup.heading.setext	#6BDD4B	—
punctuation.definition.list	#6BDD4B	—
meta.separator.markdown	#6BDD4B	—
markup.inline.raw	#70DBA8	—
markup.bold	—	bold
markup.italic	—	italic
meta.link punctuation.definition.string, meta.image punctuation.definition.string	#ADADAD	—
link, markup.underline.link, constant.other.reference.link.markdown	#616BFF	—
markup.quote	#F7FDFC	—
entity.name.tag.css, entity.name.tag.wildcard	#65BFEC	—
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity	#6BDD4B	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color	#70DBA8	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#616BFF	—
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric	#65BFEC	—
meta.property-name, support.type.property-name	#F7FDFC	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#616BFF	—
variable.parameter.url	#F7FDFC	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#6BDD4B	—
entity.name.section	#616BFF	—
support.type.property-name.json	#6BDD4B	—
markup.inserted	#CB4E0B	—
markup.changed	#46A7EC	—
markup.deleted	#F07171	—
meta.diff.header	#46A7EC	—
meta.diff.range	#70DBA8	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}