Yellowed

Name: Yellowed
Author: Gaël Lopes Da Silva

Publisher: Gaël Lopes Da SilvaThemes in package: 2

A yellow theme for vscode

Open in VS Code GitHub

Color themes

VS Code preview

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

Yellowed — Yellowed Reborn

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.activeBorder#0078d4
activityBar.background#181818
activityBar.border#ffffff15
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#ffffff80
activityBarBadge.background#0078d4
activityBarBadge.foreground#ffffff
badge.background#0078d4
badge.foreground#ffffff
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#0078d4e6
button.secondaryBackground#ffffff0f
button.secondaryForeground#cccccc
button.secondaryHoverBackground#ffffff15
checkbox.background#313131
checkbox.border#ffffff1f
debugToolBar.background#181818
descriptionForeground#8b949e
dropdown.background#313131
dropdown.border#ffffff1f
dropdown.foreground#cccccc
dropdown.listBackground#1f1f1f
editor.background#1f1f1f
editor.findMatchBackground#0d56ca99
editor.findMatchBorder#95c3fa88
editor.findMatchHighlightBackground#0d56ca66
editor.findRangeHighlightBackground#0d56ca22
editor.foreground#FFFFFF
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#303030
editor.selectionBackground#404040
editor.selectionHighlightBackground#add6ff26
editorCursor.background#000000
editorCursor.foreground#ffd900
editorGroup.border#ffffff17
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#ffffff15
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#0078d4
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorInlayHint.background#8b949e1b
editorInlayHint.typeBackground#8b949e1b
editorLineNumber.activeForeground#cccccc
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWidget.background#1f1f1f
errorForeground#f85149
focusBorder#0078d4
foreground#cccccc
gitDecoration.addedResourceForeground#7bd88f
gitDecoration.conflictingResourceForeground#cca700
gitDecoration.deletedResourceForeground#c24038
gitDecoration.ignoredResourceForeground#777777
gitDecoration.modifiedResourceForeground#75c0fc
gitDecoration.submoduleResourceForeground#777777
gitDecoration.untrackedResourceForeground#777777
gitlens.gutterBackgroundColor#303030
gitlens.gutterForegroundColor#f6f6f666
gitlens.gutterUncommittedForegroundColor#666666
gitlens.lineHighlightBackgroundColor#7bd88f22
gitlens.lineHighlightOverviewRulerColor#7bd88f22
icon.foreground#cccccc
input.background#2a2a2a
input.border#ffffff1f
input.foreground#cccccc
input.placeholderForeground#ffffff79
inputOption.activeBackground#2489db82
inputOption.activeBorder#2488db
keybindingLabel.foreground#cccccc
list.activeSelectionBackground#323232
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
menu.background#1f1f1f
menu.border#454545
menu.foreground#cccccc
menu.separatorBackground#454545
notificationCenterHeader.background#1f1f1f
notificationCenterHeader.foreground#cccccc
notifications.background#1f1f1f
notifications.border#ffffff15
notifications.foreground#cccccc
panel.background#181818
panel.border#ffffff15
panelInput.border#ffffff15
panelTitle.activeBorder#0078d4
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#8b949e
peekViewEditor.background#1f1f1f
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#1f1f1f
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#ffffff15
pickerGroup.foreground#8b949e
ports.iconRunningProcessForeground#369432
progressBar.background#0078d4
quickInput.background#1f1f1f
quickInput.foreground#cccccc
scrollbar.shadow#000000
scrollbarSlider.activeBackground#6e768187
scrollbarSlider.background#6e768133
scrollbarSlider.hoverBackground#6e768145
settings.dropdownBackground#313131
settings.dropdownBorder#ffffff1f
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
sideBar.background#181818
sideBar.border#ffffff15
sideBar.foreground#cccccc
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#ffffff15
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#cccccc
statusBar.background#181818
statusBar.border#ffffff15
statusBar.debuggingBackground#0078d4
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0078d4
statusBar.foreground#cccccc
statusBar.noFolderBackground#1f1f1f
statusBarItem.focusBorder#0078d4
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#0078d4
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#f6f6f6
symbolIcon.booleanForeground#ff80f4
symbolIcon.classForeground#a6e22e
symbolIcon.constantForeground#ff80f4
symbolIcon.constructorForeground#65d7fd
symbolIcon.fieldForeground#fd971f
symbolIcon.functionForeground#a6e22e
symbolIcon.interfaceForeground#75c0fc
symbolIcon.methodForeground#a6e22e
symbolIcon.moduleForeground#f6f6f6
symbolIcon.namespaceForeground#f82e76
symbolIcon.propertyForeground#65d7fd
symbolIcon.stringForeground#ffee99
symbolIcon.structForeground#f6f6f6
symbolIcon.variableForeground#fd971f
tab.activeBackground#1f1f1f
tab.activeBorder#1f1f1f
tab.activeBorderTop#0078d4
tab.activeForeground#ffffff
tab.border#ffffff15
tab.hoverBackground#1f1f1f
tab.inactiveBackground#181818
tab.inactiveForeground#ffffff80
tab.lastPinnedBorder#cccccc33
tab.unfocusedActiveBorder#1f1f1f
tab.unfocusedActiveBorderTop#ffffff15
tab.unfocusedHoverBackground#6e76811a
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#0078d4
textBlockQuote.background#010409
textBlockQuote.border#ffffff14
textCodeBlock.background#6e768166
textLink.activeForeground#40a6ff
textLink.foreground#40a6ff
textSeparator.foreground#21262d
titleBar.activeBackground#181818
titleBar.activeForeground#cccccc
titleBar.border#ffffff15
titleBar.inactiveBackground#1f1f1f
titleBar.inactiveForeground#8b949e
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#ffffff0f
widget.border#ffffff15
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, emphasis, unused.comment, wildcard.comment	#6b6b6b
fenced_code.block.language.markdown, markup.inline.raw.string.markdown, punctuation.definition.char.begin.cs, punctuation.definition.char.end.cs, punctuation.definition.char.rust, punctuation.definition.comment, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.rust, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.js, punctuation.definition.string.template.end.ts	#6b6b6b	bold
entity.name.section.group-title.ini, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, string.template, string	#378b1d
constant.character, constant.language, constant.regexp, keyword.constant.bool.zig, keyword.constant.default.zig, punctuation.definition.evaluation.parens.begin.shell, punctuation.definition.evaluation.parens.end.shell, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs, punctuation.definition.interpolation.rust, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts, punctuation.section.embedded.begin.ruby, punctuation.definition.variable.shell, punctuation.section.embedded.end.ruby	#ff80f4
constant.other, support.constant.core.php	#ff80f4	bold
constant.numeric, entity.name.tag, entity.name.type.numeric.rust, keyword.other.type.php, keyword, punctuation.definition.annotation.java, punctuation.definition.block.tag.ldoc, punctuation.separator.key-value.editorconfig, punctuation.separator.key-value.html, punctuation.separator.key-value.ini, storage.modifier.mut.rust, storage.type, support.class.builtin, support.type.primitive.js.jsx, support.type.primitive.ts, support.type.primitive.tsx	#ffd900
entity.name.function.decorator.python, keyword.const.go, keyword.control, keyword.declaration.dart, keyword.function.go, keyword.import.go, keyword.operator.constructor, keyword.other, keyword.package.go, keyword.storage.zig, keyword.type.go, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, meta.separator.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.definition.strikethrough.markdown, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, storage.modifier, storage.type.alias.shell, storage.type.class.php, storage.type.class.python, storage.type.enum.c, storage.type.function.js, storage.type.function.php, storage.type.function.python, storage.type.function.shell, storage.type.function.zig, storage.type.struct.c	#ffd900	bold
constant.other.option, entity.name.function-call, entity.name.function, entity.name.tag.yaml, entity.name.type.zig, entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html, meta.function-call.generic.python, meta.property-value.css, punctuation.brackets.attribute.rust, punctuation.definition.attribute.rust, punctuation.definition.entity.ini, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, support.constant.property-value.css, support.function.any-method.lua, support.function.builtin.go, support.function.builtin.python, support.function.builtin.zig, support.function.go, support.function.kernel.ruby, support.function.magic.python, support.function	#9b9b9b	bold
constant.language.symbol.hashkey.ruby, keyword.other.definition.ini, markup.underline.link.image.markdown, meta.brace.round.js, meta.embedded.block.php, meta.embedded.line.js, meta.embedded.line.php, meta.embedded.line.ts, meta.interpolation.cs, meta.interpolation.rust, meta.section.editorconfig, punctuation.definition.metadata.markdown, storage.modifier.array.bracket.square.c, storage.modifier.import, storage.modifier.package, string.interpolated.expression.dart, string.unquoted.argument.shell, support.type.property-name.json, variable.other.normal.shell, constant.other.option, constant.other.option.dash.shell, keyword.operator.pattern.case.shell, variable.other.php	#FFFFFF
entity.name.package.go, entity.name.section.markdown, punctuation.definition.constant.markdown	#FFFFFF	bold
constant.other.symbol.hashkey.parameter.function.ruby, entity.name.variable.parameter, support.type.property-name.media.css, variable.parameter	#FFFFFF	italic
entity.other.inherited-class	#FFFFFF	underline
markup.bold.markdown	—	bold
markup.italic.markdown, markup.italic	—	italic
markup.strikethrough.markdown	—	strikethrough

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