Skip to main content
Home Theme VS Code Cosmic Nights A modern dark theme with cosmic vibes featuring dark blue, purple, emerald green, pink, and sky blue 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 #8b5cf6 activityBar.background #1e293b activityBar.border #3e4e6e activityBar.foreground #94a3b8 activityBarBadge.background #8b5cf6 activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #64748b — string, string.quoted #10b981 — constant.numeric, constant.language, constant.character, constant.other, keyword.other.unit #d593ed — keyword, storage.type, storage.modifier, entity.name.tag, punctuation.definition.tag #8b5cf6 — entity.name.function, support.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Cosmic Nights — Cosmic Nights
breadcrumb.activeSelectionForeground
#8b5cf6
breadcrumb.focusForeground #f1f5f9
breadcrumbPicker.background #1e293b
button.background #8b5cf6
button.foreground #ffffff
button.hoverBackground #7c3aed
charts.foreground #e2e8f0
charts.lines #3e4e6e
commandCenter.activeBackground #3e4e6e
commandCenter.activeBorder #8b5cf6
commandCenter.activeForeground #f1f5f9
commandCenter.background #1e293b
commandCenter.border #3e4e6e
commandCenter.foreground #94a3b8
debugExceptionWidget.border #ef4444
debugToolBar.border #3e4e6e
diffEditor.border #3e4e6e
diffEditor.insertedTextBorder #10b981
diffEditor.removedTextBorder #ef4444
dropdown.background #1e293b
dropdown.border #3e4e6e
dropdown.foreground #e2e8f0
dropdown.listBackground #1e293b
editor.background #0f172a
editor.findMatchBackground #3e4e6e80
editor.findMatchBorder #8b5cf6
editor.findMatchHighlightBackground #3e4e6e50
editor.findMatchHighlightBorder #3e4e6e80
editor.foldBackground #3e4e6e40
editor.foreground #e2e8f0
editor.lineHighlightBackground #1e293b50
editor.rangeHighlightBorder #3e4e6e80
editor.selectionBackground #3e4e6e
editor.selectionHighlightBorder #3e4e6e80
editor.wordHighlightBackground #3e4e6e50
editor.wordHighlightBorder #3e4e6e80
editor.wordHighlightStrongBackground #3e4e6e80
editor.wordHighlightStrongBorder #8b5cf6
editorBracketMatch.background #3e4e6e50
editorBracketMatch.border #8b5cf6
editorCursor.foreground #8b5cf6
editorError.foreground #ef4444
editorGhostText.border #3e4e6e80
editorGroup.border #3e4e6e
editorGroup.dropBackground #3e4e6e40
editorGroup.dropIntoPromptBorder #3e4e6e
editorGroupHeader.tabsBackground #1e293b
editorHoverWidget.background #1e293b
editorHoverWidget.border #3e4e6e
editorHoverWidget.foreground #e2e8f0
editorHoverWidget.highlightForeground #8b5cf6
editorHoverWidget.statusBarBackground #0f172a
editorIndentGuide.activeBackground1 #3e4e6e
editorIndentGuide.background1 #1e293b80
editorInfo.foreground #3b82f6
editorOverviewRuler.border #3e4e6e
editorSuggestWidget.border #3e4e6e
editorWarning.foreground #f59e0b
editorWidget.background #1e293b
editorWidget.border #3e4e6e
editorWidget.foreground #e2e8f0
editorWidget.resizeBorder #8b5cf6
extensionBadge.remoteBackground #8b5cf6
extensionBadge.remoteForeground #ffffff
extensionButton.prominentBackground #8b5cf6
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #7c3aed
extensionIcon.starForeground #f59e0b
extensionIcon.verifiedForeground #10b981
input.background #1e293b
input.border #3e4e6e
input.foreground #e2e8f0
inputOption.activeBorder #8b5cf6
inputValidation.errorBorder #ef4444
inputValidation.infoBorder #3b82f6
inputValidation.warningBorder #f59e0b
list.activeSelectionBackground #3e4e6e
list.activeSelectionForeground #f1f5f9
list.activeSelectionIconForeground #f1f5f9
list.filterMatchBorder #8b5cf6
list.focusHighlightForeground #f1f5f9
list.focusOutline #8b5cf6
list.highlightForeground #8b5cf6
list.hoverBackground #1e293b80
list.hoverForeground #f1f5f9
list.inactiveSelectionBackground #1e293b
list.inactiveSelectionForeground #e2e8f0
menu.border #3e4e6e
menubar.selectionBorder #3e4e6e
notificationCenter.border #3e4e6e
notifications.border #3e4e6e
notificationsErrorIcon.foreground #ef4444
notificationsInfoIcon.foreground #3b82f6
notificationsWarningIcon.foreground #f59e0b
notificationToast.border #3e4e6e
panel.background #1e293b
panel.border #3e4e6e
panelInput.border #3e4e6e
panelSection.border #3e4e6e
panelTitle.activeBorder #8b5cf6
panelTitle.activeForeground #f1f5f9
panelTitle.inactiveForeground #64748b
peekView.border #8b5cf6
peekViewEditor.matchHighlightBorder #8b5cf6
pickerGroup.border #3e4e6e
pickerGroup.foreground #8b5cf6
quickInput.background #1e293b
quickInput.foreground #e2e8f0
quickInputList.focusBackground #3e4e6e
quickInputList.focusForeground #f1f5f9
quickInputList.focusIconForeground #8b5cf6
scrollbar.shadow #0f172a80
scrollbarSlider.background #1e293b80
scrollbarSlider.hoverBackground #3e4e6e80
searchEditor.findMatchBackground #3e4e6e80
settings.checkboxBorder #3e4e6e
settings.dropdownListBorder #3e4e6e
settings.modifiedItemIndicator #8b5cf6
sideBar.background #1e293b
sideBar.border #3e4e6e
sideBar.foreground #94a3b8
sideBarSectionHeader.background #1e293b
sideBarSectionHeader.border #3e4e6e
sideBarSectionHeader.foreground #94a3b8
sideBarTitle.foreground #64748b
statusBar.background #1e293b
statusBar.border #3e4e6e
statusBar.debuggingBorder #f59e0b
statusBar.foreground #94a3b8
statusBar.noFolderBorder #3e4e6e
symbolIcon.arrayForeground #d593ed
symbolIcon.booleanForeground #d593ed
symbolIcon.classForeground #818cf8
symbolIcon.colorForeground #10b981
symbolIcon.constantForeground #d593ed
symbolIcon.enumeratorForeground #818cf8
symbolIcon.functionForeground #20b7f8
symbolIcon.variableForeground #b2d3ff
tab.activeBackground #0f172a
tab.activeBorder #8b5cf6
tab.activeBorderTop #8b5cf6
tab.activeForeground #f1f5f9
tab.border #1e293b
tab.inactiveBackground #1e293b
tab.inactiveForeground #64748b
tab.lastPinnedBorder #3e4e6e
terminal.background #0f172a
terminal.foreground #e2e8f0
titleBar.activeBackground #1e293b
titleBar.activeForeground #94a3b8
titleBar.border #3e4e6e
tree.indentGuidesStroke #3e4e6e
walkThrough.embeddedEditorBackground #0f172a
widget.shadow #0f172a80 variable.other.readwrite, variable.other, variable.other.property #b2d3ff —
meta.property-name, meta.object.key, entity.other.attribute-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less #b2d3ff —
variable.other.object #a093cf —
entity.name.type, support.type #818cf8 —
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.font-name.css, support.constant.vendored.property-value.css #10b981 —
meta.property-value.css, support.type.vendored.property-name.css, support.type.property-name.media.css #a78bfa —
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #38bdf8 —
variable.parameter.js, variable.parameter.tsx, variable.parameter.ts, meta.parameters.js, meta.parameters.ts, meta.parameters.tsx, meta.parameters.jsx, meta.function.parameters.js, meta.function.parameters.ts, meta.function.parameters.tsx #a08ef0 —
meta.object-literal.key, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.jsx #2383f8 —
entity.name.type.class.cs, entity.name.type.struct.cs, entity.name.type.enum.cs, storage.type.cs #818cf8 —
keyword.operator.logical.cs, keyword.other.unsafe.cs, keyword.other.namespace.cs #8b5cf6 —
storage.type.rust, entity.name.type.rust, entity.name.type.struct.rust #818cf8 —
keyword.operator.rust, keyword.other.rust, storage.modifier.lifetime.rust #8b5cf6 —
entity.name.function.rust, support.function.rust #20b7f8 —
punctuation.definition.template-expression, punctuation.section.embedded #8b5cf6 —
markup.heading, markup.bold, markup.italic #818cf8 —
entity.name.type.namespace.cpp, entity.name.scope-resolution.cpp, punctuation.separator.scope-resolution.cpp #8b5cf6 —
support.type.stdstring.cpp, support.type.stl.cpp, support.type.posix-reserved.cpp #818cf8 —
storage.type.primitive.cpp, storage.type.built-in.primitive.cpp, storage.type.cpp, entity.name.type.cpp, support.type.stdstring.cpp, support.type.stl.cpp, support.type.posix-reserved.cpp, entity.name.type.class.cpp, entity.name.type.namespace.cpp #818cf8 —
keyword.control.flow.cpp, keyword.control.loop.cpp, keyword.control.cpp, storage.type.namespace.cpp, keyword.control.namespace.cpp #c586c0 —
keyword.operator.arithmetic.cpp, keyword.operator.comparison.cpp, keyword.operator.assignment.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.modulo.cpp, punctuation.separator.scope-resolution.cpp, punctuation.terminator.statement.cpp, punctuation.separator.delimiter.cpp, meta.block.cpp punctuation.section.block #38bdf8 —
support.class.iostream.cpp, support.constant.iostream.cpp, support.type.iostream.cpp, keyword.operator.stream.cpp, entity.name.type.namespace.std.cpp #d593ed —
source.python, meta.function.python, meta.class.python #b2d3ff —
keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python, keyword.other.python, storage.type.function.python, storage.type.class.python, storage.modifier.declaration.python #8b5cf6 —
entity.name.function.python, meta.function-call.generic.python #20b7f8 —
support.function.builtin.python, support.function.magic.python #d593ed —
variable.other.python #b2d3ff —
meta.function.python #a08ef0 —
support.type.python, entity.name.type.class.python, support.type.exception.python #818cf8 —
keyword.operator.arithmetic.python, keyword.operator.comparison.python, keyword.operator.assignment.python, punctuation.separator.period.python #38bdf8 —
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.separator.arguments.python, punctuation.separator.element.python, punctuation.separator.period.python #94a3b8 —
keyword.control.java, keyword.other.package.java, keyword.other.import.java, storage.modifier.java, storage.type.java, storage.type.generic.java #8b5cf6 —
storage.modifier.package.java, storage.modifier.import.java, variable.language.wildcard.java #b2d3ff —
variable.parameter.java #a08ef0 —
variable.other.local.java, variable.other.definition.java #b2d3ff —
storage.type.primitive.java, storage.type.void.java #d593ed —
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 } !` ;
}
Cosmic Nights | Coding Theme