Ruby Theme

Name: Ruby Theme
Author: anx450z

Publisher: anx450zThemes in package: 12

Set of Dark and Light themes for vs code

Open in VS Code GitHub

Color themes

VS Code preview

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

Ruby Theme — Ruby Daylight No font style

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f0f0f0
activityBar.border#f0f0f0
activityBar.foreground#000000
activityBarBadge.background#275b97
button.background#00489b
button.foreground#ffffff
dropdown.background#f0f0f0
dropdown.border#b2b2b2
dropdown.listBackground#f0f0f0
editor.background#ffffff
editor.foreground#000000
editor.lineHighlightBackground#f0f0f0
editor.lineHighlightBorder#f0f0f0
editor.selectionBackground#0050acaa
editor.selectionHighlightBackground#213f67d7
editorGroup.border#f0f0f0
editorGroupHeader.noTabsBackground#f0f0f0
editorGroupHeader.tabsBackground#f0f0f0
editorGroupHeader.tabsBorder#f0f0f0
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#babbbc
editorSuggestWidget.highlightForeground#275b97
editorSuggestWidget.selectedBackground#e1e1e1
editorWidget.background#f0f0f0
editorWidget.border#000000
focusBorder#f0f0f000
foreground#000000
input.background#ffffff
input.border#b2b2b2
inputOption.activeBorder#000000
inputOption.activeForeground#000000
list.activeSelectionBackground#0046972f
list.activeSelectionForeground#000000
list.focusBackground#dfdfdf
list.focusForeground#275b97
list.highlightForeground#275b97
list.hoverBackground#dfdfdf
list.hoverForeground#275b97
list.inactiveSelectionBackground#ffffff
list.inactiveSelectionForeground#275b97
notificationCenter.border#f0f0f0
notificationCenterHeader.background#f0f0f0
notifications.background#f0f0f0
notifications.border#f0f0f0
notificationToast.border#f0f0f0
panel.border#275b97
scrollbar.shadow#f0f0f0
sideBar.background#f0f0f0
sideBar.foreground#000000
sideBarSectionHeader.background#f0f0f0
statusBar.background#f0f0f0
statusBar.border#f0f0f0
statusBar.debuggingBackground#f0f0f0
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#f0f0f0
statusBar.noFolderForeground#000000
tab.activeBackground#ffffff
tab.activeBorderTop#3a83d7
tab.activeForeground#000000
tab.border#f0f0f0
tab.hoverForeground#3a83d7
tab.inactiveBackground#f0f0f0
terminal.background#f3f3f3
titleBar.activeBackground#f0f0f0
titleBar.activeForeground#000000
titleBar.border#f0f0f0
titleBar.inactiveBackground#f0f0f0
titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation, punctuation.section.embedded, meta.function-call, punctuation.definition.constant.hashkey, keyword.operator.assignment.ruby, entity.name.function.call.cpp, entity.name.function.member.cpp, variable.other.property, meta.brace.round.ts, meta.brace.square.ts, keyword.operator.type.ts, keyword.operator.type.annotation.ts, meta.function-call.ts, keyword.operator.assignment.ts, keyword.operator.relational.ts, keyword.operator.increment.ts, keyword.operator.bitwise.shift.ts, keyword.operator.bitwise.ts, punctuation.separator.key-value.ts, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.bitwise.shift.js, keyword.operator.bitwise.js, variable.other.object.property.js, support.variable.property.js, meta.brace.round.js, meta.brace.square.js, keyword.generator.asterisk.js, keyword.operator.combinator.css, punctuation.definition.constant.css, punctuation.separator.key-value.mapping.yaml, string.unquoted.plain.out.yaml, source.sql, constant.other.table-name.sql, meta.function.call.rust	#041a36	—
punctuation.definition.comment, comment	#837c68	—
comment.line.keyword.yard, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard	#000d36	—
support.function.kernel.ruby, keyword.other, keyword.operator, keyword.control, keyword.other.special-method, punctuation.separator.key-value, variable.language, storage.type.variable, storage.modifier, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.heading.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.enum.ts, support.constant.media.css, support.constant.property-value.css, support.constant.font-name.css, entity.name.type.primitive.rust, entity.name.type.numeric.rust	#016999	—
keyword.operator	#dd0000	—
constant.other.symbol.hashkey.parameter.function, variable.other, comment.line.parameter.yard, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standasrd-color-name.css, constant.other.database-name.sql	#1900ff	—
entity.other.attribute-name.html	#266c92	—
variable.other.readwrite.ts, variable.other.readwrite.js, variable.parameter	#da3300	—
variable.language.this, variable.other.readwrite	#000000	—
punctuation.definition.string.begin, punctuation.definition.string.end, string	#005f0e	—
meta.embedded.line	#6000b9	—
string.regexp, punctuation.section.regexp	#4e6d14	—
constant.numeric, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css	#272727	—
meta.class.ruby, entity.name.type.class.ruby, entity.other.inherited-class.ruby, entity.name.type.module, meta.module.ruby, comment.line.type.yard, entity.name.scope-resolution.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.function.call.cpp, markup.heading, constant.other.reference.link.markdown, string.other.link.title.markdown, entity.name.namespace.rust	#003de4	—
meta.class, entity.name.type.enum.ts, variable.other.readwrite.alias.ts, entity.name.type.enum.js, variable.other.readwrite.alias.js	#7500d4	—
entity.other.inherited-class.ruby	#01880c	—
support.class.ruby	#008f37	—
variable.other.constant	#0c52a3	—
constant.other.symbol.ruby, constant.language.symbol, constant.other.symbol.hashkey.ruby, markup.underline.link.markdown, meta.link.inline.markdown, support.type.property-name.json, meta.object-literal.key.ts, meta.object-literal.key.js, meta.property-name.css	#86003f	—
entity.name.tag.html, punctuation.terminator.rule.css, punctuation.separator.key-value.css, entity.name.tag.yaml	#0085a7ef	—
variable.other.readwrite.class, variable.other.readwrite.instance, punctuation.definition.variable, variable.other.readwrite.global	#ff0095	—
constant.language	#005281	—
variable, markup.bold, punctuation.definition.bold.markdown, variable.object.property.ts, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js	#18b4e4	—
storage.type.ts, support.type.primitive.ts, storage.type.class.ts, storage.type.class.js, storage.type.function.js, storage.type.js, storage.type.function.arrow.js, constant.language.null.js	#bd1f06	—
meta.selector.css, meta.function.method.with-arguments.ruby	#0045db	—
meta.function.method.without-arguments.ruby	#0045db	—
variable.other.property, meta.function-call	#2d4881	—
meta.attribute.rust	#55007c	—
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff	#18B5E4	—
markup.deleted, punctuation.definition.deleted.diff	#a31414	—
markup.changed	#5719a7	—
markup.inserted, punctuation.definition.inserted.diff	#129127	—
token.info-token	#1451b9	—
token.warn-token	#4d19c5	—
token.error-token	#d10000	—
token.debug-token	#700cb8	—

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