Anirak

Name: Anirak
Author: barjo

Publisher: barjoThemes in package: 2

Anirak is a modern, minimalistic theme, designed to be soothing to the eyes and refreshing to the mind.

Open in VS Code GitHub

Color themes

VS Code preview

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

Anirak — Anirak (Light)

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00000000
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#f8f8fc
activityBar.border#00000000
activityBar.dropBackground#ededf7
activityBar.foreground#2b2e4b
activityBar.inactiveForeground#16216b40
activityBarBadge.background#8a9fff
activityBarBadge.foreground#2b2e4b
badge.background#8a9fff
badge.foreground#2b2e4b
button.background#8a9fff
button.foreground#2b2e4b
button.hoverBackground#8a9fff
checkbox.background#f0f1fa
checkbox.border#c5cddb
checkbox.foreground#2b2e4b
contrastActiveBorder#00000000
contrastBorder#00000000
debugExceptionWidget.background#f0f1fa
debugExceptionWidget.border#c5cddb
debugIcon.breakpointForeground#ff3557
debugIcon.continueForeground#3d91ff
debugIcon.disconnectForeground#ff3557
debugIcon.pauseForeground#3d91ff
debugIcon.restartForeground#00d368
debugIcon.startForeground#3d91ff
debugIcon.stepBackForeground#3d91ff
debugIcon.stepIntoForeground#3d91ff
debugIcon.stepOutForeground#3d91ff
debugIcon.stepOverForeground#3d91ff
debugIcon.stopForeground#ff3557
debugToolBar.background#f0f1fa
debugToolBar.border#c5cddb
descriptionForeground#2b2e4b
diffEditor.border#ededf7
diffEditor.insertedTextBackground#00d36840
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#ff355740
diffEditor.removedTextBorder#00000000
dropdown.background#f0f1fa
dropdown.border#c5cddb
dropdown.foreground#2b2e4b
dropdown.listBackground#f0f1fa
editor.background#ffffff
editor.findMatchBackground#ea5c0038
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#8a9fff
editor.foldBackground#4c6aff10
editor.foreground#2b2e4b
editor.hoverHighlightBackground#16216b10
editor.inactiveSelectionBackground#4c6aff40
editor.lineHighlightBackground#f8f8fc
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#00000000
editor.selectionBackground#4c6aff40
editor.selectionHighlightBackground#3d91ff40
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#4c6aff40
editor.symbolHighlightBackground#ea5c0055
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#3d91ff40
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#16216b40
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#f0f1fa
editorBracketMatch.border#00000000
editorCodeLens.foreground#16216b40
editorCursor.background#2b2e4b
editorCursor.foreground#8a9fff
editorError.border#00000000
editorError.foreground#ff3557
editorGroup.border#ededf7
editorGroup.dropBackground#ededf7
editorGroup.emptyBackground#ffffff
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#f8f8fc
editorGroupHeader.tabsBackground#f8f8fc
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00eb74
editorGutter.background#ffffff
editorGutter.commentRangeForeground#16216b40
editorGutter.deletedBackground#ff6680
editorGutter.modifiedBackground#f0dc00
editorHint.border#00000000
editorHint.foreground#2b2e4b
editorHoverWidget.background#f0f1fa
editorHoverWidget.border#c5cddb
editorHoverWidget.foreground#2b2e4b
editorHoverWidget.statusBarBackground#8a9fff
editorIndentGuide.activeBackground#16216b40
editorIndentGuide.background#16216b10
editorInfo.border#00000000
editorInfo.foreground#f0f1fa
editorLightBulb.foreground#bbac00
editorLightBulbAutoFix.foreground#00d368
editorLineNumber.activeForeground#16216b
editorLineNumber.foreground#16216b50
editorLink.activeForeground#2b2e4b
editorMarkerNavigation.background#f8f8fc
editorMarkerNavigationError.background#ff3557
editorMarkerNavigationInfo.background#f8f8fc
editorMarkerNavigationWarning.background#bbac00
editorOverviewRuler.addedForeground#00eb74
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#f0f1fa
editorOverviewRuler.deletedForeground#ff6680
editorOverviewRuler.errorForeground#ff3557
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.infoForeground#f0f1fa
editorOverviewRuler.modifiedForeground#f0dc00
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#00d368
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#ededf7
editorRuler.foreground#16216b20
editorSuggestWidget.background#f0f1fa
editorSuggestWidget.border#c5cddb
editorSuggestWidget.foreground#16216b80
editorSuggestWidget.highlightForeground#2b2e4b
editorSuggestWidget.selectedBackground#16216b20
editorUnnecessaryCode.border#f0dc00
editorUnnecessaryCode.opacity#00000080
editorWarning.border#00000000
editorWarning.foreground#00d368
editorWhitespace.foreground#16216b20
editorWidget.background#f0f1fa
editorWidget.border#c5cddb
editorWidget.foreground#2b2e4b
editorWidget.resizeBorder#c5cddb
errorForeground#ff3557
focusBorder#00000000
foreground#2b2e4b
icon.foreground#2b2e4b
imagePreview.border#c5cddb
input.background#f0f1fa
input.border#c5cddb
input.foreground#2b2e4b
input.placeholderForeground#2b2e4b80
inputOption.activeBackground#2b2e4b20
inputOption.activeBorder#00000000
inputValidation.errorBackground#ff3557
inputValidation.errorBorder#00000000
inputValidation.errorForeground#2b2e4b
inputValidation.infoBackground#f0f1fa
inputValidation.infoBorder#00000000
inputValidation.infoForeground#2b2e4b
inputValidation.warningBackground#f0f1fa
inputValidation.warningBorder#00000000
inputValidation.warningForeground#2b2e4b
list.activeSelectionBackground#8a9fff
list.activeSelectionForeground#2b2e4b
list.deemphasizedForeground#2b2e4b40
list.dropBackground#8a9fff
list.errorForeground#ff3557
list.filterMatchBackground#ea5c0055
list.filterMatchBorder#00000000
list.focusBackground#8a9fff
list.focusForeground#2b2e4b
list.highlightForeground#2b2e4b
list.hoverBackground#4c6aff40
list.hoverForeground#2b2e4b
list.inactiveFocusBackground#4c6aff40
list.inactiveSelectionBackground#ededf7
list.inactiveSelectionForeground#2b2e4b
list.invalidItemForeground#ff3557
list.warningForeground#bbac00
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#ff3557
listFilterWidget.outline#00000000
menu.background#f0f1fa
menu.border#c5cddb
menu.foreground#2b2e4b
menu.selectionBackground#8a9fff
menu.selectionBorder#00000000
menu.selectionForeground#2b2e4b
menu.separatorBackground#00000000
menubar.selectionBackground#4c6aff
menubar.selectionBorder#00000000
menubar.selectionForeground#2b2e4b
minimap.background#ffffff
minimap.errorHighlight#ff3557
minimap.findMatchHighlight#d18616
minimap.selectionHighlight#8a9fff
minimap.warningHighlight#00d368
minimapGutter.addedBackground#00eb74
minimapGutter.deletedBackground#ff6680
minimapGutter.modifiedBackground#f0dc00
minimapSlider.activeBackground#16216b30
minimapSlider.background#16216b10
minimapSlider.hoverBackground#16216b20
panel.background#ffffff
panel.border#ededf7
panel.dropBackground#ededf7
panelInput.border#ededf7
panelTitle.activeBorder#00000000
panelTitle.activeForeground#2b2e4b
panelTitle.inactiveForeground#16216b40
peekView.border#c5cddb
peekViewEditor.background#ededf7
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#ededf7
peekViewResult.background#f0f1fa
peekViewResult.fileForeground#2b2e4b
peekViewResult.lineForeground#16216b80
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#4c6aff40
peekViewResult.selectionForeground#2b2e4b
peekViewTitle.background#f0f1fa
peekViewTitleDescription.foreground#16216b80
peekViewTitleLabel.foreground#2b2e4b
problemsErrorIcon.foreground#ff3557
problemsInfoIcon.foreground#f0f1fa
problemsWarningIcon.foreground#bbac00
progressBar.background#f8f8fc
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#8a9fff
scrollbarSlider.background#2b2e4b20
scrollbarSlider.hoverBackground#8a9fff
searchEditor.findMatchBackground#ea5c0038
searchEditor.findMatchBorder#00000000
searchEditor.textInputBorder#00000000
selection.background#8a9fff
settings.modifiedItemIndicator#4c6aff
sideBar.background#f8f8fc
sideBar.border#ededf7
sideBar.dropBackground#ededf7
sideBar.foreground#16216b80
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#16216b80
sideBarTitle.foreground#16216b80
statusBar.background#f8f8fc
statusBar.border#00000000
statusBar.debuggingBackground#8a9fff
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#2b2e4b
statusBar.foreground#2b2e4b
statusBar.noFolderBackground#f8f8fc
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#2b2e4b
statusBarItem.activeBackground#16216b20
statusBarItem.hoverBackground#16216b20
statusBarItem.prominentBackground#16216b10
statusBarItem.prominentForeground#2eafff
statusBarItem.prominentHoverBackground#16216b20
statusBarItem.remoteBackground#8a9fff
statusBarItem.remoteForeground#2b2e4b
tab.activeBackground#ffffff
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#2b2e4b
tab.activeModifiedBorder#00000000
tab.border#ededf7
tab.hoverBorder#00000000
tab.inactiveBackground#f8f8fc
tab.inactiveForeground#16216b80
tab.inactiveModifiedBorder#00000000
tab.unfocusedActiveBackground#ffffff
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#2b2e4b
tab.unfocusedActiveModifiedBorder#00000000
tab.unfocusedHoverBorder#00000000
tab.unfocusedInactiveForeground#16216b80
tab.unfocusedInactiveModifiedBorder#00000000
terminal.ansiBlack#dee1e8
terminal.ansiBlue#4c6aff
terminal.ansiBrightBlack#c0c6d3
terminal.ansiBrightBlue#8a9fff
terminal.ansiBrightCyan#85d6ff
terminal.ansiBrightGreen#00eb74
terminal.ansiBrightMagenta#8abdff
terminal.ansiBrightRed#ff6680
terminal.ansiBrightWhite#181a2a
terminal.ansiBrightYellow#f0dc00
terminal.ansiCyan#2eafff
terminal.ansiGreen#00d368
terminal.ansiMagenta#3d91ff
terminal.ansiRed#ff3557
terminal.ansiWhite#2b2e4b
terminal.ansiYellow#bbac00
terminal.background#ffffff
terminal.border#ededf7
terminal.foreground#181a2a
terminal.selectionBackground#2b2e4b20
terminalCursor.background#ffffff
terminalCursor.foreground#2b2e4b
textBlockQuote.background#ffffff
textBlockQuote.border#f8f8fc
textCodeBlock.background#f8f8fc
textLink.activeForeground#8a9fff
textLink.foreground#4c6aff
textPreformat.foreground#2b2e4b
textSeparator.foreground#4c6aff
titleBar.activeBackground#ffffff
titleBar.activeForeground#16216b80
titleBar.border#ffffff
titleBar.inactiveBackground#f8f8fc
titleBar.inactiveForeground#16216b40
tree.indentGuidesStroke#2b2e4b80
widget.shadow#ffffff
window.activeBorder#ffffff
window.inactiveBorder#f8f8fc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.package, keyword.function, storage.type.function, storage.type.sub, keyword.control.def, storage.type.config, keyword.other.fn, storage.type.model	#3d91ff	—
storage, keyword.type, keyword.import, keyword.other.class, keyword.other.var, keyword.other.namespace, variable.language.this, keyword.other.DML, keyword.other.sql, support.type.property-name.css, variable.css, keyword.other.DDL, storage.type, storage.modifier.perl, support.type, entity.name.tag, entity.name.type.ts, entity.name.type.tsx, entity.name.type.cpp, entity.other.inherited-class, keyword.control.lua	#3d91ff	—
keyword, punctuation, keyword.operator, meta.brace, meta.selector, meta.tag, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, source.php, source.prisma, storage.modifier.async, meta.property-list, punctuation.section.embedded.begin, punctuation.section.embedded.end, source.css, source.perl, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell	#16216bA0	—
entity.other.attribute-name.pseudo-class, entity.name.function.attribute, meta.group.regexp, meta.selector.css	#16216bA0	italic
punctuation.definition.comment, comment	#16216b50	italic
support, variable.other.object.property, variable.other.property, entity.name.tag.css, entity.other.attribute-name, meta.object-literal.key	#2b2e4b	italic
support.function, entity.other.attribute-name.class.css, meta.function-call, entity.name.function.js	#2eafff	bold
entity.name.function, entity.name.tag.wildcard, entity.name.type.config, entity.name.package, entity.name.type.model, keyword.go.mod	#2b2e4b	—
entity.name.function.macro	#2eafff	—
support.class, support.type.property-name.json, variable, source, source.swift, entity.name, entity.name.tag.yaml, constant.language.boolean.yaml, support.constant.property-value.css, support.constant.color, support.constant, entity.other, entity.other.attribute-name.css, entity.other.attribute-name.localname, entity.name.type, text.html, meta.jsx.children, entity.other.attribute-name.class, entity.other.attribute-name.id, meta.property-value.css, string.other.math, punctuation.section.embedded.begin.swift, support.function.any-method	#2b2e4b	—
string, punctuation.definition.string, storage.modifier.import	#4c6aff	—
entity.name.import	#4c6aff	underline
constant, keyword.other.unit	#00d368
invalid.deprecated	#ff3557	—
storage.modifier, storage.type.modifier, fenced_code.block.language, keyword.other.declaration-specifier.accessibility, storage.type.class.jsdoc, variable.prop.css, support.class.component	#2eafff	italic

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