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 (Dark)

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.activeBackground#00000000
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#161731
activityBar.border#00000000
activityBar.dropBackground#262a4d
activityBar.foreground#ebf2ff
activityBar.inactiveForeground#b3c7ff40
activityBarBadge.background#5c85ff
activityBarBadge.foreground#ebf2ff
badge.background#5c85ff
badge.foreground#ebf2ff
button.background#5c85ff
button.foreground#ebf2ff
button.hoverBackground#85a3ff
checkbox.background#1f203d
checkbox.border#363d6b
checkbox.foreground#ebf2ff
contrastActiveBorder#00000000
contrastBorder#00000000
debugExceptionWidget.background#1f203d
debugExceptionWidget.border#363d6b
debugIcon.breakpointForeground#ff4766
debugIcon.continueForeground#85c2ff
debugIcon.disconnectForeground#ff4766
debugIcon.pauseForeground#85c2ff
debugIcon.restartForeground#00f58b
debugIcon.startForeground#85c2ff
debugIcon.stepBackForeground#85c2ff
debugIcon.stepIntoForeground#85c2ff
debugIcon.stepOutForeground#85c2ff
debugIcon.stepOverForeground#85c2ff
debugIcon.stopForeground#ff4766
debugToolBar.background#1f203d
debugToolBar.border#363d6b
descriptionForeground#ebf2ff
diffEditor.border#262a4d
diffEditor.insertedTextBackground#00f58b40
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#ff476640
diffEditor.removedTextBorder#00000000
dropdown.background#1f203d
dropdown.border#363d6b
dropdown.foreground#ebf2ff
dropdown.listBackground#1f203d
editor.background#111127
editor.findMatchBackground#ea5c0038
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#5c85ff
editor.foldBackground#5c85ff10
editor.foreground#ebf2ff
editor.hoverHighlightBackground#b3c7ff10
editor.inactiveSelectionBackground#5c85ff40
editor.lineHighlightBackground#161731
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#00000000
editor.selectionBackground#5c85ff40
editor.selectionHighlightBackground#85c2ff40
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#5c85ff40
editor.symbolHighlightBackground#ea5c0055
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#85c2ff40
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#b3c7ff40
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#1f203d
editorBracketMatch.border#00000000
editorCodeLens.foreground#b3c7ff40
editorCursor.background#ebf2ff
editorCursor.foreground#5c85ff
editorError.border#00000000
editorError.foreground#ff4766
editorGroup.border#262a4d
editorGroup.dropBackground#262a4d
editorGroup.emptyBackground#111127
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#161731
editorGroupHeader.tabsBackground#161731
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#75ffc3
editorGutter.background#111127
editorGutter.commentRangeForeground#b3c7ff40
editorGutter.deletedBackground#ff7a91
editorGutter.modifiedBackground#ffe799
editorHint.border#00000000
editorHint.foreground#ebf2ff
editorHoverWidget.background#1f203d
editorHoverWidget.border#363d6b
editorHoverWidget.foreground#ebf2ff
editorHoverWidget.statusBarBackground#5c85ff
editorIndentGuide.activeBackground#b3c7ff40
editorIndentGuide.background#b3c7ff10
editorInfo.border#00000000
editorInfo.foreground#1f203d
editorLightBulb.foreground#ffdb66
editorLightBulbAutoFix.foreground#00f58b
editorLineNumber.activeForeground#b3c7ff
editorLineNumber.foreground#b3c7ff50
editorLink.activeForeground#ebf2ff
editorMarkerNavigation.background#161731
editorMarkerNavigationError.background#ff4766
editorMarkerNavigationInfo.background#161731
editorMarkerNavigationWarning.background#ffdb66
editorOverviewRuler.addedForeground#75ffc3
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#1f203d
editorOverviewRuler.deletedForeground#ff7a91
editorOverviewRuler.errorForeground#ff4766
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.infoForeground#1f203d
editorOverviewRuler.modifiedForeground#ffe799
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#00f58b
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#262a4d
editorRuler.foreground#b3c7ff20
editorSuggestWidget.background#1f203d
editorSuggestWidget.border#363d6b
editorSuggestWidget.foreground#b3c7ff80
editorSuggestWidget.highlightForeground#ebf2ff
editorSuggestWidget.selectedBackground#b3c7ff20
editorUnnecessaryCode.border#ffe799
editorUnnecessaryCode.opacity#00000080
editorWarning.border#00000000
editorWarning.foreground#00f58b
editorWhitespace.foreground#b3c7ff20
editorWidget.background#1f203d
editorWidget.border#363d6b
editorWidget.foreground#ebf2ff
editorWidget.resizeBorder#363d6b
errorForeground#ff4766
focusBorder#00000000
foreground#ebf2ff
icon.foreground#ebf2ff
imagePreview.border#363d6b
input.background#1f203d
input.border#363d6b
input.foreground#ebf2ff
input.placeholderForeground#ebf2ff80
inputOption.activeBackground#ebf2ff20
inputOption.activeBorder#00000000
inputValidation.errorBackground#ff4766
inputValidation.errorBorder#00000000
inputValidation.errorForeground#ebf2ff
inputValidation.infoBackground#1f203d
inputValidation.infoBorder#00000000
inputValidation.infoForeground#ebf2ff
inputValidation.warningBackground#1f203d
inputValidation.warningBorder#00000000
inputValidation.warningForeground#ebf2ff
list.activeSelectionBackground#5c85ff
list.activeSelectionForeground#ebf2ff
list.deemphasizedForeground#ebf2ff40
list.dropBackground#85a3ff
list.errorForeground#ff4766
list.filterMatchBackground#ea5c0055
list.filterMatchBorder#00000000
list.focusBackground#5c85ff
list.focusForeground#ebf2ff
list.highlightForeground#ebf2ff
list.hoverBackground#5c85ff40
list.hoverForeground#ebf2ff
list.inactiveFocusBackground#5c85ff40
list.inactiveSelectionBackground#262a4d
list.inactiveSelectionForeground#ebf2ff
list.invalidItemForeground#ff4766
list.warningForeground#ffdb66
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#ff4766
listFilterWidget.outline#00000000
menu.background#1f203d
menu.border#363d6b
menu.foreground#ebf2ff
menu.selectionBackground#5c85ff
menu.selectionBorder#00000000
menu.selectionForeground#ebf2ff
menu.separatorBackground#00000000
menubar.selectionBackground#5c85ff
menubar.selectionBorder#00000000
menubar.selectionForeground#ebf2ff
minimap.background#111127
minimap.errorHighlight#ff4766
minimap.findMatchHighlight#d18616
minimap.selectionHighlight#5c85ff
minimap.warningHighlight#00f58b
minimapGutter.addedBackground#75ffc3
minimapGutter.deletedBackground#ff7a91
minimapGutter.modifiedBackground#ffe799
minimapSlider.activeBackground#b3c7ff30
minimapSlider.background#b3c7ff10
minimapSlider.hoverBackground#b3c7ff20
panel.background#111127
panel.border#262a4d
panel.dropBackground#262a4d
panelInput.border#262a4d
panelTitle.activeBorder#00000000
panelTitle.activeForeground#ebf2ff
panelTitle.inactiveForeground#b3c7ff40
peekView.border#363d6b
peekViewEditor.background#262a4d
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#262a4d
peekViewResult.background#1f203d
peekViewResult.fileForeground#ebf2ff
peekViewResult.lineForeground#b3c7ff80
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#5c85ff40
peekViewResult.selectionForeground#ebf2ff
peekViewTitle.background#1f203d
peekViewTitleDescription.foreground#b3c7ff80
peekViewTitleLabel.foreground#ebf2ff
problemsErrorIcon.foreground#ff4766
problemsInfoIcon.foreground#1f203d
problemsWarningIcon.foreground#ffdb66
progressBar.background#161731
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#85a3ff
scrollbarSlider.background#ebf2ff20
scrollbarSlider.hoverBackground#5c85ff
searchEditor.findMatchBackground#ea5c0038
searchEditor.findMatchBorder#00000000
searchEditor.textInputBorder#00000000
selection.background#5c85ff
settings.modifiedItemIndicator#5c85ff
sideBar.background#161731
sideBar.border#262a4d
sideBar.dropBackground#262a4d
sideBar.foreground#b3c7ff80
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#b3c7ff80
sideBarTitle.foreground#b3c7ff80
statusBar.background#161731
statusBar.border#00000000
statusBar.debuggingBackground#5c85ff
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#ebf2ff
statusBar.foreground#ebf2ff
statusBar.noFolderBackground#161731
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#ebf2ff
statusBarItem.activeBackground#b3c7ff20
statusBarItem.hoverBackground#b3c7ff20
statusBarItem.prominentBackground#b3c7ff10
statusBarItem.prominentForeground#b8f0ff
statusBarItem.prominentHoverBackground#b3c7ff20
statusBarItem.remoteBackground#5c85ff
statusBarItem.remoteForeground#ebf2ff
tab.activeBackground#111127
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#ebf2ff
tab.activeModifiedBorder#00000000
tab.border#262a4d
tab.hoverBorder#00000000
tab.inactiveBackground#161731
tab.inactiveForeground#b3c7ff80
tab.inactiveModifiedBorder#00000000
tab.unfocusedActiveBackground#111127
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#ebf2ff
tab.unfocusedActiveModifiedBorder#00000000
tab.unfocusedHoverBorder#00000000
tab.unfocusedInactiveForeground#b3c7ff80
tab.unfocusedInactiveModifiedBorder#00000000
terminal.ansiBlack#171921
terminal.ansiBlue#5c85ff
terminal.ansiBrightBlack#3a434d
terminal.ansiBrightBlue#85a3ff
terminal.ansiBrightCyan#dbf4ff
terminal.ansiBrightGreen#75ffc3
terminal.ansiBrightMagenta#a8d2ff
terminal.ansiBrightRed#ff7a91
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe799
terminal.ansiCyan#b8f0ff
terminal.ansiGreen#00f58b
terminal.ansiMagenta#85c2ff
terminal.ansiRed#ff4766
terminal.ansiWhite#ebf2ff
terminal.ansiYellow#ffdb66
terminal.background#111127
terminal.border#262a4d
terminal.foreground#ffffff
terminal.selectionBackground#ebf2ff20
terminalCursor.background#111127
terminalCursor.foreground#ebf2ff
textBlockQuote.background#111127
textBlockQuote.border#161731
textCodeBlock.background#161731
textLink.activeForeground#85a3ff
textLink.foreground#5c85ff
textPreformat.foreground#ebf2ff
textSeparator.foreground#5c85ff
titleBar.activeBackground#111127
titleBar.activeForeground#b3c7ff80
titleBar.border#111127
titleBar.inactiveBackground#161731
titleBar.inactiveForeground#b3c7ff40
tree.indentGuidesStroke#ebf2ff80
widget.shadow#000000
window.activeBorder#111127
window.inactiveBorder#161731

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	#85c2ff	—
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	#85c2ff	—
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	#b3c7ffA0	—
entity.other.attribute-name.pseudo-class, entity.name.function.attribute, meta.group.regexp, meta.selector.css	#b3c7ffA0	italic
punctuation.definition.comment, comment	#b3c7ff50	italic
support, variable.other.object.property, variable.other.property, entity.name.tag.css, entity.other.attribute-name, meta.object-literal.key	#ebf2ff	italic
support.function, entity.other.attribute-name.class.css, meta.function-call, entity.name.function.js	#ebf2ff	bold
entity.name.function, entity.name.tag.wildcard, entity.name.type.config, entity.name.package, entity.name.type.model, keyword.go.mod	#ebf2ff	—
entity.name.function.macro	#b8f0ff	—
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	#ebf2ff	—
string, punctuation.definition.string, storage.modifier.import	#5c85ff	—
entity.name.import	#5c85ff	underline
constant, keyword.other.unit	#00f58b
invalid.deprecated	#ff4766	—
storage.modifier, storage.type.modifier, fenced_code.block.language, keyword.other.declaration-specifier.accessibility, storage.type.class.jsdoc, variable.prop.css, support.class.component	#b8f0ff	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}!`;
}