Skip to main content
Home Theme VS Code Odyssey Night Odyssey Night - Another Dark Theme for Visual Studio Code
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.activeBackground #0a0b0f activityBar.background #13141c activityBar.foreground #d7dae0 activityBar.inactiveForeground #d7dae080 activityBarBadge.background #3b3bb6 activityBarBadge.foreground #d7dae0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #40a13d italic source.dockerfile keyword #ad33ff bold entity.name.tag.yaml #24dd6e — string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml #c84b61 — constant.numeric.integer.yaml, constant.numeric.float.yaml
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Odyssey Night — Odyssey Night Odyssey Night | Coding Theme
badge.background #a9b1d680
badge.foreground #d7dae0
breadcrumb.background #0e0f14
button.background #3b3bb6d9
button.foreground #ffffff
button.hoverBackground #3b3bb680
button.secondaryBackground #3a3d41d9
button.secondaryForeground #ffffff
button.secondaryHoverBackground #3a3d4180
debugToolBar.background #0a0b0f
debugToolBar.border #3b3bb680
editor.background #13141C
editor.findMatchBackground #e8682659
editor.findMatchBorder #e86826
editor.findMatchHighlightBackground #7aa2f759
editor.findMatchHighlightBorder #7aa2f7
editor.foreground #d7dae0
editor.selectionBackground #96827d80
editor.selectionHighlightBackground #d7dae00d
editor.selectionHighlightBorder #d7dae033
editorBracketHighlight.foreground1 #e9967a
editorBracketHighlight.foreground2 #00e339
editorBracketHighlight.foreground3 #00b6ff
editorBracketHighlight.foreground4 #e6db10
editorBracketHighlight.foreground5 #ec173e
editorBracketHighlight.foreground6 #ad33ff
editorBracketPairGuide.activeBackground1 #e9967a99
editorBracketPairGuide.activeBackground2 #00e33999
editorBracketPairGuide.activeBackground3 #00b6ff99
editorBracketPairGuide.activeBackground4 #e6db1099
editorBracketPairGuide.activeBackground5 #ec173e99
editorBracketPairGuide.activeBackground6 #ad33ff99
editorCursor.foreground #e9bb05
editorGhostText.foreground #888ec2
editorGroup.border #ad33ffbf
editorGroupHeader.tabsBackground #0e0f14
editorLineNumber.activeForeground #a9b1d6
editorLineNumber.foreground #a9b1d680
editorMarkerNavigation.background #0a0b0f
editorSuggestWidget.background #0a0b0f
editorSuggestWidget.border #ad33ffbf
editorWidget.background #0a0b0f
editorWidget.border #ad33ffbf
focusBorder #ad33ff
foreground #a9b1d6
gitDecoration.modifiedResourceForeground #00a2ff
input.background #1a1b26
input.border #34364c80
input.foreground #d7dae0
input.placeholderForeground #d7dae080
inputOption.activeBackground #ad33ffbf
inputOption.hoverBackground #000000
list.activeSelectionBackground #34364c
list.activeSelectionForeground #d7dae0
list.deemphasizedForeground #787c99
list.dropBackground #abb2bf33
list.errorForeground #cc0033
list.filterMatchBackground #000000
list.filterMatchBorder #18d468
list.focusBackground #34364c
list.focusForeground #d7dae0
list.highlightForeground #18d468
list.hoverBackground #34364c80
list.hoverForeground #d7dae0
list.inactiveSelectionBackground #34364c
list.inactiveSelectionForeground #d7dae0
list.invalidItemForeground #d19a66
list.warningForeground #d4af37
listFilterWidget.background #000000
listFilterWidget.noMatchesOutline #cc0033
listFilterWidget.outline #18d468
menu.background #0a0b0f
menu.foreground #abb2bf
menu.separatorBackground #ad33ffbf
minimap.findMatchHighlight #7aa2f7e6
minimap.selectionHighlight #96827de6
notifications.background #0a0b0f
panel.background #0e0f14
panel.border #ad33ff80
panel.dropBorder #abb2bf80
panelTitle.activeBorder #d7dae0
panelTitle.activeForeground #d7dae0
panelTitle.inactiveForeground #d7dae080
progressBar.background #ffb401
scrollbar.shadow #ad33ff80
scrollbarSlider.activeBackground #3b3bb6
scrollbarSlider.background #3b3bb680
scrollbarSlider.hoverBackground #3b3bb6bf
selection.background #3b3bb6
sideBar.background #0e0f14
sideBar.foreground #abb2bf
sideBarSectionHeader.background #13141c
sideBarTitle.foreground #a9b1d6
statusBar.background #1c2730
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #abb2bf
statusBar.noFolderBackground #ad33ff80
statusBarItem.remoteBackground #4d78cc
tab.activeBackground #34364c80
tab.activeBorder #ad33ff
tab.activeForeground #d7dae0
tab.border #0e0f14
tab.hoverBackground #34364c
tab.hoverForeground #d7dae0
tab.inactiveBackground #15161F
tab.inactiveForeground #eeffff80
tab.unfocusedActiveBackground #34364c80
tab.unfocusedActiveBorder #ad33ff80
tab.unfocusedActiveForeground #d7dae0bf
tab.unfocusedHoverBackground #34364c
tab.unfocusedHoverForeground #d7dae0
tab.unfocusedInactiveBackground #13141C
tab.unfocusedInactiveForeground #eeffff80
terminal.ansiBlack #3f4451
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #ff0000
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #d4af37
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e6e6e6
terminal.ansiYellow #d18f52
terminal.background #0a0b0f
terminal.foreground #d7dae0
terminal.selectionBackground #0063c7
terminalCommandDecoration.errorBackground #ff0000
terminalCommandDecoration.successBackground #23d18b
titleBar.activeBackground #0a0b0f
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #0a0b0f
titleBar.inactiveForeground #9da5b480
tree.indentGuidesStroke #abb2bfbf
widget.shadow #ad33ffbf constant.language.boolean.yaml #ad33ff —
support.type.property-name.json #24dd6e —
string.quoted.double.json, string.quoted.single.json, string.quoted.triple.json #ff8b39 —
constant.numeric.json #00aeff —
constant.language.json #ad33ff —
source.go string.quoted.raw #c84b61 —
source.go storage.type #3bbea4 italic
source.go storage.type.error #d60076 italic
source.go keyword.struct, source.go keyword.interface #6b9aff italic
source.go keyword.map #d468f5 italic
source.go keyword.type #ad33ff —
source.go keyword.const #ad33ff —
source.go keyword.var #3d71ff —
source.go keyword.package, source.go keyword.control.import #3d71ff —
source.go entity.name.type.package #D7DAE0 —
source.go keyword.function #ad33ff —
source.go keyword.control #ff0096 —
source.go keyword.operator #ff0096 —
source.go entity.name.function.support #0e9fe3 —
source.go entity.name.function #ffb401 —
source.go entity.name.type #D7DAE0 —
source.go variable.other.assignment, source.go variable.other.declaration #2ee2fa —
source.go entity.name.import #b87e70 —
source.go entity.alias.import #95d0f0 —
source.go constant.language #f35de6 —
source.go constant.numeric #fede5d —
source.go string.quoted #ff8b39 —
string.unquoted.go.mod, string.unquoted.go.sum #ffb401 —
constant.language.go.mod, constant.language.go.sum #ff0096 —
source.dart keyword.other.import #3d71ff —
source.dart keyword.control #ff0096 —
source.dart storage.modifier #ad33ff italic
source.dart storage.type.annotation #ad33ff —
source.dart variable.language #ad33ff —
source.dart keyword.declaration #ad33ff italic bold
source.dart keyword.operator #ff0096 bold
source.dart entity.name.function #ffb401 —
source.dart support.class #3bbea4 —
source.dart storage.type.primitive #ad33ff italic
source.dart constant.language #f35de6 —
source.dart constant.numeric #fede5d —
source.dart string.interpolated #ff8b39 —
source.dart meta.declaration.dart string.interpolated.single #b87e70 —
text.csv rainbow1 #ad33ff bold
text.csv keyword.rainbow2 #F032E6 italic
text.csv entity.name.function.rainbow3 #0e9fe3 bold
text.csv comment.rainbow4 #2ee2fa underline
text.csv string.rainbow5 #3bbea4 bold
text.csv variable.parameter.rainbow6 #24dd6e —
text.csv constant.numeric.rainbow7 #fede5d italic
text.csv entity.name.type.rainbow8 #ff8b39 underline
text.csv markup.bold.rainbow9 #c84b61 bold
text.csv invalid.rainbow10 #ff0096 italic
source.python string.quoted.docstring.multi.python #40A13D italic
source.python keyword.control.import #3d71ff —
source.python entity.name.function.decorator #ad33ff —
source.python keyword.control.flow #ff0096 —
source.python storage.type.class #ad33ff italic bold
source.python storage.type.function #ad33ff italic bold
source.python keyword.operator #ff0096 —
source.python entity.name.function #ffb401 underline
source.python meta.function-call.generic, source.python support.function.builtin #0e9fe3 —
source.python support.function.magic #1ec0ef —
source.python punctuation.section.function.begin #ad33ff bold
source.python punctuation.separator.colon #ff0096 —
source.python punctuation.separator.annotation #ff0096 —
source.python string.quoted.single #ff8b39 —
source.python constant.numeric.dec #fede5d —
source.python constant.language #f35de6 —
source.python support.type #3bbea4 —
source.python entity.name.type.class #3bbea4 —
source.python variable.parameter.function-call #2ee2fa —
source.python meta.attribute #fde69a —
source.css entity.other.attribute-name.class.css #AD33FF underline
source.css entity.name.tag.css #3BBEA4 italic
source.css constant.other.color #c9ada7 underline
support.type.property-name.css #7AA2F7 —
support.constant.property-value.css #72F1B8 italic
constant.numeric.css #FEDE5D —
keyword.other.unit.px.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css #D19A66 italic
source.js keyword.control.import.js, source.js keyword.control.from.js #3D71FF —
source.js meta.import.js string.quoted.single.js #B87E70 —
source.js meta.import.js string.quoted.double.js #B87E70 —
source.js meta.import.js variable.other.readwrite.alias.js #95D0F0 —
source.js storage.type.js, source.js storage.type.function.js #AD33FF italic
source.js keyword.control, source.js storage.modifier.async.js #FF0096 —
source.js keyword.operator.new.js #AD33FF —
source.js string.quoted.single.js, source.js string.quoted.double.js, source.js meta.object.member.js #FF8B39 —
source.js constant.numeric.decimal.js #fede5d —
source.js constant.language.null.js, source.ts constant.language.null.ts #F35DE6 —
source.js variable.other.property.js #FDE69A —
source.js storage.type.function.arrow.js, source.js punctuation.separator.key-value.js, source.js keyword.operator #FF0096 bold
source.js entity.name.function.js, source.js entity.name.function.ts #0E9FE3 —
source.js constant.other.character-class.regexp #72F1B8 —
source.vue punctuation.definition.tag #FF0096 —
source.vue entity.name.tag.html, source.vue entity.name.tag.template.html, source.vue entity.name.tag.script.html.vue, source.vue entity.name.tag.style.html.vue #b63b87 —
source.vue entity.other.attribute-name.html #fede5d italic
source.vue punctuation.attribute-shorthand.bind.html.vue, source.vue punctuation.attribute-shorthand.event.html, source.vue punctuation.separator.key-value.html.vue, source.vue punctuation.separator.key-value.html #FF0096 —
source.vue punctuation.definition.string #FF8B39 —
source.vue string.quoted.single.ts, source.vue string.quoted.double.ts, source.vue string.quoted.double.html, source.vue string.template.ts #FF8B39 —
source.vue constant.language.boolean #F35DE6 —
source.vue keyword.operator, source.vue keyword.control.conditional.vue, source.vue keyword.control.loop.vue, source.vue punctuation.accessor.optional.ts, source.vue punctuation.definition.template-expression.begin.ts, source.vue storage.type.function.arrow.ts #FF0096 bold
source.vue variable.other.readwrite.ts, source.vue variable.other.object.ts, source.vue variable.parameter.ts #2EE2FA —
source.vue constant.language.null.ts #F35DE6 —
source.vue constant.numeric.decimal.ts #FEDE5D —
source.vue variable.other.property.ts #D7DAE0 —
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...
main*
Button.tsx
31
~/my-project
$
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 }!` ;
}