RubyBlue Theme

Name: RubyBlue Theme
Author: hirofumii

Publisher: hirofumiiThemes in package: 1

Dark, high contrast theme designed for readability.

GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

RubyBlue Theme — Ruby Blue

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#16314a
activityBar.activeBorder#66d9ef
activityBar.background#1c2a38
activityBar.border#112435
activityBar.foreground#f8f8f2
activityBarBadge.background#66d9ef
activityBarBadge.foreground#112435
badge.background#3e7087
badge.foreground#f8f8f2
breadcrumb.activeSelectionForeground#66d9ef
breadcrumb.background#112435
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#999999
breadcrumbPicker.background#0d1b28
button.background#3e7087
button.foreground#f8f8f2
button.hoverBackground#4a8099
button.secondaryBackground#2a4a5e
button.secondaryForeground#f8f8f2
button.secondaryHoverBackground#345566
checkbox.background#0d1b28
checkbox.border#3e7087
checkbox.foreground#f8f8f2
debugToolBar.background#0d1b28
debugToolBar.border#3e7087
descriptionForeground#999999
dropdown.background#0d1b28
dropdown.border#3e7087
dropdown.foreground#f8f8f2
dropdown.listBackground#0d1b28
editor.background#112435
editor.findMatchBackground#3e7087
editor.findMatchBorder#F4C20B80
editor.findMatchHighlightBackground#F4C20B40
editor.findMatchHighlightBorder#F4C20B20
editor.findRangeHighlightBackground#F4C20B40
editor.focusedStackFrameHighlightBackground#A6E22E20
editor.foreground#f8f8f2
editor.inactiveSelectionBackground#3e708750
editor.lineHighlightBackground#16314a
editor.lineHighlightBorder#16314a
editor.rangeHighlightBackground#3e708750
editor.selectionBackground#3e708780
editor.selectionForeground#f8f8f2
editor.selectionHighlightBackground#3e708750
editor.stackFrameHighlightBackground#F4C20B20
editor.wordHighlightBackground#3e708750
editor.wordHighlightStrongBackground#3e708770
editorBracketMatch.background#3e708750
editorBracketMatch.border#66d9ef
editorCodeLens.foreground#999999
editorCursor.foreground#f8f8f2
editorError.foreground#f44747
editorGroup.border#3e7087
editorGroup.dropBackground#3e708750
editorGroupHeader.noTabsBackground#0d1b28
editorGroupHeader.tabsBackground#0d1b28
editorGroupHeader.tabsBorder#112435
editorGutter.addedBackground#A6E22E
editorGutter.background#112435
editorGutter.deletedBackground#f44747
editorGutter.modifiedBackground#F4C20B
editorHint.foreground#999999
editorHoverWidget.background#0d1b28
editorHoverWidget.border#3e7087
editorHoverWidget.foreground#f8f8f2
editorIndentGuide.activeBackground1#999999
editorIndentGuide.background1#555555
editorInfo.foreground#66d9ef
editorLink.activeForeground#66d9ef
editorOverviewRuler.border#112435
editorOverviewRuler.currentContentForeground#66d9ef
editorOverviewRuler.incomingContentForeground#A6E22E
editorRuler.foreground#555555
editorSuggestWidget.background#0d1b28
editorSuggestWidget.border#3e7087
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.highlightForeground#66d9ef
editorSuggestWidget.selectedBackground#3e7087
editorWarning.foreground#F4C20B
editorWhitespace.foreground#555555
editorWidget.background#0d1b28
editorWidget.border#3e7087
editorWidget.foreground#f8f8f2
errorForeground#f44747
extensionButton.prominentBackground#3e7087
extensionButton.prominentForeground#f8f8f2
extensionButton.prominentHoverBackground#4a8099
focusBorder#3e7087
foreground#f8f8f2
gitDecoration.conflictingResourceForeground#F08047
gitDecoration.deletedResourceForeground#f44747
gitDecoration.ignoredResourceForeground#555555
gitDecoration.modifiedResourceForeground#F4C20B
gitDecoration.submoduleResourceForeground#66d9ef
gitDecoration.untrackedResourceForeground#A6E22E
input.background#0d1b28
input.border#3e7087
input.foreground#f8f8f2
input.placeholderForeground#888888
inputOption.activeBackground#3e7087
inputOption.activeBorder#66d9ef
inputOption.activeForeground#f8f8f2
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#f44747
inputValidation.infoBackground#16314a
inputValidation.infoBorder#66d9ef
inputValidation.warningBackground#5a4d1d
inputValidation.warningBorder#F4C20B
list.activeSelectionBackground#2a4a5e
list.activeSelectionForeground#f8f8f2
list.dropBackground#16314a
list.errorForeground#f44747
list.focusForeground#f8f8f2
list.highlightForeground#66d9ef
list.hoverBackground#1c2a38
list.hoverForeground#f8f8f2
list.inactiveFocusBackground#16314a
list.inactiveSelectionBackground#16314a
list.inactiveSelectionForeground#f8f8f2
list.invalidItemForeground#f44747
list.warningForeground#F4C20B
merge.border#3e7087
notificationCenter.border#3e7087
notificationCenterHeader.background#0d1b28
notificationCenterHeader.foreground#f8f8f2
notificationLink.foreground#66d9ef
notifications.background#0d1b28
notifications.border#3e7087
notifications.foreground#f8f8f2
notificationToast.border#3e7087
panel.background#0d1b28
panel.border#1e3a52
panelTitle.activeBorder#66d9ef
panelTitle.activeForeground#f8f8f2
panelTitle.border#112435
panelTitle.inactiveForeground#999999
peekView.border#3e7087
peekViewEditor.background#0d1b28
peekViewEditor.matchHighlightBackground#3e7087
peekViewEditorGutter.background#0d1b28
peekViewEditorStickyScroll.background#16314a
peekViewEditorStickyScrollGutter.background#16314a
peekViewResult.background#0d1b2850
peekViewResult.fileForeground#f8f8f2
peekViewResult.lineForeground#999999
peekViewResult.matchHighlightBackground#3e7087
peekViewResult.selectionBackground#3e7087
peekViewResult.selectionForeground#f8f8f2
peekViewTitle.background#112435
peekViewTitleDescription.foreground#999999
peekViewTitleLabel.foreground#f8f8f2
pickerGroup.border#3e7087
pickerGroup.foreground#66d9ef
problemsErrorIcon.foreground#f44747
problemsInfoIcon.foreground#66d9ef
problemsWarningIcon.foreground#F4C20B
progressBar.background#66d9ef
quickInput.background#0d1b28
quickInput.foreground#f8f8f2
quickInputList.focusBackground#3e7087
scrollbar.shadow#000000
scrollbarSlider.activeBackground#3e708780
scrollbarSlider.background#3e708750
scrollbarSlider.hoverBackground#3e708760
sideBar.background#0d1b28
sideBar.border#2a4a5e
sideBar.foreground#f8f8f2
sideBarSectionHeader.background#112435
sideBarSectionHeader.border#3e7087
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#f8f8f2
statusBar.background#1c2a38
statusBar.border#112435
statusBar.debuggingBackground#F4C20B
statusBar.debuggingForeground#112435
statusBar.foreground#f8f8f2
statusBar.noFolderBackground#0d1b28
statusBar.noFolderForeground#f8f8f2
statusBarItem.activeBackground#3e7087
statusBarItem.hoverBackground#3e7087
statusBarItem.prominentBackground#3e7087
statusBarItem.prominentHoverBackground#4a8099
statusBarItem.remoteBackground#66d9ef
statusBarItem.remoteForeground#112435
statusBarItem.remoteHoverBackground#82C6E0
statusBarItem.remoteHoverForeground#112435
symbolIcon.arrayForeground#F08047
symbolIcon.booleanForeground#F4C20B
symbolIcon.classForeground#A6E22E
symbolIcon.colorForeground#66d9ef
symbolIcon.constantForeground#F4C20B
symbolIcon.constructorForeground#A6E22E
symbolIcon.enumeratorForeground#F4C20B
symbolIcon.enumeratorMemberForeground#66d9ef
symbolIcon.eventForeground#F4C20B
symbolIcon.fieldForeground#7BD827
symbolIcon.fileForeground#f8f8f2
symbolIcon.folderForeground#66d9ef
symbolIcon.functionForeground#A6E22E
symbolIcon.interfaceForeground#82C6E0
symbolIcon.keyForeground#66d9ef
symbolIcon.keywordForeground#82C6E0
symbolIcon.methodForeground#A6E22E
symbolIcon.moduleForeground#F08047
symbolIcon.namespaceForeground#82C6E0
symbolIcon.nullForeground#F4C20B
symbolIcon.numberForeground#66d9ef
symbolIcon.objectForeground#F08047
symbolIcon.operatorForeground#82C6E0
symbolIcon.packageForeground#F08047
symbolIcon.propertyForeground#7BD827
symbolIcon.referenceForeground#66d9ef
symbolIcon.snippetForeground#f8f8f2
symbolIcon.stringForeground#F08047
symbolIcon.structForeground#A6E22E
symbolIcon.textForeground#f8f8f2
symbolIcon.typeParameterForeground#FD971F
symbolIcon.unitForeground#66d9ef
symbolIcon.variableForeground#7BD827
tab.activeBackground#112435
tab.activeBorderTop#66d9ef
tab.activeForeground#f8f8f2
tab.border#112435
tab.hoverBackground#16314a
tab.hoverForeground#f8f8f2
tab.inactiveBackground#0d1b28
tab.inactiveForeground#999999
tab.lastPinnedBorder#3e7087
tab.unfocusedActiveBorder#3e7087
tab.unfocusedActiveBorderTop#3e7087
tab.unfocusedActiveForeground#cccccc
tab.unfocusedInactiveForeground#777777
terminal.background#112435
terminal.foreground#f8f8f2
terminal.selectionBackground#3e7087
terminalCursor.background#112435
terminalCursor.foreground#f8f8f2
textBlockQuote.background#16314a
textBlockQuote.border#3e7087
textCodeBlock.background#0d1b28
textLink.activeForeground#82C6E0
textLink.foreground#66d9ef
textPreformat.foreground#F08047
titleBar.activeBackground#1c2a38
titleBar.activeForeground#f8f8f2
titleBar.border#112435
titleBar.inactiveBackground#0d1b28
titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#f8f8f2ff	—
comment	#999999	—
string	#F08047	—
constant.numeric	#82C6E0	—
constant.language	#F4C20B	—
constant.character, constant.other	#F4C20B	—
variable	#7BD827	—
keyword	#82C6E0	—
storage	#ff00ff
storage.type	#ff00ff
entity.name.class	#A6E22E	underline
entity.other.inherited-class	#A6E22E	italic underline
entity.name.function	#A6E22E
variable.parameter	#FD971F
entity.name.tag	#7BD827
entity.other.attribute-name	#66d9ef
meta.selector.css entity.name.tag	#7BD827
meta.selector.css entity.other.attribute-name.id	#F08047	—
meta.selector.css entity.other.attribute-name.class	#A6E22E
support.function	#ff9d00
support.constant	#66D9EF
support.constant.property-value	#F4C20B
support.type, support.class	#82C6E0
support.type.vendored.property-name	#ff00ff
support.function.timing-function	#fff
support.other.variable	—
invalid	#f44747
invalid.deprecated	#f44747	—
meta.structure.dictionary.json string.quoted.double.json	#F08047	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672	—
markup.inserted	#A6E22E	—
markup.changed	#E6DB74	—
markup.deleted.git_gutter	#F92672	—
markup.inserted.git_gutter	#A6E22E	—
markup.changed.git_gutter	#E6DB74	—
markup.ignored.git_gutter	#75715E	—
markup.untracked.git_gutter	#75715E	—
markup.heading	#82C6E0	—
markup.inline.raw	#999	—
string.other.link.description.markdown	#F4C20B	—
markup.underline.link	#F08047	—
markup.list	#7BD827	—
meta.tag	#FFFFFF	—
meta.tag.sgml.doctype.html, punctuation.section.embedded	#ff00ff	—
tag.html, tag.xml	#7BD827	—
constant.numeric.line-number.find-in-files - match	#AE81FF	—
entity.name.filename.find-in-files	#E6DB74	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}