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 Aurora

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#70d4e8
activityBar.background#181a24
activityBar.border#2a304060
activityBar.dropBackground#e89ac740
activityBar.foreground#9da8c8
activityBarBadge.background#70d4e8
activityBarBadge.foreground#181a24
badge.background#2a3040
badge.foreground#9da8c8
breadcrumb.activeSelectionForeground#70d4e8
breadcrumb.background#1a1d29
breadcrumb.focusForeground#d4d9e8
breadcrumb.foreground#9da8c8
breadcrumbPicker.background#181a24
button.background#7ea8e850
button.foreground#ffffff
button.hoverBackground#7ea8e870
debugConsole.errorForeground#e89ac7
debugConsole.infoForeground#70d4e8
debugConsole.warningForeground#e8d796
debugToolBar.background#181a24
diffEditor.insertedTextBackground#a8d5ba20
diffEditor.removedTextBackground#e89ac720
dropdown.background#1a1d29
dropdown.border#2a3040
editor.background#1a1d29
editor.findMatchBackground#e8d79650
editor.findMatchBorder#70d4e8
editor.findMatchHighlightBackground#e8d79630
editor.findMatchHighlightBorder#ffffff30
editor.findRangeHighlightBackground#e8d79630
editor.foreground#d4d9e8
editor.inactiveSelectionBackground#7ea8e820
editor.lineHighlightBackground#232636
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0d
editor.selectionBackground#7ea8e830
editor.selectionHighlightBackground#70d4e820
editor.wordHighlightBackground#e89ac730
editor.wordHighlightStrongBackground#a8d5ba30
editorBracketMatch.background#70d4e830
editorBracketMatch.border#70d4e8
editorCursor.foreground#70d4e8
editorError.foreground#e89ac780
editorGroup.border#2a304060
editorGroup.dropBackground#e89ac740
editorGroup.focusedEmptyBorder#70d4e8
editorGroupHeader.tabsBackground#1a1d29
editorGutter.addedBackground#a8d5ba60
editorGutter.deletedBackground#e89ac760
editorGutter.modifiedBackground#70d4e860
editorHoverWidget.background#181a24
editorHoverWidget.border#2a3040
editorIndentGuide.activeBackground#3a4258
editorIndentGuide.background#3a425850
editorInfo.foreground#70d4e880
editorLineNumber.activeForeground#6a748c
editorLineNumber.foreground#3a4258
editorLink.activeForeground#70d4e8
editorMarkerNavigation.background#181a24
editorOverviewRuler.border#1a1d29
editorOverviewRuler.errorForeground#e89ac760
editorOverviewRuler.findMatchForeground#70d4e8
editorOverviewRuler.infoForeground#70d4e860
editorOverviewRuler.warningForeground#e8d79660
editorRuler.foreground#3a4258
editorSuggestWidget.background#181a24
editorSuggestWidget.border#2a3040
editorSuggestWidget.foreground#d4d9e8
editorSuggestWidget.highlightForeground#70d4e8
editorSuggestWidget.selectedBackground#2a3040
editorWarning.foreground#e8d79680
editorWhitespace.foreground#3a425840
editorWidget.background#181a24
editorWidget.border#70d4e8
editorWidget.resizeBorder#70d4e8
extensionBadge.remoteForeground#d4d9e8
extensionButton.prominentBackground#a8d5ba90
extensionButton.prominentForeground#181a24
extensionButton.prominentHoverBackground#a8d5ba
focusBorder#70d4e840
foreground#d4d9e8
gitDecoration.addedResourceForeground#a8d5ba
gitDecoration.conflictingResourceForeground#e8d796
gitDecoration.deletedResourceForeground#e89ac7
gitDecoration.ignoredResourceForeground#5a627a
gitDecoration.modifiedResourceForeground#70d4e8
gitDecoration.untrackedResourceForeground#a8d5ba90
input.background#232636
input.border#2a3040
input.foreground#d4d9e8
input.placeholderForeground#6a748c
inputOption.activeBackground#70d4e830
inputOption.activeBorder#70d4e860
inputValidation.errorBorder#e89ac7
inputValidation.infoBorder#70d4e8
inputValidation.warningBorder#e8d796
list.activeSelectionBackground#2a3040
list.activeSelectionForeground#70d4e8
list.dropBackground#e89ac740
list.focusBackground#2a304060
list.focusForeground#d4d9e8
list.highlightForeground#70d4e8
list.hoverBackground#232636
list.hoverForeground#ffffff
list.inactiveSelectionBackground#232636
list.inactiveSelectionForeground#70d4e8
listFilterWidget.background#2a3040
listFilterWidget.noMatchesOutline#e89ac7
listFilterWidget.outline#70d4e8
menu.background#181a24
menu.foreground#d4d9e8
menu.selectionBackground#2a3040
menu.selectionBorder#2a3040
menu.selectionForeground#70d4e8
menu.separatorBackground#3a4258
menubar.selectionBackground#2a3040
menubar.selectionBorder#2a3040
menubar.selectionForeground#70d4e8
notebook.focusedCellBorder#70d4e8
notebook.inactiveFocusedCellBorder#70d4e850
notificationLink.foreground#70d4e8
notifications.background#181a24
notifications.border#2a3040
notifications.foreground#d4d9e8
panel.background#181a24
panel.border#2a304060
panel.dropBackground#e89ac740
panelTitle.activeBorder#70d4e8
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#9da8c8
peekView.border#2a3040
peekViewEditor.background#181a24
peekViewEditor.matchHighlightBackground#7ea8e830
peekViewEditorGutter.background#181a24
peekViewResult.background#181a24
peekViewResult.matchHighlightBackground#7ea8e830
peekViewResult.selectionBackground#2a3040
peekViewTitle.background#181a24
peekViewTitleDescription.foreground#6a748c
pickerGroup.border#2a3040
pickerGroup.foreground#70d4e8
progressBar.background#70d4e8
quickInput.background#1a1d29
quickInput.foreground#9da8c8
quickInput.list.focusBackground#2a304060
sash.hoverBorder#70d4e850
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#70d4e8
scrollbarSlider.background#3a425840
scrollbarSlider.hoverBackground#3a425860
selection.background#7ea8e850
settings.checkboxBackground#181a24
settings.checkboxBorder#2a3040
settings.checkboxForeground#d4d9e8
settings.dropdownBackground#181a24
settings.dropdownBorder#2a3040
settings.dropdownForeground#d4d9e8
settings.headerForeground#70d4e8
settings.modifiedItemIndicator#70d4e8
settings.numberInputBackground#181a24
settings.numberInputBorder#2a3040
settings.numberInputForeground#d4d9e8
settings.textInputBackground#181a24
settings.textInputBorder#2a3040
settings.textInputForeground#d4d9e8
sideBar.background#181a24
sideBar.border#2a304060
sideBar.foreground#9da8c8
sideBarSectionHeader.background#181a24
sideBarSectionHeader.border#2a304060
sideBarTitle.foreground#d4d9e8
statusBar.background#181a24
statusBar.border#2a304060
statusBar.debuggingBackground#c9b7e8
statusBar.debuggingForeground#181a24
statusBar.foreground#9da8c8
statusBar.noFolderBackground#1a1d29
statusBarItem.activeBackground#e89ac740
statusBarItem.hoverBackground#2a304060
statusBarItem.remoteBackground#70d4e8
statusBarItem.remoteForeground#181a24
tab.activeBackground#1a1d29
tab.activeBorder#70d4e8
tab.activeForeground#ffffff
tab.activeModifiedBorder#9da8c8
tab.border#1a1d29
tab.inactiveBackground#1a1d29
tab.inactiveForeground#6a748c
tab.inactiveModifiedBorder#5a627a
tab.unfocusedActiveBorder#6a748c
tab.unfocusedActiveForeground#9da8c8
tab.unfocusedActiveModifiedBorder#5a627a
tab.unfocusedInactiveModifiedBorder#5a627a
terminal.ansiBlack#232636
terminal.ansiBlue#7ea8e8
terminal.ansiBrightBlack#5a627a
terminal.ansiBrightBlue#70d4e8
terminal.ansiBrightCyan#9db8d4
terminal.ansiBrightGreen#a8d5ba
terminal.ansiBrightMagenta#c9b7e8
terminal.ansiBrightRed#e89ac7
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e8d796
terminal.ansiCyan#9db8d4
terminal.ansiGreen#a8d5ba
terminal.ansiMagenta#c9b7e8
terminal.ansiRed#e89ac7
terminal.ansiWhite#d4d9e8
terminal.ansiYellow#e8b896
terminal.background#1a1d29
terminal.foreground#d4d9e8
terminalCursor.background#1a1d29
terminalCursor.foreground#70d4e8
textLink.activeForeground#7ea8e8
textLink.foreground#70d4e8
titleBar.activeBackground#181a24
titleBar.activeForeground#d4d9e8
titleBar.border#2a304060
titleBar.inactiveBackground#181a24
titleBar.inactiveForeground#6a748c
tree.indentGuidesStroke#3a4258
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#d4d9e8	—
string	#a8d5ba	—
punctuation, constant.other.symbol	#9da8c8	—
constant.character.escape, text.html constant.character.entity.named	#c8d5e8	—
constant.language.boolean	#e89ac7	—
constant.numeric	#c9b7e8	—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments	#d4d9e8	—
keyword.other	#e8b896	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#7ea8e8	—
entity.name.function, support.function	#70d4e8	—
storage.type, storage.modifier, storage.control	#7ea8e8	—
support.module, support.node	#e89ac7	italic
support.type, constant.other.key	#e8d796	—
entity.name.type, entity.other.inherited-class, entity.other	#e8b896	—
comment	#5a627a	italic
comment punctuation.definition.comment, string.quoted.docstring	#5a627a	italic
entity.name, entity.name.type.class, support.type, support.class, meta.use	#e8d796	—
variable.object.property, meta.field.declaration entity.name.function	#c9b7e8	—
meta.definition.method entity.name.function	#70d4e8	—
meta.function entity.name.function	#70d4e8	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#e8d796	—
meta.embedded, source.groovy.embedded, meta.template.expression	#d4d9e8	—
entity.name.tag.yaml	#70d4e8	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#70d4e8	—
constant.language.json	#7ea8e8	—
entity.other.attribute-name.class	#e8d796	—
entity.other.attribute-name.id	#e8b896	—
source.css entity.name.tag	#e89ac7	—
support.type.property-name.css	#9db8d4	—
meta.tag, punctuation.definition.tag	#8896b8	—
entity.name.tag	#e89ac7	—
entity.other.attribute-name	#c9b7e8	—
punctuation.definition.entity.html	#d4d9e8	—
markup.heading	#70d4e8	bold
text.html.markdown meta.link.inline, meta.link.reference	#7ea8e8	—
text.html.markdown beginning.punctuation.definition.list	#e8d796	—
markup.italic	#c9b7e8	italic
markup.bold	#e8b896	bold
markup.bold markup.italic, markup.italic markup.bold	#e89ac7	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#a8d5ba	—
markup.inline.raw.string.markdown	#a8d5ba	—
keyword.other.definition.ini	#70d4e8	—
entity.name.section.group-title.ini	#7ea8e8	—
source.cs meta.class.identifier storage.type	#e8d796	—
source.cs meta.method.identifier entity.name.function	#70d4e8	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#70d4e8	—
source.cs storage.type	#e8d796	—
source.cs meta.method.return-type	#e8d796	—
source.cs meta.preprocessor	#5a627a	—
source.cs entity.name.type.namespace	#d4d9e8	—
meta.jsx.children, SXNested	#d4d9e8	—
support.class.component	#e89ac7	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#c9b7e8	—
source.cpp meta.block variable.other	#d4d9e8	—
source.python meta.member.access.python	#c9b7e8	—
source.python meta.function-call.python, meta.function-call.arguments	#70d4e8	—
meta.block	#d4d9e8	—
entity.name.function.call	#70d4e8	—
source.php support.other.namespace, source.php meta.use support.class	#d4d9e8	—
constant.keyword	#7ea8e8	italic
entity.name.function	#70d4e8	—
constant.other.placeholder	#e8d796	—
markup.deleted	#e89ac7	—
markup.inserted	#a8d5ba	—
markup.underline	—	underline
keyword.control	#7ea8e8	italic
variable.parameter	—	italic
variable.parameter.function.language.special.self.python	#e89ac7	italic
constant.character.format.placeholder.other.python	#e8d796	—
entity.name.function.decorator.python	#e89ac7	—
markup.quote	#8896b8	italic
markup.fenced_code.block	#d4d9e890	—
punctuation.definition.quote	#e89ac7	—
meta.structure.dictionary.json support.type.property-name.json	#70d4e8	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c9b7e8	—
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	#e8d796	—
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	#e89ac7	—
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	#a8d5ba	—
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	#9db8d4	—
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	#7ea8e8	—
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	#e8b896	—
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	#a8d5ba	—

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