Ashokai

Name: Ashokai
Author: Teriyaki

Publisher: TeriyakiThemes in package: 5

A fancy and colourful theme for fancy people

Open in VS Code GitHub

Color themes

VS Code preview

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

Ashokai — Ashokai Creamy Beige

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

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#6B442C20
activityBar.activeBorder#6B442C
activityBar.activeFocusBorder#FA8D3E
activityBar.background#E1D8CA
activityBar.dropBorder#FA8D3E
activityBar.foreground#5C5347
activityBar.inactiveForeground#6B4A36
activityBarBadge.background#14842C
activityBarBadge.foreground#ffffff
badge.background#FF4797
badge.foreground#ffffff
button.background#69482F
button.foreground#d2c7b7
button.hoverBackground#69482F
checkbox.background#E5DACC
diffEditor.insertedTextBackground#14842C30
diffEditor.removedTextBackground#F0717135
dropdown.background#E5DACC
dropdown.border#949494
editor.background#F3EEE6
editor.findMatchBorder#d2c7b7
editor.findMatchHighlightBackground#d2c7b740
editor.foldBackground#D4064E30
editor.foreground#69482F
editor.lineHighlightBackground#f0e9df
editor.selectionBackground#d3cdc3
editorBracketMatch.background#b59582
editorBracketMatch.border#c77031
editorCursor.background#1C1613
editorCursor.foreground#69482F
editorError.foreground#F07171
editorGroup.border#bfb19f
editorGroup.dropBackground#FA823E30
editorGroupHeader.noTabsBackground#E5DACC
editorGroupHeader.tabsBackground#E5DACC
editorGutter.addedBackground#14842C
editorGutter.deletedBackground#F07171
editorGutter.modifiedBackground#399EE6
editorHoverWidget.border#43362F
editorIndentGuide.activeBackground1#FA8D3E
editorIndentGuide.background1#43362F
editorInfo.foreground#399EE6
editorLineNumber.activeForeground#7B665B
editorLineNumber.foreground#d2c7b7
editorLink.activeForeground#452d1c
editorMarkerNavigation.background#F3EEE6
editorMarkerNavigationError.background#F07171
editorMarkerNavigationInfo.background#399EE6
editorMarkerNavigationWarning.background#FA8D3E
editorOverviewRuler.addedForeground#399EE6
editorOverviewRuler.border#2f3243
editorOverviewRuler.bracketMatchForeground#FA8D3E
editorOverviewRuler.deletedForeground#399EE6
editorOverviewRuler.errorForeground#F07171
editorOverviewRuler.infoForeground#399EE6
editorOverviewRuler.modifiedForeground#399EE6
editorOverviewRuler.selectionHighlightForeground#FA8D3E
editorOverviewRuler.warningForeground#FA8D3E
editorPane.background#1F1915
editorRuler.foreground#43362F
editorSuggestWidget.background#E5DACC
editorSuggestWidget.border#43362F
editorSuggestWidget.highlightForeground#14842C
editorWarning.foreground#FA8D3E
editorWhitespace.foreground#191b23
editorWidget.background#F3EEE6
editorWidget.resizeBorder#43362F
errorForeground#F07171
extensionButton.prominentBackground#69482F
extensionButton.prominentForeground#e7dfd4
extensionButton.prominentHoverBackground#69482F
focusBorder#d2c7b7
foreground#69482F
gitDecoration.addedResourceForeground#14842C
gitDecoration.deletedResourceForeground#F07171
gitDecoration.modifiedResourceForeground#399EE6
gitDecoration.stageDeletedResourceForeground#F07171
gitDecoration.stageModifiedResourceForeground#399EE6
icon.foreground#5C5347
input.background#E5DACC
input.border#949494
input.foreground#69482F
inputOption.activeBorder#69482F
inputValidation.errorBackground#F0717190
inputValidation.errorBorder#F07171
inputValidation.errorForeground#1C1613
inputValidation.infoBackground#399EE690
inputValidation.infoBorder#399EE6
inputValidation.infoForeground#1C1613
inputValidation.warningBackground#FA8D3E90
inputValidation.warningBorder#FA8D3E
inputValidation.warningForeground#1C1613
list.activeSelectionBackground#d2c7b7
list.activeSelectionForeground#69482F
list.errorForeground#F07171
list.focusBackground#d2c7b7
list.highlightForeground#14842C
list.hoverBackground#7793e807
list.inactiveSelectionBackground#d2c7b720
list.inactiveSelectionForeground#69482F
list.warningForeground#FA8D3E
menu.background#F3EEE6
menu.foreground#69482F
menu.selectionBackground#FA8D3EDD
menu.selectionForeground#1C1613
menu.separatorBackground#d2c7b7
minimap.background#f3eee6c4
minimap.errorHighlight#F07171
minimap.selectionHighlight#E8A07730
minimap.warningHighlight#FA8D3E
minimapGutter.addedBackground#14842C
minimapGutter.deletedBackground#F07171
minimapGutter.modifiedBackground#399EE6
notifications.background#F3EEE6
notificationsErrorIcon.foreground#F07171
notificationsInfoIcon.foreground#399EE6
notificationsWarningIcon.foreground#FA8D3E
panel.border#bfb19f
panel.dropBorder#FA8D3E
panelTitle.activeBorder#FA8D3E
peekViewResult.background#E5DACC
peekViewTitle.background#1C1713
pickerGroup.border#bfb19f
pickerGroup.foreground#69482F
problemsErrorIcon.foreground#F07171
problemsInfoIcon.foreground#399EE6
problemsWarningIcon.foreground#FA8D3E
progressBar.background#FA8D3E
scrollbar.shadow#7645233e
scrollbarSlider.activeBackground#414e5c40
scrollbarSlider.background#2D456B10
scrollbarSlider.hoverBackground#656f8f40
selection.background#d2c7b7
settings.modifiedItemIndicator#399EE6
sideBar.background#e7dfd4
sideBar.border#bfb19f
sideBarSectionHeader.background#e7dfd4
statusBar.background#E1D8CA
statusBar.foreground#967A68
statusBarItem.hoverBackground#6B432C40
statusBarItem.prominentBackground#FA8D3E
statusBarItem.prominentForeground#1C1613
statusBarItem.prominentHoverBackground#e17f38
tab.activeBackground#F3EEE6
tab.activeBorder#FA8D3E00
tab.activeModifiedBorder#399EE6
tab.border#b6b2ac
tab.hoverBackground#6b4a3635
tab.inactiveBackground#E5DACC
tab.lastPinnedBorder#FA863E40
terminal.background#e7dfd4
terminal.foreground#69482F
terminal.selectionBackground#FA8D3E
terminalCursor.background#1C1613
terminalCursor.foreground#FA8D3E
textLink.activeForeground#D4064E
textLink.foreground#14842C
textPreformat.foreground#14842C
textSeparator.foreground#0b0c10
titleBar.activeBackground#E4D9CC
titleBar.activeForeground#5C5347
titleBar.border#bfb19f
titleBar.inactiveBackground#EBE3D8
widget.shadow#c7b2a1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#F07171	—
meta.embedded, source.groovy.embedded, meta.template.expression	#69482F	—
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable	#69482F	—
variable.statamic	#C61EA7	—
meta.embedded.block.statamic	#0071C1	—
comment, punctuation.definition.comment	#D2B792	—
string, punctuation.definition.string	#69482F	—
constant.character.escape	#14842C	—
keyword, constant.language.import-export-all	#0071C1	—
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type	#C8B6FF	—
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new	#D4064E	—
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class, entity.name.section	#D4064E	—
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded	#14842C	—
constant	#C8B6FF	—
constant.numeric, constant.language	#8E39E4	—
variable.parameter, parameter.variable, meta.function.parameter variable, storage.type.function.js, source.js, source.rust meta.type_params.rust	#0071C1	—
entity.name.function.macro.rust	#9dd2e6	—
punctuation, meta.brace	#9D7D6C	—
variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self.python	#14842C	—
comment.block.documentation entity.name.type, string.template.js, string.quoted.double.rust, string.quoted.single.python, string.quoted.single.sql, string.quoted.double.ruby	#14842C	—
variable.language.super	#D4064E	—
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype	#b0adbb	—
entity.name.tag	#D4064E	—
meta.tag string	#69482F	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#14842C	—
constant.character.entity, punctuation.definition.entity	#0071C1	—
entity.name.section.markdown, markup.heading.setext	#14842C	—
punctuation.definition.list	#14842C	—
meta.separator.markdown	#14842C	—
markup.inline.raw	#14842C	—
markup.bold	—	bold
markup.italic	—	italic
meta.link punctuation.definition.string, meta.image punctuation.definition.string	#b0adbb	—
link, markup.underline.link, constant.other.reference.link.markdown	#D4064E	—
markup.quote	#0071C1	—
entity.name.tag.css, entity.name.tag.wildcard	#69482F	—
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity	#14842C	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color	#14842C	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, punctuation.separator.arguments.ruby	#D4064E	—
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric	#69482F	—
meta.property-name, support.type.property-name, keyword.control.flow.python	#0071C1	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#D4064E	—
variable.parameter.url	#0071C1	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#EA7AD5	—
support.type.property-name.json	#14842C	—
markup.inserted	#14842C	—
markup.changed	#399EE6	—
markup.deleted	#F07171	—
meta.diff.header	#399EE6	—
meta.diff.range	#14842C	—
keyword.blade	#EA7AD5	—
entity.name.type.class.python	#5D3BB8	—
meta.class.python	#0071C1	—
keyword.control.conditional.js, keyword.control.elixir, storage.type.js	#0071C1	—
variable.parameter.js, variable.parameter.function.language.python, meta.tag string	#14842C	—
variable.other.constant.elixir, constant.other.symbol.ruby	#14842C	—
punctuation.section.tag.twig	#0071C1	—

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