Yaruna Theme Official

Name: Yaruna Theme Official
Author: Daniel Duc

Publisher: Daniel DucThemes in package: 6

✨ Official Yaruna theme by Daniel Duc.

GitHub

Color themes

VS Code preview

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

Yaruna Theme Official — Yaruna Forest

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#88d498
activityBar.background#1a2823
activityBar.border#2c3a3561
activityBar.dropBackground#52b69a40
activityBar.foreground#c8cfc8
activityBarBadge.background#88d498
activityBarBadge.foreground#1a2823
badge.background#2c3a35
badge.foreground#c8cfc8
breadcrumb.activeSelectionForeground#88d498
breadcrumb.background#1c2a25
breadcrumb.focusForeground#dce3dc
breadcrumb.foreground#c8cfc8
breadcrumbPicker.background#1a2823
button.background#a7c9574f
button.foreground#ffffff
button.hoverBackground#a7c95770
debugConsole.errorForeground#e63946
debugConsole.infoForeground#88d498
debugConsole.warningForeground#fcbf49
debugToolBar.background#1a2823
diffEditor.insertedTextBackground#d9ed9221
diffEditor.removedTextBackground#52b69a21
dropdown.background#1c2a25
dropdown.border#2c3a35
editor.background#1c2a25
editor.findMatchBackground#fcbf494f
editor.findMatchBorder#88d498
editor.findMatchHighlightBackground#fcbf4930
editor.findMatchHighlightBorder#ffffff30
editor.findRangeHighlightBackground#fcbf4930
editor.foreground#dce3dc
editor.inactiveSelectionBackground#a7c95721
editor.lineHighlightBackground#25332e
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0d
editor.selectionBackground#a7c95730
editor.selectionHighlightBackground#88d49821
editor.wordHighlightBackground#52b69a30
editor.wordHighlightStrongBackground#d9ed9230
editorBracketMatch.background#88d49830
editorBracketMatch.border#88d498
editorCursor.foreground#88d498
editorError.foreground#e6394680
editorGroup.border#2c3a3561
editorGroup.dropBackground#52b69a40
editorGroup.focusedEmptyBorder#88d498
editorGroupHeader.tabsBackground#1c2a25
editorGutter.addedBackground#d9ed9261
editorGutter.deletedBackground#52b69a61
editorGutter.modifiedBackground#88d49861
editorHoverWidget.background#1a2823
editorHoverWidget.border#2c3a35
editorIndentGuide.activeBackground#404e49
editorIndentGuide.background#404e494f
editorInfo.foreground#88d49880
editorLineNumber.activeForeground#6a7d73
editorLineNumber.foreground#404e49
editorLink.activeForeground#88d498
editorMarkerNavigation.background#1a2823
editorOverviewRuler.border#1c2a25
editorOverviewRuler.errorForeground#e6394661
editorOverviewRuler.findMatchForeground#88d498
editorOverviewRuler.infoForeground#88d49861
editorOverviewRuler.warningForeground#fcbf4961
editorRuler.foreground#404e49
editorSuggestWidget.background#1a2823
editorSuggestWidget.border#2c3a35
editorSuggestWidget.foreground#dce3dc
editorSuggestWidget.highlightForeground#88d498
editorSuggestWidget.selectedBackground#2c3a35
editorWarning.foreground#fcbf4980
editorWhitespace.foreground#404e4940
editorWidget.background#1a2823
editorWidget.border#88d498
editorWidget.resizeBorder#88d498
extensionBadge.remoteForeground#dce3dc
extensionButton.prominentBackground#d9ed928f
extensionButton.prominentForeground#1a2823
extensionButton.prominentHoverBackground#d9ed92
focusBorder#88d49840
foreground#dce3dc
gitDecoration.addedResourceForeground#d9ed92
gitDecoration.conflictingResourceForeground#fcbf49
gitDecoration.deletedResourceForeground#52b69a
gitDecoration.ignoredResourceForeground#5a6d63
gitDecoration.modifiedResourceForeground#88d498
gitDecoration.untrackedResourceForeground#d9ed928f
input.background#25332e
input.border#2c3a35
input.foreground#dce3dc
input.placeholderForeground#6a7d73
inputOption.activeBackground#88d49830
inputOption.activeBorder#88d49861
inputValidation.errorBorder#e63946
inputValidation.infoBorder#88d498
inputValidation.warningBorder#fcbf49
list.activeSelectionBackground#2c3a35
list.activeSelectionForeground#88d498
list.dropBackground#52b69a40
list.focusBackground#2c3a3561
list.focusForeground#dce3dc
list.highlightForeground#88d498
list.hoverBackground#25332e
list.hoverForeground#ffffff
list.inactiveSelectionBackground#25332e
list.inactiveSelectionForeground#88d498
listFilterWidget.background#2c3a35
listFilterWidget.noMatchesOutline#52b69a
listFilterWidget.outline#88d498
menu.background#1a2823
menu.foreground#dce3dc
menu.selectionBackground#2c3a35
menu.selectionBorder#2c3a35
menu.selectionForeground#88d498
menu.separatorBackground#404e49
menubar.selectionBackground#2c3a35
menubar.selectionBorder#2c3a35
menubar.selectionForeground#88d498
notebook.focusedCellBorder#88d498
notebook.inactiveFocusedCellBorder#88d4984f
notificationLink.foreground#88d498
notifications.background#1a2823
notifications.border#2c3a35
notifications.foreground#dce3dc
panel.background#1a2823
panel.border#2c3a3561
panel.dropBackground#52b69a40
panelTitle.activeBorder#88d498
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#c8cfc8
peekView.border#2c3a35
peekViewEditor.background#1a2823
peekViewEditor.matchHighlightBackground#a7c95730
peekViewEditorGutter.background#1a2823
peekViewResult.background#1a2823
peekViewResult.matchHighlightBackground#a7c95730
peekViewResult.selectionBackground#2c3a35
peekViewTitle.background#1a2823
peekViewTitleDescription.foreground#6a7d73
pickerGroup.border#2c3a35
pickerGroup.foreground#88d498
progressBar.background#88d498
quickInput.background#1c2a25
quickInput.foreground#c8cfc8
quickInput.list.focusBackground#2c3a3561
sash.hoverBorder#88d4984f
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#88d498
scrollbarSlider.background#404e4940
scrollbarSlider.hoverBackground#404e4961
selection.background#a7c9574f
settings.checkboxBackground#1a2823
settings.checkboxBorder#2c3a35
settings.checkboxForeground#dce3dc
settings.dropdownBackground#1a2823
settings.dropdownBorder#2c3a35
settings.dropdownForeground#dce3dc
settings.headerForeground#88d498
settings.modifiedItemIndicator#88d498
settings.numberInputBackground#1a2823
settings.numberInputBorder#2c3a35
settings.numberInputForeground#dce3dc
settings.textInputBackground#1a2823
settings.textInputBorder#2c3a35
settings.textInputForeground#dce3dc
sideBar.background#1a2823
sideBar.border#2c3a3561
sideBar.foreground#c8cfc8
sideBarSectionHeader.background#1a2823
sideBarSectionHeader.border#2c3a3561
sideBarTitle.foreground#dce3dc
statusBar.background#1a2823
statusBar.border#2c3a3561
statusBar.debuggingBackground#99d98c
statusBar.debuggingForeground#1a2823
statusBar.foreground#c8cfc8
statusBar.noFolderBackground#1c2a25
statusBarItem.activeBackground#52b69a40
statusBarItem.hoverBackground#2c3a3561
statusBarItem.remoteBackground#88d498
statusBarItem.remoteForeground#1a2823
tab.activeBackground#1c2a25
tab.activeBorder#88d498
tab.activeForeground#ffffff
tab.activeModifiedBorder#c8cfc8
tab.border#1c2a25
tab.inactiveBackground#1c2a25
tab.inactiveForeground#6a7d73
tab.inactiveModifiedBorder#5a6d63
tab.unfocusedActiveBorder#6a7d73
tab.unfocusedActiveForeground#c8cfc8
tab.unfocusedActiveModifiedBorder#5a6d63
tab.unfocusedInactiveModifiedBorder#5a6d63
terminal.ansiBlack#25332e
terminal.ansiBlue#a7c957
terminal.ansiBrightBlack#5a6d63
terminal.ansiBrightBlue#88d498
terminal.ansiBrightCyan#bec5be
terminal.ansiBrightGreen#d9ed92
terminal.ansiBrightMagenta#99d98c
terminal.ansiBrightRed#52b69a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fcbf49
terminal.ansiCyan#bec5be
terminal.ansiGreen#d9ed92
terminal.ansiMagenta#99d98c
terminal.ansiRed#52b69a
terminal.ansiWhite#dce3dc
terminal.ansiYellow#caffbf
terminal.background#1c2a25
terminal.foreground#dce3dc
terminalCursor.background#1c2a25
terminalCursor.foreground#88d498
textLink.activeForeground#a7c957
textLink.foreground#88d498
titleBar.activeBackground#1a2823
titleBar.activeForeground#dce3dc
titleBar.border#2c3a3561
titleBar.inactiveBackground#1a2823
titleBar.inactiveForeground#6a7d73
tree.indentGuidesStroke#404e49
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#dce3dc	—
string	#d9ed92	—
punctuation, constant.other.symbol	#c8cfc8	—
constant.character.escape, text.html constant.character.entity.named	#f7ffb0	—
constant.language.boolean	#52b69a	—
constant.numeric	#99d98c	—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments	#dce3dc	—
keyword.other	#caffbf	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#76c893	—
entity.name.function, support.function	#b5e48c	—
storage.type, storage.modifier, storage.control	#76c893	—
support.module, support.node	#52b69a	italic
support.type, constant.other.key	#caffbf	—
entity.name.type, entity.other.inherited-class, entity.other	#caffbf	—
comment	#5a6d63	italic
comment punctuation.definition.comment, string.quoted.docstring	#5a6d63	italic
entity.name, entity.name.type.class, support.type, support.class, meta.use	#caffbf	—
variable.object.property, meta.field.declaration entity.name.function	#99d98c	—
meta.definition.method entity.name.function	#b5e48c	—
meta.function entity.name.function	#b5e48c	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#caffbf	—
meta.embedded, source.groovy.embedded, meta.template.expression	#dce3dc	—
entity.name.tag.yaml	#b5e48c	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#b5e48c	—
constant.language.json	#76c893	—
entity.other.attribute-name.class	#caffbf	—
entity.other.attribute-name.id	#caffbf	—
source.css entity.name.tag	#52b69a	—
support.type.property-name.css	#bec5be	—
meta.tag, punctuation.definition.tag	#b4bbb4	—
entity.name.tag	#52b69a	—
entity.other.attribute-name	#99d98c	—
markup.heading	#b5e48c	bold
text.html.markdown meta.link.inline, meta.link.reference	#76c893	—
text.html.markdown beginning.punctuation.definition.list	#caffbf	—
markup.italic	#99d98c	italic
markup.bold	#caffbf	bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#d9ed92	—
markup.inline.raw.string.markdown	#d9ed92	—
variable.parameter.function.language.special.self.python	#52b69a	italic
entity.name.function.decorator.python	#52b69a	—
support.class.component	#52b69a	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#99d98c	—
keyword.control	#76c893	italic
variable.parameter	—	italic
markup.deleted	#e63946	—
markup.inserted	#80ed99	—

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