Skip to main content
Dark Energy | Coding Theme
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 #000 activityBar.border #0000 activityBar.foreground #fff activityBarBadge.background #373737 activityBarBadge.foreground #fff badge.background #fff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.quoted.docstring #666 — function, entity.name.function #66ffcc — string #a8a8b1 — punctuation.definition.string, storage.type.string.python #fff — beginning.punctuation, entity.name.section.group-title, entity.name.tag, keyword.const, keyword.function, keyword.import, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.expression, keyword.operator.increment, keyword.operator.increment-decrement, keyword.operator.logical, keyword.operator.new, keyword.operator.other, keyword.other.special-method, keyword.package, keyword.type, keyword.var, markup.heading, meta.tag.sgml.doctype.html, punctuation.separator.key-value
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Dark Energy — Dark Energy
badge.foreground
#000
button.background #7d46fc
button.foreground #fff
contrastBorder #0000
diffEditor.insertedTextBackground #00ff6833
diffEditor.removedTextBackground #ff003233
dropdown.background #0a0b0f
dropdown.border #1e1d27
dropdown.foreground #fff
editor.background #222
editor.findMatchBackground #ffcc0099
editor.findMatchHighlightBackground #ffcc004c
editor.foreground #d9d9d9
editor.lineHighlightBackground #2e2e2e
editor.lineHighlightBorder #2e2e2e
editor.selectionBackground #7d46fc7f
editor.selectionForeground #000
editor.selectionHighlightBorder #7d46fc3f
editor.wordHighlightBackground #7d46fc3f
editor.wordHighlightStrongBackground #7d46fc7f
editorBracketMatch.background #7d46fc7f
editorBracketMatch.border #0000
editorCursor.foreground #7d46fc
editorError.foreground #ff0032
editorGroup.border #0a0b0f
editorGroupHeader.tabsBackground #000
editorGroupHeader.tabsBorder #0000
editorGutter.addedBackground #ffcc00E6
editorGutter.deletedBackground #ff0032
editorGutter.modifiedBackground #ffcc00E6
editorIndentGuide.background #0a0b0f
editorLineNumber.foreground #666666
editorLink.activeForeground #7d46fc
editorOverviewRuler.addedForeground #ffcc00
editorOverviewRuler.border #0000
editorOverviewRuler.bracketMatchForeground #7d46fc7f
editorOverviewRuler.errorForeground #ff0032
editorOverviewRuler.findMatchForeground #ffcc0099
editorOverviewRuler.modifiedForeground #ffcc00
editorOverviewRuler.selectionHighlightForeground #7d46fc7f
editorOverviewRuler.warningForeground #f90
editorOverviewRuler.wordHighlightForeground #7d46fc3f
editorOverviewRuler.wordHighlightStrongForeground #7d46fc7f
editorRuler.foreground #0a0b0f
editorSuggestWidget.background #0d0d0d
editorSuggestWidget.focusHighlightForeground #000
editorSuggestWidget.foreground #f2f2f2
editorSuggestWidget.highlightForeground #fff
editorSuggestWidget.selectedBackground #fff
editorSuggestWidget.selectedForeground #222
editorWarning.foreground #f90
editorWidget.background #0a0b0f
editorWidget.border #1e1d27
errorForeground #ff0032
extensionButton.prominentBackground #7d46fc
extensionButton.prominentForeground #fff
extensionButton.prominentHoverBackground #7d46fc
focusBorder #1e1d27
foreground #fff
gitDecoration.ignoredResourceForeground #2e2e37
gitDecoration.modifiedResourceForeground #fff
gitDecoration.untrackedResourceForeground #fff
input.background #0a0b0f
input.border #1e1d27
input.foreground #fff
input.placeholderForeground #2e2e37
list.activeSelectionBackground #fff
list.activeSelectionForeground #000
list.dropBackground #7d46fc7f
list.focusBackground #7d46fc3f
list.focusForeground #fff
list.highlightForeground #fff
list.hoverBackground #0a0b0f
list.inactiveSelectionBackground #0a0b0f
list.inactiveSelectionForeground #fff
minimapSlider.activeBackground #ffffff40
minimapSlider.background #ffffff40
minimapSlider.hoverBackground #ffffff40
panel.background #0a0b0f
panel.border #0000
panelTitle.activeBorder #2e2e37
peekView.border #fff
peekViewEditor.background #0000
peekViewEditor.matchHighlightBackground #ffca0099
peekViewResult.background #0000
peekViewResult.fileForeground #a8a8b1
peekViewResult.lineForeground #a8a8b1
peekViewResult.matchHighlightBackground #ffca0099
peekViewResult.selectionBackground #fff
peekViewResult.selectionForeground #000
peekViewTitle.background #0000
peekViewTitleDescription.foreground #2e2e37
peekViewTitleLabel.foreground #fff
progressBar.background #7d46fc
scrollbar.shadow #0000
scrollbarSlider.background #ffffff40
scrollbarSlider.hoverBackground #ffffff40
sideBar.background #0d0d0d
sideBar.foreground #a8a8b1
sideBarSectionHeader.background #0a0b0f
sideBarSectionHeader.foreground #a8a8b1
sideBarTitle.foreground #f2f2f2
statusBar.background #000
statusBar.foreground #a2a2a2
statusBar.noFolderBackground #000
tab.activeBackground #222
tab.activeBorder #222
tab.activeForeground #fff
tab.border #2e2e37
tab.inactiveBackground #0000
tab.inactiveForeground #a2a2a2
terminal.ansiBlack #fff
terminal.ansiBlue #004bff
terminal.ansiBrightBlack #fff
terminal.ansiBrightBlue #004bff
terminal.ansiBrightCyan #00d2ff
terminal.ansiBrightGreen #00ff68
terminal.ansiBrightMagenta #7d46fc
terminal.ansiBrightRed #ff0032
terminal.ansiBrightWhite #fff
terminal.ansiBrightYellow #ffca00
terminal.ansiCyan #00d2ff
terminal.ansiGreen #00ff68
terminal.ansiMagenta #7d46fc
terminal.ansiRed #ff0032
terminal.ansiWhite #fff
terminal.ansiYellow #ffca00
terminal.foreground #fff
terminal.selectionBackground #7d46fc7f
terminalCursor.foreground #7d46fc
textLink.activeForeground #7d46fc
textLink.foreground #7d46fc
titleBar.activeBackground #000
titleBar.activeForeground #a8a8b1
titleBar.inactiveBackground #000
titleBar.inactiveForeground #a8a8b1
welcomePage.buttonBackground #0a0b0f
welcomePage.buttonHoverBackground #7d46fc3f
widget.shadow #0000 emphasis, storage, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tag.jade, entity.other.attribute-name.tag.pug, markup.italic, variable.language — italic
entity.other.attribute-name.class, entity.other.attribute-name.id, keyword.control, storage.modifier, storage.type.class, storage.type.enum, storage.type.function, storage.type.import, storage.type.interface, storage.type.js, storage.type.namespace, storage.type.property, storage.type.string.python, storage.type.ts, keyword.operator.expression #f2f2f2 italic 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 }! ` ;
}