Skip to main content
Home Theme VS Code Ruby Sea A minimal, dark theme for VS Code with vibrant red and blue accents.
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 #0e1b2a activityBar.border #0e1b2a activityBar.dropBorder #214b78 activityBar.foreground #6592b3 activityBar.inactiveForeground #6592b399 activityBarBadge.background #ff4c5a tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #a2aabc — comment, punctuation.definition.comment #6592b399 italic variable, string constant.other.placeholder, source #a2aabc — constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig #ff4c5a —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#0e1b2a
badge.background #ff4c5a
badge.foreground #122236
breadcrumb.activeSelectionForeground #c5d3e0
breadcrumb.background #122236
breadcrumb.focusForeground #c5d3e0
breadcrumb.foreground #6592b3
breadcrumbPicker.background #0e1b2a
button.background #ff4c5a
button.foreground #0e1b2a
button.hoverBackground #ff4c5a99
debugExceptionWidget.background #214b78
debugExceptionWidget.border #214b78
debugToolBar.background #214b78
debugToolBar.border #214b78
descriptionForeground #c5d3e0
diffEditor.border #214b78
diffEditor.insertedTextBackground #62c6ff22
diffEditor.insertedTextBorder #62c6ff44
diffEditor.removedTextBackground #ff2d3b22
diffEditor.removedTextBorder #ff2d3b44
dropdown.background #214b78
dropdown.border #214b78
dropdown.foreground #c5d3e0
dropdown.listBackground #0e1b2a
editor.background #122236
editor.findMatchBackground #6592b377
editor.findMatchBorder #ff4c5a
editor.findMatchHighlightBackground #6592b377
editor.findRangeHighlightBackground #6592b377
editor.foreground #a2aabc
editor.hoverHighlightBackground #6592b377
editor.inactiveSelectionBackground #6592b377
editor.lineHighlightBackground #214b78
editor.lineHighlightBorder #214b78
editor.rangeHighlightBackground #214b78
editor.selectionBackground #214b78
editor.selectionForeground #a2aabc
editor.selectionHighlightBackground #214b78
editor.wordHighlightBackground #6592b377
editor.wordHighlightStrongBackground #6592b377
editorBracketMatch.background #6592b355
editorBracketMatch.border #ff4c5a
editorCodeLens.foreground #c5d3e0
editorCursor.background #122236
editorCursor.foreground #ff4c5a
editorError.foreground #ff2d3b
editorGroup.border #214b78
editorGroup.dropBackground #214b78
editorGroup.emptyBackground #122236
editorGroup.focusedEmptyBorder #122236
editorGroupHeader.noTabsBackground #122236
editorGroupHeader.tabsBackground #0e1b2a
editorGroupHeader.tabsBorder #0e1b2a
editorGutter.addedBackground #62c6ff
editorGutter.background #122236
editorGutter.deletedBackground #ff2d3b
editorGutter.modifiedBackground #3da5f6
editorHint.foreground #ff4c5a
editorHoverWidget.background #214b78
editorHoverWidget.border #214b78
editorIndentGuide.activeBackground #6592b377
editorIndentGuide.background #6592b333
editorInfo.foreground #3da5f6
editorInlayHint.background #0e1b2a
editorInlayHint.foreground #6592b399
editorLineNumber.activeForeground #6592b3
editorLineNumber.foreground #6592b355
editorLink.activeForeground #ff4c5a
editorMarkerNavigation.background #214b78
editorMarkerNavigationError.background #ff2d3b
editorMarkerNavigationInfo.background #3da5f6
editorMarkerNavigationWarning.background #ff4c5a
editorOverviewRuler.addedForeground #62c6ff
editorOverviewRuler.border #214b78
editorOverviewRuler.bracketMatchForeground #ff4c5a
editorOverviewRuler.commonContentForeground #214b78
editorOverviewRuler.currentContentForeground #3da5f6
editorOverviewRuler.deletedForeground #ff2d3b
editorOverviewRuler.errorForeground #ff2d3b
editorOverviewRuler.findMatchForeground #ff4c5a
editorOverviewRuler.incomingContentForeground #62c6ff
editorOverviewRuler.infoForeground #3da5f6
editorOverviewRuler.modifiedForeground #3da5f6
editorOverviewRuler.rangeHighlightForeground #6592b3
editorOverviewRuler.selectionHighlightForeground #6592b3
editorOverviewRuler.warningForeground #ffd580
editorOverviewRuler.wordHighlightForeground #6592b3
editorOverviewRuler.wordHighlightStrongForeground #6592b3
editorPane.background #122236
editorRuler.foreground #214b78
editorSuggestWidget.background #214b78
editorSuggestWidget.border #214b78
editorSuggestWidget.foreground #c5d3e0
editorSuggestWidget.highlightForeground #ff4c5a
editorSuggestWidget.selectedBackground #122236
editorWarning.foreground #ffd580
editorWhitespace.foreground #6592b377
editorWidget.background #0e1b2a
editorWidget.border #0e1b2a
errorForeground #ff2d3b
extensionButton.prominentBackground #ff4c5a
extensionButton.prominentForeground #122236
extensionButton.prominentHoverBackground #ff4c5a99
focusBorder #6592b377
foreground #6592b3
gitDecoration.conflictingResourceForeground #ff2d3b
gitDecoration.deletedResourceForeground #ff2d3b
gitDecoration.ignoredResourceForeground #6592b377
gitDecoration.modifiedResourceForeground #3da5f6
gitDecoration.untrackedResourceForeground #62c6ff
input.background #122236
input.border #214b78
input.foreground #c5d3e0
input.placeholderForeground #6592b377
inputOption.activeBorder #214b78
inputValidation.errorBackground #122236
inputValidation.errorBorder #ff2d3b
inputValidation.errorForeground #ff2d3b
inputValidation.infoBackground #122236
inputValidation.infoBorder #3da5f6
inputValidation.infoForeground #3da5f6
inputValidation.warningBackground #122236
inputValidation.warningBorder #ffd580
inputValidation.warningForeground #ffd580
list.activeSelectionBackground #214b78
list.activeSelectionForeground #c5d3e0
list.dropBackground #214b78
list.errorForeground #ff2d3b
list.focusBackground #214b78
list.focusForeground #c5d3e0
list.highlightForeground #ff4c5a
list.hoverBackground #214b78
list.hoverForeground #c5d3e0
list.inactiveFocusBackground #214b78
list.inactiveSelectionBackground #214b78
list.inactiveSelectionForeground #c5d3e0
list.invalidItemForeground #ff2d3b
list.warningForeground #ffd580
listFilterWidget.background #214b78
listFilterWidget.noMatchesOutline #ff2d3b
listFilterWidget.outline #214b78
menu.background #0e1b2a
menu.foreground #6592b3
menu.selectionBackground #214b78
menu.selectionForeground #c5d3e0
menubar.selectionBackground #214b78
menubar.selectionForeground #c5d3e0
merge.border #6592b3
merge.commonContentBackground #214b7855
merge.commonHeaderBackground #214b7877
merge.currentContentBackground #3da5f622
merge.currentHeaderBackground #3da5f677
merge.incomingContentBackground #62c6ff22
merge.incomingHeaderBackground #62c6ff77
notificationCenter.border #0e1b2a
notificationCenterHeader.background #0e1b2a
notificationCenterHeader.foreground #c5d3e0
notificationLink.foreground #c5d3e0
notifications.background #0e1b2a
notifications.border #0e1b2a
notifications.foreground #c5d3e0
notificationToast.border #0e1b2a
panel.background #0e1b2a
panel.border #122236
panel.dropBorder #214b78
panelInput.border #6592b3
panelSection.border #214b78
panelSection.dropBackground #214b78
panelSectionHeader.background #122236
panelSectionHeader.foreground #ff4c5a
panelTitle.activeBorder #ff4c5a
panelTitle.activeForeground #c5d3e0
panelTitle.inactiveForeground #6592b3
peekView.border #ff4c5a
peekViewEditor.background #214b78
peekViewEditor.matchHighlightBackground #6592b3
peekViewEditor.matchHighlightBorder #ff4c5a
peekViewEditorGutter.background #122236
peekViewResult.background #214b78
peekViewResult.fileForeground #6592b3
peekViewResult.lineForeground #c5d3e0
peekViewResult.matchHighlightBackground #ff4c5a33
peekViewResult.selectionBackground #214b78
peekViewResult.selectionForeground #c5d3e0
peekViewTitle.background #214b78
peekViewTitleDescription.foreground #6592b3
peekViewTitleLabel.foreground #6592b3
pickerGroup.border #214b78
pickerGroup.foreground #ff4c5a
progressBar.background #ff4c5a
scrollbar.shadow #00030F
scrollbarSlider.activeBackground #6592b377
scrollbarSlider.background #6592b355
scrollbarSlider.hoverBackground #6592b399
selection.background #6592b377
settings.checkboxBackground #214b78
settings.checkboxBorder #214b78
settings.checkboxForeground #c5d3e0
settings.dropdownBackground #214b78
settings.dropdownBorder #214b78
settings.dropdownForeground #c5d3e0
settings.dropdownListBorder #214b78
settings.headerForeground #c5d3e0
settings.modifiedItemIndicator #3da5f6
settings.numberInputBackground #214b78
settings.numberInputBorder #214b78
settings.numberInputForeground #c5d3e0
settings.textInputBackground #214b78
settings.textInputBorder #214b78
settings.textInputForeground #c5d3e0
sideBar.background #0e1b2a
sideBar.foreground #6592b3
sideBarSectionHeader.background #122236
sideBarSectionHeader.border #0e1b2a
sideBarSectionHeader.foreground #ff4c5a
sideBarTitle.foreground #ff4c5a
statusBar.background #0e1b2a
statusBar.border #0e1b2a
statusBar.debuggingBackground #0e1b2a
statusBar.debuggingForeground #6592b3
statusBar.foreground #6592b3
statusBar.noFolderBackground #0e1b2a
statusBar.noFolderForeground #6592b3
statusBarItem.activeBackground #214b78
statusBarItem.hoverBackground #122236
statusBarItem.remoteBackground #0e1b2a
statusBarItem.remoteForeground #6592b3
tab.activeBackground #122236
tab.activeBorder #ff4c5a
tab.activeBorderTop #0e1b2a
tab.activeForeground #c5d3e0
tab.border #0e1b2a
tab.hoverBackground #214b78
tab.hoverBorder #ff4c5a
tab.inactiveBackground #0e1b2a
tab.inactiveForeground #c5d3e077
tab.unfocusedActiveBackground #122236
tab.unfocusedActiveBorder #ff4c5a77
tab.unfocusedActiveBorderTop #122236
tab.unfocusedActiveForeground #c5d3e0
tab.unfocusedHoverBackground #122236
tab.unfocusedHoverBorder #ff4c5a77
tab.unfocusedInactiveForeground #c5d3e077
terminal.ansiBlack #214b78
terminal.ansiBlue #3da5f6
terminal.ansiBrightBlack #444a5e
terminal.ansiBrightBlue #3da5f6
terminal.ansiBrightCyan #3da5f6
terminal.ansiBrightGreen #62c6ff
terminal.ansiBrightMagenta #ff4c5a
terminal.ansiBrightRed #ff2d3b
terminal.ansiBrightWhite #a2aabc
terminal.ansiBrightYellow #ff4c5a
terminal.ansiCyan #3da5f6
terminal.ansiGreen #62c6ff
terminal.ansiMagenta #ff4c5a
terminal.ansiRed #ff2d3b
terminal.ansiWhite #a2aabc
terminal.ansiYellow #ff4c5a
terminal.background #0e1b2a
terminal.border #0e1b2a
terminal.foreground #a2aabc
terminal.selectionBackground #6592b333
terminalCursor.background #ff4c5a
terminalCursor.foreground #ff4c5a
textBlockQuote.background #214b78
textBlockQuote.border #214b78
textCodeBlock.background #0e1b2a
textLink.activeForeground #ff4c5a
textLink.foreground #ff4c5a
textPreformat.foreground #c5d3e0
textSeparator.foreground #c5d3e0
titleBar.activeBackground #0e1b2a
titleBar.activeForeground #c5d3e0
titleBar.border #0e1b2a
titleBar.inactiveBackground #0e1b2a
titleBar.inactiveForeground #6592b3
tree.indentGuidesStroke #214b78
walkThrough.embeddedEditorBackground #0e1b2a
welcomePage.buttonBackground #214b78
welcomePage.buttonHoverBackground #214b7899
widget.shadow #00030F keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape #ff4c5a —
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks #a2aabc —
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe #ff6b57 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object #3da5f6 —
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter #ffd580 —
meta.block variable.other #a2aabc —
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property #a2aabc —
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks #62c6ff —
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key #ffd580 —
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite #3da5f6 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name, support.variable.object.node, support.variable.object.process #3da5f6 —
entity.name.module.js, variable.import.parameter.js #ff2d3b —
variable.language #3da5f6 italic
entity.name.method.js #3da5f6 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #3da5f6 —
entity.other.attribute-name #ff6b57 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #ff6b57 —
entity.other.attribute-name.class, punctuation.definition.entity.css #ff6b57 —
source.sass keyword.control #3da5f6 —
constant.character.escape #3da5f6 —
*url*, *link*, *uri* — underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag #3da5f6 —
source.js constant.other.object.key.js string.unquoted.label.js #ff2d3b italic
source.json meta.structure.dictionary.json support.type.property-name.json #3da5f6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #3da5f6 —
source.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 #ff6b57 —
source.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 #3da5f6 —
source.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 #ff6b57 —
source.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 #3da5f6 —
source.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 #ff6b57 —
source.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 #3da5f6 —
source.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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ff6b57 —
markup.italic #ff2d3b italic
markup.underline #ff4c5a underline
markup.strike #ff4c5a italic
markup.quote #3da5f6 italic
text.html.markdown, punctuation.definition.list_item.markdown #a2aabc —
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown #3da5f6 —
text.html.markdown meta.dummy.line-break #a2aabc —
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown #62c6ff —
markup.quote, punctuation.definition.blockquote.markdown #3da5f6 italic
string.other.link.title.markdown #ff4c5a underline
markup.raw.block.fenced.markdown #c5d3e0 —
punctuation.definition.fenced.markdown, variable.language.fenced.markdown #a2aabc —
variable.language.fenced.markdown #a2aabc
token.error-token #ff2d3b —
token.debug-token #ff4c5a —
storage.type.error.go #3da5f6 —
punctuation.other.period.go #ff6b57 —
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 } !` ;
}
Ruby Sea | Coding Theme