Skip to main content
Octopus | 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.activeBackground #ffffff activityBar.background #ffffff activityBar.border #ffffff00 activityBar.foreground #000000 activityBar.inactiveForeground #000000 activityBarBadge.background #12b874 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle string #EE9839 — constant.numeric #3675EF — variable, meta.definition.variable #21AD7F — entity.name.function, meta.function-call, entity.name.type #323232 — comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#ffffff
badge.background #12b874
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #ffffff
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #000000e9
button.background #12b874
button.foreground #ffffff
button.hoverBackground #0b965d
button.secondaryBackground #5f6a79
button.secondaryForeground #ffffff
button.secondaryHoverBackground #4c5561
checkbox.background #ffffff
checkbox.border #00000000
checkbox.foreground #000000
debugExceptionWidget.background #f3f3f3
debugExceptionWidget.border #d5d5d5
debugToolBar.background #f3f3f3
debugToolBar.border #d5d5d5
diffEditor.border #00000000
diffEditor.insertedLineBackground #7FD4973D
diffEditor.insertedTextBackground #7FD4976D
diffEditor.insertedTextBorder #00000000
diffEditor.removedLineBackground #FF0D0026
diffEditor.removedTextBackground #FF0D0021
diffEditor.removedTextBorder #00000000
dropdown.background #ffffff
dropdown.border #00000000
dropdown.foreground #000000
editor.background #ffffff
editor.findMatchBackground #DFDFDF
editor.findMatchBorder #ffffff00
editor.findMatchHighlightBackground #DFDFDF
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #DFDFDF
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #add6ff4d
editor.foreground #000000
editor.hoverHighlightBackground #EEEEEE
editor.inactiveSelectionBackground #DFDFDF
editor.lineHighlightBackground #EEEEEE
editor.lineHighlightBorder #EEEEEE
editor.rangeHighlightBackground #58585833
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #DFDFDF
editor.selectionHighlightBackground #DFDFDF
editor.selectionHighlightBorder #ffffff00
editor.wordHighlightBackground #EEEEEE
editor.wordHighlightStrongBackground #EEEEEE
editorBracketMatch.background #0064001a
editorBracketMatch.border #b9b9b9
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #000000
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #e51400
editorGroup.border #e7e7e7
editorGroup.emptyBackground #ffffff
editorGroupHeader.border #ff000000
editorGroupHeader.tabsBackground #ffffff00
editorGroupHeader.tabsBorder #ffffff00
editorGutter.addedBackground #12b874
editorGutter.background #ffffff
editorGutter.commentRangeForeground #424242
editorGutter.deletedBackground #E51212
editorGutter.foldingControlForeground #424242
editorGutter.modifiedBackground #6096ff
editorHoverWidget.background #ffffff
editorHoverWidget.border #c9c9c9
editorHoverWidget.foreground #000000
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #d3d3d3
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #6096ff
editorLineNumber.activeForeground #000000
editorLineNumber.foreground #909090
editorLink.activeForeground #ed19ff
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #e01937
editorMarkerNavigationInfo.background #6096ff
editorMarkerNavigationWarning.background #ff9a16
editorOverviewRuler.background #25252500
editorOverviewRuler.border #ffffff00
editorRuler.foreground #d3d3d3
editorSuggestWidget.background #ffffff
editorSuggestWidget.border #DFDFDF
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #12b874
editorSuggestWidget.selectedBackground #DFDFDF
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #ffa52f
editorWhitespace.foreground #DFDFDF00
editorWidget.background #ffffff
editorWidget.foreground #000000
editorWidget.resizeBorder #ffffff
focusBorder #ffffff00
foreground #000000
gitDecoration.addedResourceForeground #12b874
gitDecoration.conflictingResourceForeground #DC980C
gitDecoration.deletedResourceForeground #E51212
gitDecoration.ignoredResourceForeground #9b9b9b
gitDecoration.modifiedResourceForeground #6096ff
gitDecoration.stageDeletedResourceForeground #E51212
gitDecoration.stageModifiedResourceForeground #6096ff
gitDecoration.submoduleResourceForeground #000000
gitDecoration.untrackedResourceForeground #12b874
icon.foreground #000000
input.background #EEEEEE
input.border #00000000
input.foreground #000000
input.placeholderForeground #767676
inputOption.activeBackground #12b874
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #EEEEEE
list.activeSelectionForeground #000000
list.dropBackground #ebf5ff
list.focusBackground #DFDFDF
list.focusForeground #000000
list.highlightForeground #12b874
list.hoverBackground #EEEEEE
list.hoverForeground #000000
list.inactiveSelectionBackground #EEEEEE
list.inactiveSelectionForeground #000000
listFilterWidget.background #efc1ad
listFilterWidget.noMatchesOutline #be110000
listFilterWidget.outline #00000000
menu.background #ffffff
menu.border #00000000
menu.foreground #000000
menu.selectionBackground #DFDFDF
menu.selectionBorder #00000000
menu.selectionForeground #000000
menu.separatorBackground #cfcfcf
menubar.selectionBackground #DFDFDF
menubar.selectionBorder #ffffff00
menubar.selectionForeground #000000ee
merge.commonContentBackground #E5E5E5
merge.commonHeaderBackground #BFBFBF
merge.currentContentBackground #DBF4EF
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #DBECFF
merge.incomingHeaderBackground #A6CFFF
minimap.background #ffffff
minimap.errorHighlight #e51400
minimap.findMatchHighlight #DFDFDF
minimap.selectionHighlight #DFDFDF
minimap.warningHighlight #ffa52f
minimapGutter.addedBackground #12b874
minimapGutter.deletedBackground #E51212
minimapGutter.modifiedBackground #6096ff
notificationCenter.border #ffffff00
notificationCenterHeader.background #DFDFDF
notificationCenterHeader.foreground #000000
notifications.background #ffffff
notifications.border #DFDFDF
notifications.foreground #000000
notificationsErrorIcon.foreground #e01937
notificationsInfoIcon.foreground #6096ff
notificationsWarningIcon.foreground #e67624
notificationToast.border #d5d5d5
panel.background #ffffff
panel.border #DFDFDF
panelSection.border #80808059
panelTitle.activeBorder #12b874
panelTitle.activeForeground #000000
panelTitle.inactiveForeground #000000bf
peekView.border #DFDFDF
peekViewEditor.background #ffffff
peekViewEditor.matchHighlightBackground #DFDFDF
peekViewEditor.matchHighlightBorder #9d8f2700
peekViewEditorGutter.background #DFDFDF
peekViewResult.background #ffffff
peekViewResult.fileForeground #474747
peekViewResult.lineForeground #545454
peekViewResult.matchHighlightBackground #a3a3a34d
peekViewResult.selectionBackground #73737333
peekViewResult.selectionForeground #6c6c6c
peekViewTitle.background #DFDFDF
peekViewTitleDescription.foreground #616161e6
peekViewTitleLabel.foreground #000000
pickerGroup.border #ffffff00
pickerGroup.foreground #000000
progressBar.background #12b874
scrollbar.shadow #ffffff00
scrollbarSlider.activeBackground #C6C6C6AA
scrollbarSlider.background #D0D0D087
scrollbarSlider.hoverBackground #C6C6C6AA
selection.background #DFDFDF
settings.focusedRowBackground #ffffff07
settings.headerForeground #000000
sideBar.background #ffffff
sideBar.border #ff000000
sideBar.dropBackground #ebf5ff
sideBar.foreground #000000
sideBarSectionHeader.background #ffffff00
sideBarSectionHeader.border #ffffff00
sideBarSectionHeader.foreground #000000
sideBarTitle.foreground #000000
statusBar.background #ffffff
statusBar.border #ff000000
statusBar.debuggingBackground #ffffff
statusBar.debuggingBorder #ffffff00
statusBar.debuggingForeground #000000
statusBar.foreground #000000
statusBar.noFolderBackground #ffffff
statusBar.noFolderBorder #ffffff00
statusBar.noFolderForeground #000000
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #12b874
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #00000000
tab.activeBorderTop #12b874
tab.activeForeground #000000
tab.border #f3f3f300
tab.hoverBackground #EEEEEE
tab.hoverForeground #000000
tab.inactiveBackground #ffffff
tab.inactiveForeground #000000
terminal.ansiBlack #000000
terminal.ansiBlue #0451a5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #14ce14
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #b5ba00
terminal.ansiCyan #0598bc
terminal.ansiGreen #00bc00
terminal.ansiMagenta #bc05bc
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #949800
terminal.border #80808059
terminal.foreground #333333
terminal.selectionBackground #DFDFDF
terminalCursor.background #12b874
terminalCursor.foreground #000000
textLink.foreground #12b874
titleBar.activeBackground #ffffff
titleBar.activeForeground #000000
titleBar.border #00000000
titleBar.inactiveBackground #ffffff
titleBar.inactiveForeground #000000
tree.indentGuidesStroke #cbcbcb
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000029 #B9B9DA
storage.type, storage.modifier #C73161 —
meta.jsx.children #323232 —
meta.type, entity.name.type #767676 —
meta.tag.attributes, entity.other.attribute-name.html #8147DF —
punctuation.definition.tag #323232 —
keyword.control.import, keyword.control.from #3675EF —
variable.other.readwrite.alias #323232 —
keyword.operator.assignment, punctuation.separator.key-value, meta.tag.svg #323232 —
entity.name.type.alias, entity.name.type.interface #21AD7F —
keyword.other.special-method #21AD7F —
support.type.property-name.json, entity.name.tag.yaml #323232 —
string.other.link.title.markdown #EFA536 —
string.other.link.description.markdown #21AD7F —
markup.underline.link.image.markdown, markup.underline.link.markdown #8147DF —
entity.name.tag.css #8147DF bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css #EFA536 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element #C73161 —
support.type.property-name.css #21AD7F —
constant.numeric.css #323232 —
keyword.other.important.css #C73161 —
entity.name.tag.localname.svg #21AD7F —
entity.other.attribute-name.localname.svg #8147DF —
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
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
fetchUser
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 }!` ;
}