Lit

Name: Lit
Author: McKayla 🌷

Publisher: McKayla 🌷Themes in package: 2

A Visual Studio Code theme for me and no one else

Open in VS Code GitHub

Color themes

VS Code preview

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

Lit — [mckayla] Lit 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.activeBorder#3961C7
activityBar.background#000
activityBar.foreground#fff
activityBar.inactiveForeground#666
activityBarBadge.background#3961C7
activityBarBadge.foreground#fff
badge.background#3961C7
badge.foreground#fff
breadcrumb.foreground#888
button.background#000
button.foreground#aaa
button.hoverBackground#000b
charts.blue#7cd5f1
charts.foreground#f2fffc
charts.green#a2e57b
charts.lines#6b7678
charts.orange#DBC139
charts.purple#baa0f8
charts.red#ff6d7e
charts.yellow#ffed72
diffEditor.insertedTextBackground#a2e57b19
diffEditor.removedTextBackground#ff6d7e19
editor.background#101316
editor.foreground#DDDBCC
editor.lineHighlightBackground#1A222E
editor.lineHighlightBorder#1A222E
editor.selectionBackground#3961C740
editor.selectionForeground#DDDBCC
editorBracketHighlight.foreground1#DDDBCC
editorBracketHighlight.foreground2#DDDBCC
editorBracketHighlight.foreground3#DDDBCC
editorBracketHighlight.foreground4#DDDBCC
editorBracketHighlight.foreground5#DDDBCC
editorBracketHighlight.foreground6#DDDBCC
editorCursor.background#DDDBCC
editorCursor.foreground#3961C7
editorGroupHeader.tabsBackground#161C25
editorGutter.addedBackground#a2e57b
editorGutter.background#101316
editorGutter.deletedBackground#ff6d7e
editorGutter.modifiedBackground#DBC139
editorIndentGuide.background#3a4449
editorLineNumber.activeForeground#DDDBCC
editorLineNumber.foreground#888
editorRuler.foreground#545f62
editorWhitespace.foreground#545f62
editorWidget.background#18202C
editorWidget.border#444
editorWidget.foreground#DDDBCC
focusBorder#3961C7
input.background#fff2
list.activeSelectionBackground#3961C780
list.activeSelectionForeground#fff
list.focusBackground#3961C760
list.hoverBackground#3961C740
list.inactiveSelectionBackground#3961C740
list.inactiveSelectionForeground#fff
merge.border#161C25
merge.commonContentBackground#f2fffc19
merge.commonHeaderBackground#f2fffc26
merge.currentContentBackground#ff6d7e19
merge.currentHeaderBackground#ff6d7e26
merge.incomingContentBackground#a2e57b19
merge.incomingHeaderBackground#a2e57b26
notificationCenter.border#3a4449
notificationCenterHeader.background#3a4449
notificationCenterHeader.foreground#8b9798
notificationLink.foreground#ffed72
notifications.background#3a4449
notifications.border#3a4449
notifications.foreground#b8c4c3
notificationsErrorIcon.foreground#ff6d7e
notificationsInfoIcon.foreground#7cd5f1
notificationsWarningIcon.foreground#DBC139
notificationToast.border#3a4449
quickInput.background#18202C
quickInput.border#444
quickInput.foreground#DDDBCC
sideBar.background#101316
sideBar.border#444
sideBar.foreground#888
sideBarSectionHeader.background#1A222E
sideBarSectionHeader.border#444
sideBarSectionHeader.foreground#DDDBCC
statusBar.background#000
statusBar.border#161b1e
statusBar.debuggingBackground#3961C7
statusBar.debuggingBorder#1d2528
statusBar.debuggingForeground#f2fffc
statusBar.foreground#aaa
statusBar.noFolderBackground#000
statusBar.noFolderBorder#161b1e
statusBar.noFolderForeground#6b7678
statusBarItem.activeBackground#161C25
statusBarItem.hoverBackground#f2fffc0c
statusBarItem.prominentBackground#3a4449
statusBarItem.prominentHoverBackground#3a4449
statusBarItem.remoteBackground#3961C7
statusBarItem.remoteForeground#aaa
tab.activeBackground#18202C
tab.activeBorder#ffed72
tab.activeForeground#DDDBCC
tab.activeModifiedBorder#545f62
tab.border#161C25
tab.hoverBackground#161C25
tab.hoverBorder#545f62
tab.inactiveBackground#161C25
tab.inactiveForeground#888
tab.inactiveModifiedBorder#545f62
tab.unfocusedActiveBorder#8b9798
tab.unfocusedActiveForeground#b8c4c3
tab.unfocusedActiveModifiedBorder#3a4449
tab.unfocusedHoverBackground#161C25
tab.unfocusedHoverBorder#161C25
tab.unfocusedInactiveForeground#8b9798
tab.unfocusedInactiveModifiedBorder#3961C7
terminal.ansiBlack#999
terminal.ansiBlue#4063D9
terminal.ansiBrightBlack#ccc
terminal.ansiBrightBlue#618BD7
terminal.ansiBrightCyan#92D1DB
terminal.ansiBrightGreen#A2CAA2
terminal.ansiBrightMagenta#DA6CA1
terminal.ansiBrightRed#D76673
terminal.ansiBrightWhite#333
terminal.ansiBrightYellow#E8C05C
terminal.ansiCyan#60B3BD
terminal.ansiGreen#82C06C
terminal.ansiMagenta#D4498C
terminal.ansiRed#D83649
terminal.ansiWhite#666
terminal.ansiYellow#E8B229
terminal.background#101316
terminal.border#3961C7
terminal.foreground#DDDBCC
terminal.selectionBackground#3961C740
terminalCursor.background#DDDBCC
terminalCursor.foreground#3961C7
titleBar.activeBackground#1d2528
titleBar.activeForeground#8b9798
titleBar.border#161b1e
titleBar.inactiveBackground#1d2528
titleBar.inactiveForeground#545f62
welcomePage.buttonBackground#3a4449
welcomePage.buttonHoverBackground#545f62

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#888	—
comment.block.preprocessor	#888
comment.documentation, comment.block.documentation	#888	—
comment.block.documentation punctuation.definition.bracket.curly	#2AB2A0	—
comment.block storage.type	—
comment.block.documentation punctuation.definition.block.tag	#3961C7	—
invalid.illegal	#DD5441	—
keyword.operator	#DD5441	—
keyword.operator.assignment, keyword.operator.type	#DDDBCC
keyword.operator.arithmetic	—
keyword, storage	#3961C7	—
keyword.control.flow, keyword.control.default, storage.modifier	—	bold
keyword.other.definition.ini	#DDDBCC	—
storage.type, support.type, keyword.control	#3961C7	bold
constant.language, support.constant, variable.language	#3961C7	—
constant.language.import-export-all	#DDDBCC	—
variable, support.variable	#DDDBCC	—
meta.tag.attributes variable.other	#DDDBCC	—
entity.name.function, support.function	#3961C7	bold
storage.type.function.arrow	#DDDBCC
entity.name.type, entity.other.inherited-class, meta.type.annotation, support.class	#D4498C	italic
support.class.component	#DDDBCC	bold
entity.name.exception	#cc0000	—
entity.name.section	#3961C7	bold
constant.numeric, constant.character, constant	#DBC139	—
string	#55B45F	—
constant.character.escape	#888	—
string.regexp punctuation.definition.string	#2AB2A0	—
string.regexp	#2AB2A0	—
constant.other.symbol	#F4B02B	—
punctuation	#DDDBCC	—
punctuation.definition.string	#55B45F	—
punctuation.definition.keyword	#3961C7	—
punctuation.definition.entity.ini	#3961C7	bold
punctuation.definition.tag	#DDDBCC	—
punctuation.definition.bold	#DDDBCC	bold
punctuation.definition.heading	#3961C7
punctuation.definition.string.template	#55B45F	—
meta.tag.attributes punctuation	#DDDBCC	—
meta.definition.variable, meta.definition.variable entity.name.function	#DDDBCC	—
meta.function-call entity.name.function	—
meta.link.inline	#2AB2A0	—
support.type, support.type.primitive, meta.type.parameters entity.name.type	#D4498C	—
meta.brace, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag	#D4498C	—
entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, punctuation.definition.tag	#DDDBCC	bold
entity.other.attribute-name, entity.name.tag.css, meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css	#3961C7	bold
keyword.other.unit	#DBC139	italic
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#2AB2A0	italic
constant.character.entity, punctuation.definition.entity	#DBC139	—
meta.property-name, support.type.property-name	#DDDBCC	—
support.type.property-name.json	—	bold
meta.property-value, meta.property-value constant.other, support.constant.property-value	#55B45F	—
keyword.other.important	—	bold
meta.paragraph.markdown	#DDDBCC	—
markup.bold.markdown	#D4498C	—
markup.changed	#DDDBCC	—
markup.deleted	#DDDBCC	—
markup.italic	—	italic
markup.error	#cc0000	—
markup.inserted	#DDDBCC	—
meta.link	#D4498C	—
markup.output, markup.raw	#888888	—
markup.prompt	#888888	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#cc0000	—
markup.underline	—	underline
markup.quote	#3961C7	—
markup.list	#D4498C	—
markup.bold, markup.italic	#55B45F	—
markup.inline.raw	#D4498C
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—
keyword.operator	#3961C7	italic
keyword, storage	#3961C7	italic
storage.type	#3961C7	italic
keyword.control	#3961C7	italic
meta.attribute, entity.name.function.attribute	#DBC139	bold 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}!`;
}