Skip to main content
Ocean Space Refined | 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 #0F111A activityBar.border #0F111A activityBar.foreground #BAAFC0 activityBarBadge.background #00B0FF badge.background #00B0FF button.background #00e8c5B0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, markup.quote.markdown, meta.diff, meta.diff.header #6e7178 — source, meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown #D5CED9 — variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name #87D3F8 — support.function.builtin.zig, entity.name.function.preprocessor, entity.name.type, constant.numeric, markup.bold, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, support.type.object
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Ocean Space Refined — Ocean Space Refined
button.hoverBackground
#07d4b6A0
contrastBorder #282d44
debugExceptionWidget.background #FF9F2E60
debugExceptionWidget.border #FF9F2E60
debugToolBar.background #372F3C
diffEditor.insertedTextBackground #A5F69C20
diffEditor.removedTextBackground #FC644D20
dropdown.background #2B303B
dropdown.border #363C49
editor.background #0F111A
editor.findMatchBackground #F39D1299
editor.findMatchHighlightBackground #59B8B399
editor.foreground #D5CED9
editor.hoverHighlightBackground #373941
editor.lineHighlightBackground #1D2133
editor.lineHighlightBorder #1D2133
editor.rangeHighlightBackground #372F3C
editor.selectionBackground #454b5e
editor.selectionHighlightBackground #4F435580
editor.wordHighlightBackground #4f435583
editor.wordHighlightStrongBackground #DB45A280
editorBracketMatch.background #746F77
editorBracketMatch.border #746F77
editorCodeLens.foreground #746F77
editorCursor.foreground #FFFFFF
editorError.foreground #FC644D
editorGroup.dropBackground #495061D7
editorGroup.emptyBackground #0F111A
editorGroupHeader.tabsBackground #0F111A
editorGutter.addedBackground #45C758BB
editorGutter.deletedBackground #FC644DBB
editorGutter.modifiedBackground #3B79C7BB
editorHoverWidget.background #131622
editorHoverWidget.border #0B0D14
editorIndentGuide.background1 #3F3544
editorInlayHint.background #353a47
editorInlayHint.foreground #D5CED9
editorLineNumber.activeForeground #FFFFFF
editorLineNumber.foreground #746F77
editorLink.activeForeground #3B79C7
editorOverviewRuler.border #0F111A
editorRuler.foreground #4F4355
editorSuggestWidget.background #131622
editorSuggestWidget.border #0B0D14
editorSuggestWidget.selectedBackground #373941
editorWarning.foreground #FF9F2E
editorWhitespace.foreground #5f5f5f
editorWidget.background #131622
editorWidget.border #131622
errorForeground #FC644D
extensionButton.prominentBackground #282d44
extensionButton.prominentHoverBackground #07d4b6A0
focusBorder #0B0D14
foreground #D5CED9
input.background #2B303B
input.placeholderForeground #746F77
inputOption.activeBorder #C668BA
inputValidation.errorBackground #D65343
inputValidation.errorBorder #D65343
inputValidation.infoBackground #3A6395
inputValidation.infoBorder #3A6395
inputValidation.warningBackground #DE9237
inputValidation.warningBorder #DE9237
list.activeSelectionBackground #117e6da0
list.activeSelectionForeground #F3EFE0
list.dropBackground #3a404e
list.errorForeground #D65343
list.focusBackground #282d44
list.focusForeground #ffffff
list.hoverBackground #3a404e
list.hoverForeground #eeeeee
list.warningForeground #DE9237
merge.currentContentBackground #F9267240
merge.currentHeaderBackground #F92672
merge.incomingContentBackground #3B79C740
merge.incomingHeaderBackground #3B79C7BB
notifications.background #131622
notificationsErrorIcon.foreground #FC644D
notificationsInfoIcon.foreground #00b0ff
notificationsWarningIcon.foreground #FF9F2E
panel.background #0F111A
panel.border #282d44
panelTitle.activeBorder #282d44
panelTitle.inactiveForeground #746F77
peekView.border #0F111A
peekViewEditor.background #1A1C22
peekViewEditor.matchHighlightBackground #FF9F2E60
peekViewResult.background #1A1C22
peekViewResult.matchHighlightBackground #FF9F2E60
peekViewResult.selectionBackground #0F111A
peekViewTitle.background #1A1C22
peekViewTitleDescription.foreground #746F77
pickerGroup.border #4F4355
pickerGroup.foreground #746F77
profileBadge.background #00B0FF
progressBar.background #C668BA
scrollbar.shadow #0B0D14
scrollbarSlider.activeBackground #00e8c5B0
scrollbarSlider.background #746F77B0
scrollbarSlider.hoverBackground #07d4b6A0
selection.background #746F77
sideBar.background #0F111A
sideBar.foreground #F3EFE0
sideBarSectionHeader.background #0F111A
sideBarTitle.foreground #FFFFFF
statusBar.background #0F111A
statusBar.debuggingBackground #FC644D
statusBar.noFolderBackground #0F111A
statusBarItem.activeBackground #00E8C5
statusBarItem.hoverBackground #07D4B5B0
statusBarItem.prominentBackground #282d44
statusBarItem.prominentHoverBackground #07d4b6A0
tab.activeBackground #282d44
tab.activeForeground #FFFFFF
tab.border #282d44
tab.inactiveBackground #0B0D14
tab.inactiveForeground #8F93A2
titleBar.activeBackground #0F111A
titleBar.inactiveBackground #0F111A
walkThrough.embeddedEditorBackground #0F111A
widget.shadow #0B0D14 markup.list, text.xml string, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string #F2F27A —
markup.heading, variable.language.this.js, variable.language.special.self.python #ff00aa —
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag #f92672 —
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type #c74ded —
string.regexp, markup.changed #3A75C4 —
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted, support.type.primitive.ts, support.type.builtin.ts, variable.other.enummember #E25822 —
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string #14B37D —
comment, markup.quote.markdown, meta.diff, meta.diff.header #6e7178 —
source, meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown #D5CED9 —
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name #87D3F8 —
support.function.builtin.zig, entity.name.function.preprocessor, entity.name.type, constant.numeric, markup.bold, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, support.type.object #f39c12 —
markup.list, text.xml string, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string #F2F27A —
markup.heading, variable.language.this.js, variable.language.special.self.python #ff00aa —
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag #f92672 —
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type #c74ded —
string.regexp, markup.changed #3A75C4 —
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted, support.type.primitive.ts, support.type.builtin.ts, variable.other.enummember #E25822 —
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string #14B37D —
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 } !` ;
}