Tiny Light

Name: Tiny Light
Author: luqimin

Publisher: luqiminThemes in package: 1

BEST FOR YOUR EYES!

GitHub

VS Code preview

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

Tiny Light — Tiny Light

fetchUser.ts

index.ts

README.md

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#ddd6c1
activityBar.dropBackground#eee8d5
activityBar.foreground#584c27
activityBarBadge.background#b58900
badge.background#B58900AA
button.background#b58900
button.foreground#ffffff
button.hoverBackground#cc9a00
dropdown.background#EEE8D5
editor.background#fffbe8
editor.findMatchBackground#ddf3be70
editor.findMatchBorder#DEB887
editor.findMatchHighlightBackground#ddf3be70
editor.findMatchHighlightBorder#DEB887
editor.findRangeHighlightBackground#ddf3be70
editor.findRangeHighlightBorder#DEB887
editor.foreground#499504ff
editor.lineHighlightBackground#e8dfc490
editor.selectionBackground#dcd6c5cc
editor.selectionHighlightBackground#fdf2db
editor.selectionHighlightBorder#e5a67b
editor.wordHighlightBackground#efe7d577
editor.wordHighlightStrongBackground#efdbb977
editorCursor.foreground#657B83
editorGroupHeader.tabsBackground#d9d2c2
editorIndentGuide.activeBackground#ccbba1
editorIndentGuide.background#f7f2e4
editorWhitespace.foreground#a8a8a880
editorWidget.background#eee8d5
focusBorder#bd8500
input.background#DDD6C1
input.foreground#586E75
input.placeholderForeground#586E75AA
inputOption.activeBorder#D3AF86
list.activeSelectionBackground#dfca88
list.activeSelectionForeground#6c6c6c
list.focusBackground#dfca8866
list.focusOutline#dfca8844
list.highlightForeground#b58900
list.hoverBackground#dfca8844
list.inactiveSelectionBackground#d1cbb8
notebook.cellEditorBackground#F7F0E0
notification.background#999178
notification.buttonBackground#b58900
notification.buttonForeground#ffffff
notification.buttonHoverBackground#cc9a00
panel.border#ddd6c1
progressBar.background#B58900
selection.background#268BD266
sideBar.background#eee8d5
sideBarTitle.foreground#586e75
statusBar.background#eee8d5
statusBar.debuggingBackground#499504
statusBar.debuggingForeground#fffbe8
statusBar.foreground#586e75
statusBar.noFolderBackground#eee8d5
statusBarItem.activeBackground#ded0a0
statusBarItem.hoverBackground#eae0c0
statusBarItem.prominentBackground#ddd6c1
tab.activeBackground#fffbe8
tab.border#ddd6c1
tab.inactiveBackground#d3cbb7
tab.inactiveForeground#586e75
terminal.ansiBlack#353b43
terminal.ansiBlue#75bfef
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#2aa198
terminal.ansiBrightGreen#586e75
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#dc322f
terminal.ansiBrightWhite#808080
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#93a1a1
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#e6848a
terminal.ansiWhite#606060
terminal.ansiYellow#a8cb8f
terminal.background#fffbe8
terminal.foreground#616161
terminal.selectionBackground#eee8d4
titleBar.activeBackground#eee8d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#3e4b53	—
console.error	#ca0000ff	—
console.input	#00ae50ff	—
console.prompt	#b651bcff	bold
console.warning	#cd6600ff	—
console.debug	#5d6666ff	—
hyperlink	#0d1171ff	—
string	#248C85	—
property	#934b3cff	—
constant	#9b1cebff	—
constant.other.placeholder.py	#7b0000ff	—
entity	#cc3611ff	—
entity.other.inherited-class	#000000ff	—
entity.name.function	#db7800ff	—
keyword	#577909	—
keyword.control, keyword.other.rust	#577909	bold
storage	#577909	—
token.storage.js,token.storage.ts	#577909	bold
meta.selector	#577909	bold
support, support.type, meta.property-name	#3c7a03ff	—
variable	#499504	—
variable.parameter	#a57800ff	—
invalid.deprecated	#333333ff	underline,bold
invalid.illegal	#333333ff	—
string.regexp, string.regexp.character-class	#cf5628ff	—
string.regexp constant.character.escape	#811f24ff	—
support.constant	#c44f00ff	—
support.variable	#295502ff	—
entity.name.namespace, entity.name.scope-resolution, entity.name.class.identifier.namespace.type, support.class	#a57800	—
entity.name.type.namespace, entity.name.type	#268BD2	—
entity.name.type.class, entity.name.class	#268bd2	bold
meta.embedded, source.groovy.embedded	#657B83	—
meta.image.inline.markdown	#373224	—
markup.underline.link.image.markdown	#1564E6	—
string.other.link.description.image.title.markdown	#EA465C	—
text.html.markdown	#499504	—
comment	#93A1A1	italic
punctuation.definition.comment	#93A1A1	italic
comment.conditional.keyword	#859900	—
comment.conditional.define	#268BD2	bold
string.other.link.description.markdown	#EA465C	—
string.other.link.title.markdown	#1A9F00	—
string.regexp	#D30102	—
constant.numeric	#D33682	—
variable.language, variable.scss	#268BD2	—
punctuation.definition.variable	#859900	—
beginning.punctuation.definition.list.markdown	#4E3B00	—
punctuation.definition.todo.markdown	#E60000	—
beginning.punctuation.definition.numbered.list.markdown	#4E759D	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#D30102	—
constant.language, meta.preprocessor	#B58900	—
support.function.construct, keyword.other.new	#D30102	—
constant.character, constant.other	#CB4B16	—
entity.other.inherited-class	—	—
variable.parameter	—	—
entity.name.tag	#2367C7	—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag	#2367C7	—
entity.other.attribute-name	#cb2d01	—
support.function	#268BD2	—
punctuation.separator.continuation	#D30102	—
support.type.exception	#CB4B16	—
meta.diff, meta.diff.header	#E0EDDD	italic
markup.deleted	#dc322f
markup.underline.link.markdown	#1564E6	—
markup.changed	#cb4b16
markup.inserted	#219186	—
markup.quote.markdown	#C05384	italic
markup.list.numbered.markdown	#35485c	—
markup.list.unnumbered.markdown	#8d634a	—
markup.fenced_code.block.markdown	#325390	italic\|filled
text.html.markdown markup.list.numbered.markdown meta.paragraph.markdown markup.bold.markdown, text.html.markdown markup.list.numbered.markdown meta.paragraph.markdown markup.bold.markdown punctuation.definition.bold.markdown	#35485c	bold
text.html.markdown meta.paragraph.markdown markup.bold.markdown, text.html.markdown meta.paragraph.markdown markup.bold.markdown punctuation.definition.bold.markdown	#373224	bold
text.html.markdown markup.heading.h1.markdown entity.name.section.markdown markup.bold.markdown, text.html.markdown markup.heading.h1.markdown entity.name.section.markdown markup.bold.markdown punctuation.definition.bold.markdown	#154431	bold
text.html.markdown markup.heading.h2.markdown entity.name.section.markdown markup.bold.markdown, text.html.markdown markup.heading.h2.markdown entity.name.section.markdown markup.bold.markdown punctuation.definition.bold.markdown	#10642c	bold
text.html.markdown markup.heading.h3.markdown entity.name.section.markdown markup.bold.markdown, text.html.markdown markup.heading.h3.markdown entity.name.section.markdown markup.bold.markdown punctuation.definition.bold.markdown	#09734f	bold
text.html.markdown markup.heading.h4.markdown entity.name.section.markdown markup.bold.markdown, text.html.markdown markup.heading.h4.markdown entity.name.section.markdown markup.bold.markdown punctuation.definition.bold.markdown	#15936d	bold
text.html.markdown markup.quote.markdown meta.paragraph.markdown markup.bold.markdown, text.html.markdown markup.quote.markdown meta.paragraph.markdown markup.bold.markdown punctuation.definition.bold.markdown	#C05384	bold\|italic
text.html.markdown markup.list.unnumbered.markdown meta.paragraph.markdown markup.bold.markdown, text.html.markdown markup.list.unnumbered.markdown meta.paragraph.markdown markup.bold.markdown punctuation.definition.bold.markdown	#8d634a	bold
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
markup.dividingline.markdown	#B7AF94	—
markup.commondividingline.markdown	#2B2922	—
markup.inline.raw.string.markdown	#db0eb7
markup.heading.h1.markdown	#154431	bold
markup.heading.h2.markdown	#10642c	bold
markup.heading.h3.markdown	#09734f	bold
markup.heading.h4.markdown	#15936d	bold
markup.heading.setext	#268BD2

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