Skip to main content
Home Theme VS Code One Ocean High Contrast The One Ocean Hight Contrast colorscheme for vscode
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 #6d5cff activityBar.background #090b10 activityBar.border #00000060 activityBar.foreground #e6eafc activityBarBadge.background #6d5cff activityBarBadge.foreground #000000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #2f8859 string #6BE247 — punctuation, constant.other.symbol #696E83 — constant.character.escape, text.html constant.character.entity.named #878EAF — constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
One Ocean High Contrast — One Ocean High Contrast
badge.background
#00000030
badge.foreground #464b5d
breadcrumb.activeSelectionForeground #6d5cff
breadcrumb.background #0a0b11
breadcrumb.focusForeground #e6eafc
breadcrumb.foreground #6a7291
breadcrumbPicker.background #090b10
button.background #717cb450
button.foreground #ffffff
debugConsole.errorForeground #f04f6a
debugConsole.infoForeground #19b6ff
debugConsole.warningForeground #f0b22d
debugToolBar.background #0f111a
diffEditor.insertedTextBackground #19b6ff20
diffEditor.removedTextBackground #ff9cac20
dropdown.background #0f111a
dropdown.border #ffffff10
editor.background #0b0c14
editor.findMatchBackground #42557b
editor.findMatchBorder #457dff
editor.findMatchHighlightBackground #6199ff2f
editor.findMatchHighlightBorder #ffffff50
editor.findRangeHighlightBackground #f0b22d30
editor.foreground #e6eafc
editor.lineHighlightBackground #00000050
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #ffffff0d
editor.selectionBackground #67769660
editor.selectionHighlightBackground #ffffff10
editor.selectionHighlightBorder #dddddd
editor.wordHighlightBackground #d2e0ff2f
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #7f848e
editorBracketMatch.background #0f111a
editorBracketMatch.border #ffcc0050
editorCursor.foreground #ffcc00
editorError.foreground #f04f6a70
editorGroup.border #00000030
editorGroup.dropBackground #f04f6a80
editorGroup.focusedEmptyBorder #f04f6a
editorGroupHeader.tabsBackground #0b0c13
editorGutter.addedBackground #a5db3960
editorGutter.deletedBackground #f04f6a60
editorGutter.modifiedBackground #8282ff60
editorHoverWidget.background #0f111a
editorHoverWidget.border #ffffff10
editorIndentGuide.activeBackground #3b3f51
editorIndentGuide.background #3b3f5170
editorInfo.foreground #8282ff70
editorLineNumber.activeForeground #6a7291
editorLineNumber.foreground #3b3f5180
editorLink.activeForeground #e6eafc
editorMarkerNavigation.background #e6eafc05
editorOverviewRuler.border #0f111a
editorOverviewRuler.errorForeground #f04f6a40
editorOverviewRuler.findMatchForeground #6d5cff
editorOverviewRuler.infoForeground #8282ff40
editorOverviewRuler.warningForeground #f0b22d40
editorRuler.foreground #3b3f51
editorSuggestWidget.background #0f111a
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #e6eafc
editorSuggestWidget.highlightForeground #6d5cff
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #f0b22d70
editorWhitespace.foreground #e6eafc40
editorWidget.background #090b10
editorWidget.border #6d5cff
editorWidget.resizeBorder #6d5cff
extensionBadge.remoteForeground #e6eafc
extensionButton.prominentBackground #a5db3990
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #a5db39
focusBorder #ffffff00
foreground #e6eafc
gitDecoration.conflictingResourceForeground #f0b22d90
gitDecoration.deletedResourceForeground #f04f6a90
gitDecoration.ignoredResourceForeground #6a729190
gitDecoration.modifiedResourceForeground #8282ff90
gitDecoration.untrackedResourceForeground #a5db3990
input.background #2f304e
input.border #ffffff10
input.foreground #e6eafc
input.placeholderForeground #e6eafc60
inputOption.activeBackground #e6eafc30
inputOption.activeBorder #e6eafc30
inputValidation.errorBorder #f04f6a
inputValidation.infoBorder #8282ff
inputValidation.warningBorder #f0b22d
list.activeSelectionBackground #2b304b
list.activeSelectionForeground #07d448
list.dropBackground #724ff080
list.focusBackground #e6eafc20
list.focusForeground #373e61
list.highlightForeground #6d5cff
list.hoverBackground #090b10
list.hoverForeground #ffffff
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #6d5cff
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #0f111a
menu.foreground #e6eafc
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #6d5cff
menu.separatorBackground #e6eafc
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #6d5cff
notificationLink.foreground #6d5cff
notifications.background #131621
notifications.foreground #e6eafc
panel.background #090b10
panel.border #5e71bc60
panelTitle.activeBorder #6d5cff
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #e6eafc
peekView.border #181928
peekViewEditor.background #2c3f4f5b
peekViewEditor.matchHighlightBackground #000000
peekViewEditor.matchHighlightBorder #873b3b
peekViewResult.background #e6eafc05
peekViewResult.selectionBackground #6a729170
peekViewTitle.background #e6eafc05
peekViewTitleDescription.foreground #e6eafc60
pickerGroup.border #ffffff1a
pickerGroup.foreground #6d5cff
progressBar.background #6d5cff
quickInput.background #0f111a
quickInput.foreground #6a7291
scrollbar.shadow #00000030
scrollbarSlider.activeBackground #6d5cff
scrollbarSlider.background #8f93a220
scrollbarSlider.hoverBackground #8f93a210
selection.background #00000080
settings.checkboxBackground #090b10
settings.checkboxForeground #e6eafc
settings.dropdownBackground #090b10
settings.dropdownForeground #e6eafc
settings.headerForeground #6d5cff
settings.modifiedItemIndicator #6d5cff
settings.numberInputBackground #090b10
settings.numberInputForeground #e6eafc
settings.textInputBackground #090b10
settings.textInputForeground #e6eafc
sideBar.background #090b10
sideBar.border #00000060
sideBar.foreground #6a7291
sideBarSectionHeader.background #090b10
sideBarSectionHeader.border #00000060
sideBarTitle.foreground #e6eafc
statusBar.background #090b10
statusBar.border #00000060
statusBar.debuggingBackground #a670ff
statusBar.debuggingForeground #ffffff
statusBar.foreground #6a7291
statusBar.noFolderBackground #0f111a
statusBarItem.activeBackground #f04f6a80
statusBarItem.hoverBackground #464b5d20
statusBarItem.remoteBackground #6d5cff
statusBarItem.remoteForeground #000000
tab.activeBackground #0f111a
tab.activeBorder #6d5cff
tab.activeForeground #ffffff
tab.activeModifiedBorder #6a7291
tab.border #0f111a
tab.inactiveBackground #0f111a
tab.inactiveForeground #6a7291
tab.inactiveModifiedBorder #904348
tab.unfocusedActiveBorder #464b5d
tab.unfocusedActiveForeground #e6eafc
tab.unfocusedActiveModifiedBorder #c05a60
tab.unfocusedInactiveModifiedBorder #904348
terminal.ansiBlack #7a7a7a
terminal.ansiBlue #0080ff
terminal.ansiBrightBlack #7b708a
terminal.ansiBrightBlue #00bcff
terminal.ansiBrightCyan #00f2ff
terminal.ansiBrightGreen #88ff00
terminal.ansiBrightMagenta #7e3bff
terminal.ansiBrightRed #ff1e69
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #f9d405
terminal.ansiCyan #00d5e0
terminal.ansiGreen #94e400
terminal.ansiMagenta #674bff
terminal.ansiRed #de1c91
terminal.ansiWhite #a89984
terminal.ansiYellow #f9e800
terminal.foreground #dddad6
terminal.selectionBackground #535363
terminalCursor.foreground #aba8ff
textLink.activeForeground #e6eafc
textLink.foreground #6d5cff
titleBar.activeBackground #090b10
titleBar.activeForeground #e6eafc
titleBar.border #00000060
titleBar.inactiveBackground #090b10
titleBar.inactiveForeground #6a7291
tree.indentGuidesStroke #3b3f51
widget.shadow #00000030 #03BBF5
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #C0C6E4 —
variable.parameter, meta.function-call.arguments #F04F6A —
constant, support.constant #B1C6FF —
keyword, modifier, variable.language.this, support.type.object, constant.language #00AEFF —
entity.name.function, support.function #8282FF —
storage.type, storage.modifier, storage.control #9466FF —
support.module, support.node #F04F6A italic
support.type, constant.other.key #F0B22D —
entity.name.type, entity.other.inherited-class, entity.other #F0B22D —
comment punctuation.definition.comment, string.quoted.docstring #464B5D —
entity.name, entity.name.type.class, support.type, support.class, meta.use #D6C634 —
variable.object.property, meta.field.declaration entity.name.function #F04F6A —
meta.definition.method entity.name.function #F04F6A —
meta.function entity.name.function #4793F0 —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #696E83 —
meta.embedded, source.groovy.embedded, meta.template.expression #E6EAFC —
entity.name.tag.yaml #F04F6A —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #F04F6A —
constant.language.json #19B6FF —
entity.other.attribute-name.class #F0B22D —
entity.other.attribute-name.id #FE6A29 —
source.css entity.name.tag #C0E700 —
support.type.property-name.css #1DB0E0 —
meta.tag, punctuation.definition.tag #19B6FF —
entity.other.attribute-name #A670FF —
punctuation.definition.entity.html #E6EAFC —
text.html.markdown meta.link.inline, meta.link.reference #F04F6A —
text.html.markdown beginning.punctuation.definition.list #19B6FF —
markup.italic #F04F6A italic
markup.bold markup.italic, markup.italic markup.bold #F04F6A italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #A5DB39 —
markup.inline.raw.string.markdown #A5DB39 —
keyword.other.definition.ini #F04F6A —
entity.name.section.group-title.ini #19B6FF —
source.cs meta.class.identifier storage.type #F0B22D —
source.cs meta.method.identifier entity.name.function #F04F6A —
source.cs meta.method-call meta.method, source.cs entity.name.function #91FF82 —
source.cs storage.type #F0B22D —
source.cs meta.method.return-type #F0B22D —
source.cs meta.preprocessor #464B5D —
source.cs entity.name.type.namespace #E6EAFC —
meta.jsx.children, SXNested #E6EAFC —
support.class.component #F0B22D —
source.cpp meta.block variable.other #657070c8 —
variable.other.property #3cb8c3c2 —
source.python meta.member.access.python #F04F6A —
source.python meta.function-call.python, meta.function-call.arguments #8282FF —
entity.name.function.call #8282FF —
source.php support.other.namespace, source.php meta.use support.class #E6EAFC —
entity.name.function #5893FF —
markup.underline — underline
markup.quote #19B6FF italic
markup.fenced_code.block #E6EAFC90 —
punctuation.definition.quote #FF9CAC —
meta.structure.dictionary.json support.type.property-name.json #A670FF —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #1DB0E0 —
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 #FE6A29 —
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 #F04F6A —
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 #EC9018 —
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 #8282FF —
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 #A670FF —
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 #A5DB39 —
punctuation.definition.comment #2F8859 —
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 } ! ` ;
}
One Ocean High Contrast | Coding Theme