Skip to main content
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 #80cbc4 activityBar.background #16161e activityBar.border #16161e60 activityBar.foreground #babed8 activityBarBadge.background #80cbc4 activityBarBadge.foreground #000000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle string #C3E88D — punctuation, constant.other.symbol #89DDFF — constant.character.escape, text.html constant.character.entity.named #BABED8 — constant.language.boolean #FF9CAC — constant.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Material Ocean — Material Ocean
badge.background
#00000030
badge.foreground #464b5d
breadcrumb.activeSelectionForeground #80cbc4
breadcrumb.background #16161e
breadcrumb.focusForeground #babed8
breadcrumb.foreground #525975
breadcrumbPicker.background #16161e
button.background #717cb450
button.foreground #ffffff
debugConsole.errorForeground #f07178
debugConsole.infoForeground #89ddff
debugConsole.warningForeground #4ec9b0
debugToolBar.background #16161e
diffEditor.insertedTextBackground #89ddff20
diffEditor.removedTextBackground #ff9cac20
dropdown.background #16161e
dropdown.border #ffffff10
editor.background #16161e
editor.findMatchBackground #6c5980
editor.findMatchBorder #6c5980
editor.findMatchHighlightBackground #6c598066
editor.findMatchHighlightBorder #5f4c7266
editor.findRangeHighlightBackground #4ec9b030
editor.foreground #babed8
editor.lineHighlightBackground #00000050
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #ffffff0d
editor.selectionBackground #717cb450
editor.selectionHighlightBackground #62e88420
editor.wordHighlightBackground #ff9cac30
editor.wordHighlightStrongBackground #8da7e830
editorBracketHighlight.foreground1 #f6f6f4
editorBracketHighlight.foreground2 #f286c4
editorBracketHighlight.foreground3 #97e1f1
editorBracketHighlight.foreground4 #62e884
editorBracketHighlight.foreground5 #bf9eee
editorBracketHighlight.foreground6 #ffb86c
editorBracketMatch.background #16161e
editorBracketMatch.border #62e88450
editorCursor.foreground #62e884
editorError.foreground #f0717870
editorGroup.border #00000030
editorGroup.dropBackground #f0717880
editorGroup.focusedEmptyBorder #f07178
editorGroupHeader.tabsBackground #16161e
editorGutter.addedBackground #c3e88d60
editorGutter.deletedBackground #f0717860
editorGutter.modifiedBackground #82aaff60
editorHoverWidget.background #16161e
editorHoverWidget.border #ffffff10
editorIndentGuide.activeBackground1 #3b3f51
editorIndentGuide.background1 #3b3f5170
editorInfo.foreground #82aaff70
editorLineNumber.activeForeground #c0caf5
editorLineNumber.foreground #484b5c
editorLink.activeForeground #babed8
editorMarkerNavigation.background #babed805
editorOverviewRuler.border #16161e
editorOverviewRuler.errorForeground #f0717840
editorOverviewRuler.findMatchForeground #80cbc4
editorOverviewRuler.infoForeground #82aaff40
editorOverviewRuler.warningForeground #4ec9b040
editorRuler.foreground #3b3f51
editorSuggestWidget.background #16161e
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #babed8
editorSuggestWidget.highlightForeground #80cbc4
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #4ec9b070
editorWhitespace.foreground #babed840
editorWidget.background #16161e
editorWidget.border #80cbc4
editorWidget.resizeBorder #80cbc4
extensionBadge.remoteForeground #babed8
extensionButton.prominentBackground #c3e88d90
extensionButton.prominentForeground #babed8
extensionButton.prominentHoverBackground #c3e88d
focusBorder #ffffff00
foreground #babed8
gitDecoration.conflictingResourceForeground #4ec9b090
gitDecoration.deletedResourceForeground #f0717890
gitDecoration.ignoredResourceForeground #52597590
gitDecoration.modifiedResourceForeground #82aaff90
gitDecoration.untrackedResourceForeground #c3e88d90
input.background #1a1c25
input.border #ffffff10
input.foreground #babed8
input.placeholderForeground #babed860
inputOption.activeBackground #babed830
inputOption.activeBorder #babed830
inputValidation.errorBorder #f07178
inputValidation.infoBorder #82aaff
inputValidation.warningBorder #4ec9b0
list.activeSelectionBackground #16161e
list.activeSelectionForeground #80cbc4
list.dropBackground #f0717880
list.focusBackground #babed820
list.focusForeground #babed8
list.highlightForeground #80cbc4
list.hoverBackground #16161e
list.hoverForeground #ffffff
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #80cbc4
list.warningForeground #d19a66
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #16161e
menu.foreground #babed8
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #80cbc4
menu.separatorBackground #babed8
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #80cbc4
notebook.focusedCellBorder #80cbc4
notebook.inactiveFocusedCellBorder #80cbc450
notificationLink.foreground #80cbc4
notifications.background #16161e
notifications.foreground #babed8
panel.background #16161e
panel.border #16161e60
panelTitle.activeBorder #80cbc4
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #babed8
peekView.border #00000030
peekViewEditor.background #babed805
peekViewEditor.matchHighlightBackground #717cb450
peekViewEditorGutter.background #babed805
peekViewResult.background #babed805
peekViewResult.matchHighlightBackground #717cb450
peekViewResult.selectionBackground #52597570
peekViewTitle.background #babed805
peekViewTitleDescription.foreground #babed860
pickerGroup.border #ffffff1a
pickerGroup.foreground #80cbc4
progressBar.background #80cbc4
quickInput.background #16161e
quickInput.foreground #525975
quickInputList.focusBackground #babed820
sash.hoverBorder #80cbc450
scrollbar.shadow #00000030
scrollbarSlider.activeBackground #80cbc450
scrollbarSlider.background #8f93a220
scrollbarSlider.hoverBackground #8f93a210
selection.background #80cbc440
settings.checkboxBackground #16161e
settings.checkboxForeground #babed8
settings.dropdownBackground #16161e
settings.dropdownForeground #babed8
settings.headerForeground #80cbc4
settings.modifiedItemIndicator #80cbc4
settings.numberInputBackground #16161e
settings.numberInputForeground #babed8
settings.textInputBackground #16161e
settings.textInputForeground #babed8
sideBar.background #16161e
sideBar.border #16161e60
sideBar.foreground #525975
sideBarSectionHeader.background #16161e
sideBarSectionHeader.border #16161e60
sideBarTitle.foreground #babed8
statusBar.background #16161e
statusBar.border #16161e60
statusBar.debuggingBackground #c792ea
statusBar.debuggingForeground #ffffff
statusBar.foreground #4b526d
statusBar.noFolderBackground #16161e
statusBarItem.activeBackground #f0717880
statusBarItem.hoverBackground #464b5d20
statusBarItem.remoteBackground #80cbc4
statusBarItem.remoteForeground #000000
tab.activeBackground #16161e
tab.activeBorder #80cbc4
tab.activeForeground #ffffff
tab.activeModifiedBorder #525975
tab.border #16161e
tab.inactiveBackground #16161e
tab.inactiveForeground #525975
tab.inactiveModifiedBorder #904348
tab.unfocusedActiveBorder #464b5d
tab.unfocusedActiveForeground #babed8
tab.unfocusedActiveModifiedBorder #c05a60
tab.unfocusedInactiveModifiedBorder #904348
terminal.ansiBlack #000000
terminal.ansiBlue #82aaff
terminal.ansiBrightBlack #464b5d
terminal.ansiBrightBlue #82aaff
terminal.ansiBrightCyan #89ddff
terminal.ansiBrightGreen #c3e88d
terminal.ansiBrightMagenta #c792ea
terminal.ansiBrightRed #f07178
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #4ec9b0
terminal.ansiCyan #89ddff
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #c792ea
terminal.ansiRed #f07178
terminal.ansiWhite #ffffff
terminal.ansiYellow #4ec9b0
terminalCursor.background #000000
terminalCursor.foreground #4ec9b0
textLink.activeForeground #babed8
textLink.foreground #80cbc4
titleBar.activeBackground #16161e
titleBar.activeForeground #babed8
titleBar.border #16161e60
titleBar.inactiveBackground #16161e
titleBar.inactiveForeground #525975
tree.indentGuidesStroke #3b3f51
widget.shadow #00000030 variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #BABED8 —
keyword, modifier, variable.language.this, support.type.object, constant.language #89DDFF —
entity.name.function, support.function #82AAFF —
storage.type, storage.modifier, storage.control #C792EA —
support.module, support.node #F07178 italic
support.type, constant.other.key #4EC9B0 —
entity.name.type, entity.other.inherited-class, entity.other #4EC9B0 —
comment punctuation.definition.comment, string.quoted.docstring #464B5D italic
entity.name, entity.name.type.class, support.type, support.class, meta.use #4EC9B0 —
variable.object.property, meta.field.declaration entity.name.function #F07178 —
meta.definition.method entity.name.function #F07178 —
meta.function entity.name.function #82AAFF —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #89DDFF —
meta.embedded, source.groovy.embedded, meta.template.expression #BABED8 —
entity.name.tag.yaml #F07178 —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #F07178 —
constant.language.json #89DDFF —
entity.other.attribute-name.class #4EC9B0 —
entity.other.attribute-name.id #F78C6C —
source.css entity.name.tag #4EC9B0 —
support.type.property-name.css #B2CCD6 —
meta.tag, punctuation.definition.tag #89DDFF —
entity.other.attribute-name #C792EA —
punctuation.definition.entity.html #BABED8 —
text.html.markdown meta.link.inline, meta.link.reference #F07178 —
text.html.markdown beginning.punctuation.definition.list #89DDFF —
markup.italic #F07178 italic
markup.bold markup.italic, markup.italic markup.bold #F07178 italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #C3E88D —
markup.inline.raw.string.markdown #C3E88D —
keyword.other.definition.ini #F07178 —
entity.name.section.group-title.ini #89DDFF —
source.cs meta.class.identifier storage.type #4EC9B0 —
source.cs meta.method.identifier entity.name.function #F07178 —
source.cs meta.method-call meta.method, source.cs entity.name.function #82AAFF —
source.cs storage.type #4EC9B0 —
source.cs meta.method.return-type #4EC9B0 —
source.cs meta.preprocessor #464B5D —
source.cs entity.name.type.namespace #BABED8 —
meta.jsx.children, SXNested #BABED8 —
support.class.component #4EC9B0 —
source.cpp meta.block variable.other #BABED8 —
source.python meta.member.access.python #F07178 —
source.python meta.function-call.python, meta.function-call.arguments #82AAFF —
entity.name.function.call #82AAFF —
source.php support.other.namespace, source.php meta.use support.class #BABED8 —
constant.keyword #89DDFF italic
entity.name.function #82AAFF —
markup.underline — underline
keyword.control #89DDFF italic
variable.parameter — italic
variable.parameter.function.language.special.self.python #F07178 italic
constant.character.format.placeholder.other.python #F78C6C —
markup.quote #89DDFF italic
markup.fenced_code.block #BABED890 —
punctuation.definition.quote #FF9CAC —
meta.structure.dictionary.json support.type.property-name.json #C792EA —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #4EC9B0 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F78C6C —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F07178 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #916B53 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #82AAFF —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FF9CAC —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
token.error-token #F44747 —
token.debug-token #B267E6 —
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 } ! ` ;
}
Material Ocean | Coding Theme