7lou Theme

Name: 7lou Theme
Author: Bachir Amiri

Publisher: Bachir AmiriThemes in package: 1

A sweet, minimal, pastel theme

Open in VS Code GitHub

VS Code preview

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

7lou Theme — 7lou Theme

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#171e27
activityBar.foreground#f692b2
activityBar.inactiveForeground#9dcaf8
activityBarBadge.background#f26190
activityBarBadge.foreground#f8f8f2
badge.background#212b38
badge.foreground#f8f8f2
breadcrumb.activeSelectionForeground#f8f8f2
breadcrumb.background#212b38
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#f8f8f2
breadcrumbPicker.background#191a21
button.background#212b38
button.foreground#f8f8f2
debugToolBar.background#212b38
diffEditor.insertedTextBackground#caffb5
diffEditor.removedTextBackground#ff555550
dropdown.background#343746
dropdown.foreground#f8f8f2
editor.background#212b38
editor.findMatchBackground#526170
editor.findMatchBorder#f8f8f2
editor.findMatchHighlightBackground#8a793c
editor.findMatchHighlightBorder#ffcb6b
editor.selectionBackground#385480
editor.selectionHighlightBackground#46689f
editorBracketMatch.background#252b39
editorBracketMatch.border#f692b2
editorCodeLens.foreground#7984a7
editorGroupHeader.tabsBackground#212b38
editorGutter.addedBackground#a0b989
editorGutter.deletedBackground#d6547f
editorGutter.modifiedBackground#6ec1d680
editorHoverWidget.background#212b38
editorLineNumber.foreground#999999
editorRuler.foreground#424450
editorSuggestWidget.background#152334
editorSuggestWidget.border#152334
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.selectedBackground#243551
editorWarning.foreground#6ec1d6
editorWidget.background#171e27
focusBorder#212b38
foreground#9dcaf8
gitDecoration.conflictingResourceForeground#ffb86c
gitDecoration.deletedResourceForeground#ff5555
gitDecoration.ignoredResourceForeground#7984a7
gitDecoration.modifiedResourceForeground#6ec1d6
gitDecoration.untrackedResourceForeground#caffb5
input.background#212b38
input.border#171e27
input.foreground#eeffff
input.placeholderForeground#eeffff60
inputOption.activeBorder#f8b1c8
inputValidation.errorBorder#ff5370
inputValidation.infoBorder#82aaff
inputValidation.warningBorder#ffcb6b
list.activeSelectionBackground#212b38
list.activeSelectionForeground#f8f8f2
list.dropBackground#212b38
list.errorForeground#ff5555
list.focusBackground#212b3875
list.highlightForeground#6ec1d6
list.hoverBackground#212b3875
list.inactiveSelectionBackground#212b3875
list.warningForeground#ffb86c
menu.background#171e27
menu.separatorBackground#f692b2
panel.background#212b38
panel.border#9dcaf875
panelTitle.activeForeground#f8b1c8
panelTitle.inactiveForeground#f8f8f2
progressBar.background#6ec1d6
settings.checkboxBackground#171e27
settings.checkboxBorder#191a21
settings.checkboxForeground#f8f8f2
settings.dropdownBackground#171e27
settings.dropdownBorder#191a21
settings.dropdownForeground#f8f8f2
settings.headerForeground#f8f8f2
settings.modifiedItemIndicator#ffb86c
settings.numberInputBackground#171e27
settings.numberInputBorder#191a21
settings.numberInputForeground#f8f8f2
settings.textInputBackground#171e27
settings.textInputBorder#191a21
settings.textInputForeground#f8f8f2
sideBar.background#171e27
sideBar.foreground#ffffff
sideBarSectionHeader.background#212b38
statusBar.background#171e27
statusBar.debuggingBackground#ffcb6b
statusBar.debuggingForeground#212b38
statusBar.foreground#9dcaf8
statusBar.noFolderBackground#212b38
statusBar.noFolderForeground#9dcaf8
statusBarItem.activeBackground#171e27
tab.activeBorder#f26190
tab.activeForeground#f692b2
tab.border#212b38
tab.inactiveBackground#171e27
tab.inactiveForeground#eeeeee
terminal.ansiBlack#171e27
terminal.ansiBlue#9dcaf8
terminal.ansiBrightBlack#7984a7
terminal.ansiBrightBlue#d6acff
terminal.ansiBrightCyan#a4ffff
terminal.ansiBrightGreen#94cf95
terminal.ansiBrightMagenta#ff92df
terminal.ansiBrightRed#ff6e6e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffffa5
terminal.ansiCyan#6ec1d6
terminal.ansiGreen#caffb5
terminal.ansiMagenta#ff79c6
terminal.ansiRed#ff5555
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#fde184
terminal.background#212b38
terminal.foreground#f8f8f2
terminal.selectionBackground#9dcaf875
terminalCursor.foreground#9dcaf8
textLink.activeForeground#ffcb6b
textLink.foreground#f8b1c8
titleBar.activeBackground#171e27
titleBar.inactiveBackground#212b38
walkThrough.embeddedEditorBackground#171e27

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage.type.class	#C5A5C5	italic
string	#8DC891	—
function	#79B6F2	—
variable, meta.jsx.children	#FFFFFF	—
type, support.type, support.type.property-name.json.comments	#FAC863	—
variable.other.constant	#8BE9EE	—
markup.heading.1 punctuation.definition.heading	#FF0000	—
constant.character.entity	#D67C9B	—
entity.name.exception	#D67C9B	—
entity.name.function, support.function, support.class.builtin, keyword.other.name-of-parameter	#79B6F2	—
entity.name.tag	#FC929E	—
support.class, support.class.component	#FAC863	—
constant.numeric, punctuation.terminator.statement, support.variable.property.dom	#FC929E	—
entity.other.inherited-class, entity.name.type	#FAC863	—
storage.modifier, storage.type	#C5A5C5	italic
constructor	#79B6F2	—
variable.language, entity.other.attribute-name	#C5A5C5	italic
constant.language.boolean, constant.language.null, constant.language.undefined	#FF8B50	italic
variable.parameter, variable.other.readwrite, meta.object-literal.key	#FFFFFF	—
variable.other.constant	#27E2F1	—
variable.other.property	#BEEDFF	—
meta.object-literal.key	#8ADF69	—
meta.var.expr meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key	#CAFFB5	—
string.unquoted, constant.other.object.key	#8ADF69	—
punctuation, punctuation.definition.tag, punctuation.section.embedded, meta.brace.round, meta.array.literal	#88C6BE	—
keyword.operator	#F38E9A
keyword.operator.new	#F38E9A	italic
comment, punctuation.definition.comment, comment.line, comment.line.double-slash	#797979	italic
entity.name.class	#FAC863
entity.name.class.decorator, variable.other.readwrite.decorator	#88C6BE	italic
variable.other.class, meta.property.class	#A4FFFF	—
support.type.object.console, support.class.console.tsx	#FAC863	italic
storage.type.function.arrow, meta.function.arrow	—
source.json meta.structure.dictionary.json support.type.property-name.json	#FAC863	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F79D70	—
source.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	#FF92DF	—
source.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	#8BE9FD	—
source.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	#C5A5C5	—
source.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	#F38E9A	—
source.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	#88C6BE	—
source.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	#82AAFF	—
source.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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6E6E	—
keyword, storage.type.class	#FFFFA5	italic
string	#CAFFB5	—
function	#9DCAF8	—
variable, meta.jsx.children	#FFFFFF	—
type, support.type, support.type.property-name.json.comments	#FFCB6B	—
variable.other.constant	#8BE9EE	—
markup.heading.1 punctuation.definition.heading	#D6547F	—
constant.character.entity	#D67C9B	—
entity.name.exception	#D67C9B	—
entity.name.function, support.function, support.class.builtin, keyword.other.name-of-parameter	#9DCAF8	—
entity.name.tag	#EAA27F	—
support.class, support.class.component	#FFCB6B	—
constant.numeric, punctuation.terminator.statement, support.variable.property.dom	#FFFFA5	—
entity.other.inherited-class, entity.name.type	#FFCB6B	—
storage.modifier, storage.type	#FFA3C0	italic
constructor	#9DCAF8	—
variable.language, entity.other.attribute-name	#F692B2	italic
constant.language.boolean, constant.language.null, constant.language.undefined	#EAA27F	italic
variable.parameter, variable.other.readwrite, meta.object-literal.key	#FFFFFF	—
variable.other.constant	#7FE4D2	—
variable.other.property	#BEEDFF	—
meta.object-literal.key	#79C07B	—
meta.var.expr meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key	#CAFFB5	—
string.unquoted, constant.other.object.key	#79C07B	—
punctuation, punctuation.definition.tag, punctuation.section.embedded, meta.brace.round, meta.array.literal	#88C6BE	—
keyword.operator	#F38E9A
keyword.operator.new	#F38E9A	italic
comment, punctuation.definition.comment, comment.line, comment.line.double-slash	#999999	italic
entity.name.class	#FFCB6B
entity.name.class.decorator, variable.other.readwrite.decorator	#88C6BE	italic
variable.other.class, meta.property.class	#A4FFFF	—
support.type.object.console, support.class.console.tsx	#FFCB6B	italic
storage.type.function.arrow, meta.function.arrow	—
source.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFB86C	—
source.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	#FF92DF	—
source.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	#6EC1D6	—
source.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	#F692B2	—
source.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	#F38E9A	—
source.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	#88C6BE	—
source.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	#82AAFF	—
source.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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6E6E	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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