Academie Syntax

Name: Academie Syntax
Author: Ricardo Marinovic

Publisher: Ricardo MarinovicThemes in package: 1

Syntax with context representation, easy on the eyes. Based on Wombat for osx terminal colors and one dark atom theme.

Open in VS Code GitHub

VS Code preview

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

Academie Syntax — Academie Syntax

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.background#2e3440
activityBar.border#2e3440
activityBar.dropBackground#3b4252
activityBar.foreground#d8dee9
activityBarBadge.background#88c0d0
activityBarBadge.foreground#2e3440
badge.background#88c0d0
badge.foreground#2e3440
button.background#434c5e
button.foreground#d8dee9
button.hoverBackground#4c566a
debugExceptionWidget.background#4c566a
debugExceptionWidget.border#2e3440
debugToolBar.background#3b4252
diffEditor.insertedTextBackground#a3be8c4d
diffEditor.insertedTextBorder#a3be8c4d
diffEditor.removedTextBackground#bf616a4d
diffEditor.removedTextBorder#bf616a4d
dropdown.background#3b4252
dropdown.border#3b4252
dropdown.foreground#d8dee9
editor.background#2e3440
editor.findMatchBackground#88c0d066
editor.findMatchHighlightBackground#88c0d033
editor.findRangeHighlightBackground#88c0d033
editor.foreground#d8dee9
editor.hoverHighlightBackground#3b4252
editor.inactiveSelectionBackground#434c5ecc
editor.lineHighlightBackground#434c5e52
editor.lineHighlightBorder#434c5e52
editor.rangeHighlightBackground#434c5e52
editor.selectionBackground#434c5ecc
editor.selectionHighlightBackground#434c5ecc
editor.wordHighlightBackground#81a1c166
editor.wordHighlightStrongBackground#81a1c199
editorBracketMatch.background#2e344000
editorBracketMatch.border#88c0d0
editorCodeLens.foreground#4c566a
editorCursor.foreground#FFFFFF
editorError.border#bf616a00
editorError.foreground#bf616a
editorGroup.border#3b425200
editorGroup.dropBackground#3b4252
editorGroup.emptyBackground#2e3440
editorGroupHeader.noTabsBackground#2e3440
editorGroupHeader.tabsBackground#2e3440
editorGroupHeader.tabsBorder#3b425200
editorGutter.addedBackground#B1E969
editorGutter.background#2e3440
editorGutter.deletedBackground#FF615A
editorGutter.modifiedBackground#e5c07b
editorHoverWidget.background#3b4252
editorHoverWidget.border#3b4252
editorIndentGuide.background#434c5eb3
editorLineNumber.foreground#d8dee966
editorLink.activeForeground#88c0d0
editorMarkerNavigation.background#5e81acc0
editorMarkerNavigationError.background#bf616ac0
editorMarkerNavigationWarning.background#ebcb8bc0
editorOverviewRuler.addedForeground#a3be8c
editorOverviewRuler.border#3b4252
editorOverviewRuler.currentContentForeground#3b4252
editorOverviewRuler.deletedForeground#bf616a
editorOverviewRuler.errorForeground#bf616a
editorOverviewRuler.findMatchForeground#88c0d066
editorOverviewRuler.incomingContentForeground#3b4252
editorOverviewRuler.infoForeground#81a1c1
editorOverviewRuler.modifiedForeground#ebcb8b
editorOverviewRuler.rangeHighlightForeground#88c0d066
editorOverviewRuler.selectionHighlightForeground#88c0d066
editorOverviewRuler.warningForeground#ebcb8b
editorOverviewRuler.wordHighlightForeground#88c0d066
editorOverviewRuler.wordHighlightStrongForeground#88c0d066
editorRuler.foreground#434c5e
editorSuggestWidget.background#2e3440
editorSuggestWidget.border#3b4252
editorSuggestWidget.foreground#d8dee9
editorSuggestWidget.highlightForeground#88c0d0
editorSuggestWidget.selectedBackground#434c5e
editorWarning.border#ebcb8b00
editorWarning.foreground#ebcb8b
editorWhitespace.foreground#4c566ab3
editorWidget.background#2e3440
editorWidget.border#3b4252
errorForeground#bf616a
extensionButton.prominentBackground#434c5e
extensionButton.prominentForeground#d8dee9
extensionButton.prominentHoverBackground#4c566a
focusBorder#3b4252
foreground#d8dee9
input.background#3b4252
input.border#3b4252
input.foreground#d8dee9
input.placeholderForeground#d8dee999
inputOption.activeBorder#88c0d0
inputValidation.errorBackground#bf616a
inputValidation.errorBorder#bf616a
inputValidation.infoBackground#81a1c1
inputValidation.infoBorder#81a1c1
inputValidation.warningBackground#d08770
inputValidation.warningBorder#d08770
list.activeSelectionBackground#88c0d0
list.activeSelectionForeground#2e3440
list.dropBackground#88c0d099
list.errorForeground#FF615A
list.focusBackground#88c0d099
list.focusForeground#d8dee9
list.highlightForeground#88c0d0
list.hoverBackground#3b4252
list.hoverForeground#eceff4
list.inactiveSelectionBackground#434c5e
list.inactiveSelectionForeground#d8dee9
list.warningForeground#D88770
listFilterWidget.background#3b4252
listFilterWidget.noMatchesOutline#bf616a
listFilterWidget.outline#88c0d0
merge.border#3b425200
merge.currentContentBackground#81a1c14d
merge.currentHeaderBackground#81a1c166
merge.incomingContentBackground#8fbcbb4d
merge.incomingHeaderBackground#8fbcbb66
panel.background#2e3440
panel.border#3b4252
panelTitle.activeBorder#88c0d000
panelTitle.activeForeground#88c0d0
panelTitle.inactiveForeground#d8dee9
peekView.border#4c566a
peekViewEditor.background#2e3440
peekViewEditor.matchHighlightBackground#88c0d0cc
peekViewEditorGutter.background#2e3440
peekViewResult.background#2e3440
peekViewResult.fileForeground#88c0d0
peekViewResult.lineForeground#d8dee966
peekViewResult.matchHighlightBackground#88c0d0cc
peekViewResult.selectionBackground#434c5e
peekViewResult.selectionForeground#d8dee9
peekViewTitle.background#3b4252
peekViewTitleDescription.foreground#d8dee9
peekViewTitleLabel.foreground#88c0d0
pickerGroup.border#3b425200
pickerGroup.foreground#d8dee9
progressBar.background#88c0d0
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#434c5e99
scrollbarSlider.background#434c5e88
scrollbarSlider.hoverBackground#434c5e99
selection.background#88c0d099
sideBar.background#2e3440
sideBar.border#3b4252
sideBar.foreground#d8dee9
sideBarSectionHeader.background#3b4252
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#3b4252
statusBar.border#3b425200
statusBar.debuggingBackground#5E81AC
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#d8dee9
statusBar.noFolderBackground#3b4252
statusBar.noFolderForeground#d8dee9
statusBarItem.activeBackground#4c566a
statusBarItem.hoverBackground#434c5e
statusBarItem.prominentBackground#3b4252
statusBarItem.prominentHoverBackground#434c5e
tab.activeBackground#3b4252
tab.activeBorder#88c0d0
tab.activeForeground#d8dee9
tab.border#3b425200
tab.inactiveBackground#2e3440
tab.inactiveForeground#d8dee966
tab.unfocusedActiveBorder#88c0d000
tab.unfocusedActiveForeground#d8dee999
tab.unfocusedInactiveForeground#d8dee966
terminal.ansiBlack#3b4252
terminal.ansiBlue#83afe5
terminal.ansiBrightBlack#4c566a
terminal.ansiBrightBlue#83afe5
terminal.ansiBrightCyan#8fbcbb
terminal.ansiBrightGreen#DDF88F
terminal.ansiBrightMagenta#d18ec2
terminal.ansiBrightRed#df8c8c
terminal.ansiBrightWhite#eceff4
terminal.ansiBrightYellow#ebcb8b
terminal.ansiCyan#88c0d0
terminal.ansiGreen#a8ce93
terminal.ansiMagenta#d18ec2
terminal.ansiRed#df8c8c
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ebcb8b
titleBar.activeBackground#2e3440
titleBar.activeForeground#d8dee9
titleBar.border#2e344000
titleBar.inactiveBackground#2e3440
titleBar.inactiveForeground#d8dee966
walkThrough.embeddedEditorBackground#2e3440
welcomePage.buttonBackground#434c5e
welcomePage.buttonHoverBackground#4c566a
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#828997	italic
comment.documentation, meta.attribute.rust, string.quoted.docstring.multi.python, meta.function.decorator.python, entity.name.function.decorator.python, comment.line.documentation.rust, comment.block.documentation.rust	#81a1c1	—
keyword, storage.modifier, storage.type	#FFFFFF	—
variable.other.constant, entity.name.type, support.class, support.type, support.constant.core.rust, storage.class.std.rust, support.class.builtin.js, support.constant.math.js, entity.name.type.js, variable.other.readwrite.alias.js, entity.other.inherited-class.js, string.quoted.double.include.c, string.quoted.other.lt-gt.include.c, constant.other.elm	#D18EC2	—
support.function, entity.name.function, variable.other.anonymous, punctuation.definition.parameters, entity.name.function.js, punctuation.accessor.js, meta.brace.round.js, meta.function-call.generic.python, punctuation.definition.arguments, entity.name.function.c	#83afe5	—
variable.parameter.function.ruby, variable.other.readwrite.js, variable.parameter.js	#d8dee9	—
keyword.other.special-method, keyword.other.unsafe.rust, keyword.control.pseudo-method, support.function.log.rust, support.type.python, support.type.exception.python	#DF8C8C	—
constant.other.symbol, constant.language.symbol, variable.other.readwrite, storage.modifier.lifetime.rust, storage.modifier.static.rust, meta.object-literal.key.js, storage.type.core.rust, meta.type_params.rust, support.constant.elm, support.variable.property.js, variable.other.object.property.js, variable.other.property.js, support.variable.property.dom.js, storage.type.c	#88C0D0	—
constant.language, variable.language, support.constant.core.rust, variable.other.object.ruby, support.variable.magic.python, variable.parameter.function.language.special.self.python	#9A93E1	—
string, punctuation.definition.string.begin, punctuation.definition.string.end	#A8CE93	—
support.function.variable.quoted.single.elixir, string.quoted.single.ruby	#ddf88f	—
constant.character.escape, punctuation.section.embedded, punctuation.definition.template-expression	#DF8C8C	—
source.elixir.embedded, meta.embedded	#d8dee9	—
string.regexp, punctuation.section.regexp	#ddf88f	—
constant.numeric	#d8a13b	—
keyword.operator, punctuation.definition.variable, punctuation.separator.key-value, punctuation.separator.variable.ruby	#EBCB8B	—
punctuation	#FFFFFF	—
entity.name.tag, support.type.property-name, support.type.property-name.css	#D18EC2	—
entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css, support.type.property-name.json	#EBCB8B	—
string.quoted.double.html, string.quoted.double.json	#A8CE93	—
punctuation.definition.tag	#88C0D0	—
entity.name.tag.structure	#d8dee9	—
support.type.property-value, meta.property-value	#83AFE5	—
keyword.other.unit	#DF8C8C	—
support.class.component.js	—	italic bold
markup.heading	#88C0D0	bold
markup.italic	#88c0d0	italic
markup.bold	#88c0d0	bold
string.other.link.title	#83AFE5	bold
markup.underline.link, constant.other.reference.link	#D18EC2	underline
beginning.punctuation.definition.list, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#5E81AC	—
markup.inline.raw, markup.raw, markup.quote, markup.fenced_code.block, punctuation.definition.raw.markdown	#A8CE93	—
invalid	#ff615a	—

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