Kalel Theme

Name: Kalel Theme
Author: gabrielvictordev

Publisher: gabrielvictordevThemes in package: 6

A wonderful theme

Open in VS Code GitHub

Color themes

VS Code preview

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

Kalel Theme — Kalel Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#F7F8FC
activityBar.border#B5BBC5CC
activityBar.foreground#5A5F73
activityBarBadge.background#D4D9E8
activityBarBadge.foreground#242933
badge.foreground#EFF1F6
breadcrumb.background#F4F5F8
breadcrumb.foreground#80879A
button.background#DFE5F2
debugConsole.errorForeground#b35470
debugConsole.infoForeground#5A5F73
debugConsole.sourceForeground#4C5174
debugConsole.warningForeground#AF986D
debugToolBar.background#F7F8FC
diffEditor.insertedTextBackground#00708833
dropdown.background#EFF1F6
dropdown.border#D0D4DF
editor.background#F4F5F8
editor.lineHighlightBackground#E6EAF2
editor.selectionBackground#D4DAEA
editorCursor.foreground#232A35
editorError.foreground#A85B5B
editorGroup.border#B5BBC5CC
editorGroup.emptyBackground#F4F5F8
editorGroupHeader.tabsBackground#EFF1F6
editorGroupHeader.tabsBorder#B5BBC5CC
editorHoverWidget.background#F7F8FC
editorHoverWidget.border#B5BBC5CC
editorIndentGuide.activeBackground1#C5C8D4
editorIndentGuide.background1#E4E7F2
editorInfo.foreground#6D704E
editorLineNumber.foreground#9AA0B2
editorLink.activeForeground#6792a0
editorOverviewRuler.border#B5BBC5CC
editorRuler.foreground#C3C7D4
editorSuggestWidget.background#F7F8FC
editorSuggestWidget.border#D0D4DF
editorSuggestWidget.selectedBackground#E5E9F4
editorWarning.foreground#5A6B5C
editorWhitespace.foreground#B9BDD0
editorWidget.background#F7F8FC
focusBorder#00000000
foreground#3A3B44
gitDecoration.ignoredResourceForeground#8A8C98
input.background#EFF2F8
input.border#B5BBC5CC
input.foreground#2F3542
inputValidation.infoBackground#6792A0
inputValidation.infoBorder#6792A0
list.activeSelectionBackground#DADDE8
list.activeSelectionForeground#3B4050
list.focusBackground#DCE2EF
list.highlightForeground#3D4453
list.hoverBackground#E6E9EF
list.inactiveSelectionBackground#DADDE8
list.inactiveSelectionForeground#3B4050
menu.border#B5BBC5CC
menu.separatorBackground#B5BBC5CC
panel.background#F4F5F8
panel.border#B5BBC5CC
panelTitle.activeBorder#00000000
panelTitle.activeForeground#3D4453
peekView.border#D8DDE8
peekViewEditor.background#F1F4FB
peekViewEditor.matchHighlightBackground#E2E8F4
peekViewResult.background#F1F4FB
peekViewResult.fileForeground#3A3B44
peekViewResult.matchHighlightBackground#D4DAE7
peekViewResult.selectionBackground#E8EDF7
peekViewTitle.background#F1F4FB
pickerGroup.border#B5BBC5CC
pickerGroup.foreground#6792a0
progressBar.background#6792a0
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#9099B180
scrollbarSlider.background#B5BBCD80
scrollbarSlider.hoverBackground#AAB1C780
sideBar.background#EFF1F6
sideBar.border#B5BBC5CC
sideBar.foreground#3A3B44
sideBarSectionHeader.background#EDEFF4
sideBarSectionHeader.border#B5BBC5CC
statusBar.background#F7F8FC
statusBar.border#B5BBC5CC
statusBar.debuggingBackground#F7F8FC
statusBar.debuggingForeground#616A7C
statusBar.foreground#616A7C
statusBar.noFolderBackground#F7F8FC
statusBarItem.hoverBackground#E5E9F4
tab.activeBackground#F4F5F8
tab.activeBorder#CCCDD6
tab.activeForeground#3D4453
tab.border#B5BBC5CC
tab.inactiveBackground#EFF1F6
tab.inactiveForeground#6D7285
terminal.ansiBlue#4e7a86
terminal.ansiBrightBlue#4e7a86
terminal.ansiBrightCyan#7f99a1
terminal.ansiBrightGreen#8c84ad
terminal.ansiBrightMagenta#ad8b92
terminal.ansiBrightRed#b35470
terminal.ansiBrightWhite#5A5F73
terminal.ansiBrightYellow#af986d
terminal.ansiCyan#7f99a1
terminal.ansiGreen#8c84ad
terminal.ansiMagenta#ad8b92
terminal.ansiRed#b35470
terminal.ansiWhite#5A5F73
terminal.ansiYellow#af986d
terminal.background#F4F5F8
textLink.foreground#6792a0
titleBar.activeBackground#F7F8FC
titleBar.activeForeground#4A5163
titleBar.border#B5BBC5CC
titleBar.inactiveBackground#F7F8FC
titleBar.inactiveForeground#71788C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#2B2E37	—
comment, string.comment	#6A7182	italic
string	#b48962	—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#8c84ad	—
string.template.js	#b48962	—
meta.template.expression.js	#4f5564	—
constant.numeric	#8c84ad	—
string.embedded.begin, string.embedded.end	#8c84ad	—
string.embedded	#ab8c92	—
constant.language	#8c84ad	—
constant.character, constant.other	#8c84ad	—
variable.language	#375C73	—
variable.readwrite, variable.readwrite.other.block	#415F70	—
keyword, keyword.operator.constructor	#1E5775	—
keyword.operator	#324F74	—
storage	#315E76	—
storage.type	#2B5272	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#304E6E	—
variable.other.object	#476D86	—
variable.other.property, variable.other.block	#4D616C	—
entity.other.inherited-class	#ab8c92	—
entity.name.function, support.function	#6A4C66	—
variable.parameter	#7F70A4	—
entity.name.function-call	#4C5862	—
function.support.builtin, function.support.core	#ab8c92	—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#4e7a86	—
entity.name.tag.class, entity.name.tag.id	#8c84ad	—
entity.other.attribute-name	#8c84ad	—
support.constant	#8c84ad	—
support.type, support.variable	#739199	—
support.dictionary.json	#8c84ad	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#515662	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#ab8c92	—
variable.css, variable.scss, variable.less, variable.sass	#8c84ad	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#b48962	—
unit.css, unit.scss, unit.less, unit.sass	#8c84ad	—
function.css, function.scss, function.less, function.sass	#8c84ad	—
support.other.variable	—
invalid	#3F4253	—
invalid.deprecated	#3F4253	—
structure.dictionary.property-name.json	#8c84ad	—
string.detected-link	#739199	—
meta.diff, meta.diff.header	#62657A	—
markup.deleted	#739199	—
markup.inserted	#b48962	—
markup.changed	#b48962	—
constant.numeric.line-number.find-in-files - match	#8c84adA0	—
entity.name.filename.find-in-files	#b48962	—
markup.italic, markup.italic.markdown	—	italic
punctuation.definition.italic.markdown	#8b8e96
markup.underline.link.markdown	#739199	—
markup.bold.markdown	—	bold
punctuation.definition.bold.markdown	#8b8e96
markup.heading.markdown	#4e7a86	bold
punctuation.definition.heading.markdown	#8b8e96
markup.quote.markdown	#ab8c92	—
meta.separator.markdown	#8c84ad	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#8c84ad	—
punctuation.definition.list_item.markdown	#303540	bold
token.info-token	#5f87bc	—
token.warn-token	#996f44	—
token.error-token	#c85353	—
token.debug-token	#7d5db8	—
variable.parameter.dart	#8c84ad	—
punctuation.comma, punctuation.dot, punctuation.terminator, punctuation.separator.comma, punctuation.accessor, storage.type.function.arrow, keyword.operator.logical	#62657A	—