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 v4.1

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#0f1a2c
activityBar.background#08121a
activityBar.border#05090e
activityBar.foreground#EEFFFF
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#E5E6EB
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#083886
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#0b28507a
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#0a63bd
settings.focusedRowBackground#ffffff07
settings.headerForeground#cccccc
sideBar.background#0a141d
sideBar.border#0000005e
sideBar.dropBackground#0d1d2c
sideBar.foreground#9ea2b4
sideBarSectionHeader.background#0b28507a
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
comment, punctuation.definition.comment	#4A5C64	italic
variable, string constant.other.placeholder	#B3D1D1	—
constant.other.color	#E5E5E5	—
invalid, invalid.illegal	#E04F63	—
keyword, storage.type, storage.modifier	#A2A0D3	—
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	#7FCAF5	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#1FE1A0	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#1FD0E6	—
meta.block variable.other	#1FE1A0	—
support.other.variable, string.other.link	#1FE1A0	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#E06C5F	—
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	#bada7a	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#F3C17E	—
support.type	#AAB8C2	—
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	#AAB8C2	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E04F63	—
variable.language	#E04F63	italic
entity.name.method.js	#74A8E6	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#74A8E6	—
entity.other.attribute-name	#A2A0D3	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#F3C17E	italic
entity.other.attribute-name.class	#1C9884	—
source.sass keyword.control	#74A8E6	—
markup.inserted	#bada7a	—
markup.deleted	#E04F63	—
markup.changed	#A2A0D3	—
string.regexp	#7FCAF5	—
constant.character.escape	#7FCAF5	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#74A8E6	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E04F63	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#A2A0D3	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F3C17E	—
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	#E06C5F	—
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	#E04F63	—
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	#B2A65E	—
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	#74A8E6	—
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	#1FE1A0	—
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	#A2A0D3	—
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	#bada7a	—
text.html.markdown, punctuation.definition.list_item.markdown	#B3D1D1	—
text.html.markdown markup.inline.raw.markdown	#A2A0D3	—
text.html.markdown markup.inline.raw.markdown	#7FCAF5	—
text	#E5E5E5	—

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