Boxy Theme Kit

Name: Boxy Theme Kit
Author: Thanh Tran

Publisher: Thanh TranThemes in package: 9

Tomorrow Night, Monokai, Nova, Ocean, Solarized Dark, Solarized Light, and Yesterday color schemes in Sublime Boxy Theme kit.

GitHub

Color themes

VS Code preview

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

Boxy Theme Kit — Boxy Ocean Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

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#dddddd
activityBar.foreground#334466
activityBarBadge.background#2673c0
editor.background#FAFAFA
editor.findMatchBackground#bb80b375
editor.foreground#17242b
editor.lineHighlightBackground#e6e6e6
editor.rangeHighlightBackground#dddddd
editor.selectionBackground#e6e6e6
editorBracketMatch.background#ffffff
editorBracketMatch.border#99c794
editorCursor.foreground#2673c0
editorIndentGuide.activeBackground#9D9D9F
editorIndentGuide.background#dddddd
editorLineNumber.activeForeground#383A42
editorLineNumber.foreground#9D9D9F
editorWhitespace.foreground#9D9D9F
list.activeSelectionBackground#dddddd
list.activeSelectionForeground#17242b
list.hoverBackground#dddddd
list.inactiveSelectionBackground#dddddd
list.inactiveSelectionForeground#17242b
sideBar.background#eeeeee
statusBar.background#cccccc
statusBar.foreground#1b2b34
statusBar.noFolderBackground#6699cc
tab.inactiveBackground#e6e6e6
titleBar.activeBackground#e6e6e6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#17242bff	—
comment, comment punctuation.definition.comment	#ababab	italic
comment variable.other	#65737e	italic
comment punctuation.definition.block.tag, comment punctuation.definition.bracket.curly	#5fb3b3	—
comment storage.type	#c594c5	italic
variable, string constant.other.placeholder	#17242b	—
invalid	#c91d25	—
invalid.deprecated	#b431b4	—
keyword, storage.type, storage.modifier, storage.control	#b431b4	—
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#027979	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#c20a13	—
meta.function-call.generic.python, support.function.builtin.python, entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace, entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level	#2673c0	—
support.other.variable, string.other.link	#c20a13	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#cd5818	—
meta.object-literal.key, variable.object.property, string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#4da244	normal
entity.name.type, entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, meta.metadata.simple	#c98f1d	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#c91d25	—
variable.language	#c91d25	italic
entity.name.method.js	#2673c0	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#2673c0	—
entity.other.attribute-name	#b431b4	—
markup.inserted	#4da244	—
markup.deleted	#c91d25	—
markup.changed	#b431b4	—
string.regexp	#027979	—
constant.character.escape	#027979	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#ab7967	—
entity.name.filename.find-in-files	#4da244	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#2673c0	italic
source.js constant.other.object.key.js string.unquoted.label.js	#c91d25	italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#c91d25bf	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#2673c0bf	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#c98f1dbf	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#b431b4	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#cd5818	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#c91d25	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#2673c0	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#c98f1d	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#b431b4	—
text.html.markdown, punctuation.definition.list_item.markdown	#17242b	—
text.html.markdown markup.inline.raw	#65737e	—
text.html.markdown meta.dummy.line-break	#334466	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#c20a13	—
markup.heading, markup.heading.markdown string.other.link.title.markdown	—	bold
markup.italic, markup.italic string	—	italic
markup.bold, markup.bold string	—	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	—	bold italic
markup.underline	#ababab	underline
markup.strike	#65737e	strike
markup.quote punctuation.definition.blockquote.markdown	#ffffff16	—
markup.quote	#65737e	italic
string.other.link.title	#2673c0	—
markup.quote string.other.link.title	#2673c0	italic
string.other.link.description.title.markdown	#b431b4	—
constant.other.reference.link.markdown	#c98f1d	—
markup.raw.block	#17242bcc	—
markup.fenced_code.block.markdown	—	—
punctuation.definition.fenced.markdown	—	—
markup.fenced_code.block.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#17242b	—
punctuation.definition.fenced.markdown, meta.definition.language.raw.block.fenced.markdown	#334466	—
variable.language.fenced.markdown	#65737e	—
meta.separator	#65737e	bold
markup.table	#17242bcc	—
text.html.markdown punctuation.definition, text.html.markdown.note punctuation.definition.list_item.markdown, markup.table.markdown punctuation.definition.table.vertical-line.markdown, text.html.markdown markup.checkbox.markdown	#027979	—
text.html.markdown punctuation.definition.list.begin	#cd5818	—
text.html.markdown punctuation.definition.quote.begin	#ab7967	normal
text.html.markdown meta.disable-markdown punctuation.definition	#027979	—
punctuation.definition.list_item.todo.done	#4da244	—
punctuation.definition.list_item.todo.cancelled	#c91d25	—
markup.checkbox.markdown markup.checkbox.checked_symbol.markdown	#4da244	—
markup.admonition.markdown string.other.admonition.title.markdown	#17242b	bold
markup.admonition.markdown markup.admonition.header.markdown	—	—
markup.admonition.markdown markup.admonition.body.markdown	—	—
markup.admonition.markdown punctuation.definition.admonition.markdown, markup.admonition.markdown punctuation.definition.heading,markup.admonition.markdown punctuation.definition.table.vertical-line, markup.admonition.markdown punctuation.definition.table.horizontal-line, markup.admonition.markdown punctuation.definition.table.alignments, markup.admonition.markdown punctuation.definition.heading, markup.admonition.markdown punctuation.definition.bold, markup.admonition.markdown punctuation.definition.italic, markup.admonition.markdown punctuation.definition.list_item, markup.admonition.markdown punctuation.definition.raw, markup.admonition.markdown markup.checkbox.markdown, markup.admonition.markdown punctuation.definition.list_item.todo.pending, markup.admonition.markdown meta.link punctuation.definition, markup.admonition.markdown meta.link.inline markup.underline.link, markup.admonition.markdown meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown punctuation.definition.entity.html, markup.admonition.markdown meta.separator.markdown, markup.admonition.markdown markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown meta.definition.language.raw.block.fenced.markdown	#bb80b375	—
markup.admonition.markdown entity.name.admonition.markdown	#bb80b3	bold
markup.admonition.markdown markup.table, markup.admonition.markdown markup.raw, markup.admonition.markdown markup.raw.block.fenced meta.language, markup.admonition.markdown punctuation.definition.blockquote.markdown, markup.admonition.markdown meta.separator, markup.admonition.markdown markup.inline.raw, markup.admonition.markdown markup.raw.block	—	—
markup.admonition.markdown markup.quote punctuation.definition.blockquote.markdown	#bb80b335	—
markup.admonition.markdown.hint markup.admonition.header.markdown	—	—
markup.admonition.markdown.hint markup.admonition.body.markdown	—	—
markup.admonition.markdown.hint punctuation.definition.admonition.markdown, markup.admonition.markdown.hint punctuation.definition.heading,markup.admonition.markdown.hint punctuation.definition.table.vertical-line, markup.admonition.markdown.hint punctuation.definition.table.horizontal-line, markup.admonition.markdown.hint punctuation.definition.table.alignments, markup.admonition.markdown.hint punctuation.definition.heading, markup.admonition.markdown.hint punctuation.definition.bold, markup.admonition.markdown.hint punctuation.definition.italic, markup.admonition.markdown.hint punctuation.definition.list_item, markup.admonition.markdown.hint punctuation.definition.raw, markup.admonition.markdown.hint markup.checkbox.markdown, markup.admonition.markdown.hint punctuation.definition.list_item.todo.pending, markup.admonition.markdown.hint meta.link punctuation.definition, markup.admonition.markdown.hint meta.link.inline markup.underline.link, markup.admonition.markdown.hint meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.hint punctuation.definition.entity.html, markup.admonition.markdown.hint meta.separator.markdown, markup.admonition.markdown.hint markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.hint meta.definition.language.raw.block.fenced.markdown	#2673c075	—
markup.admonition.markdown.hint entity.name.admonition.markdown	#2673c0	bold
markup.admonition.markdown.hint markup.table, markup.admonition.markdown.hint markup.raw, markup.admonition.markdown.hint markup.raw.block.fenced meta.language, markup.admonition.markdown.hint punctuation.definition.blockquote.markdown, markup.admonition.markdown.hint meta.separator, markup.admonition.markdown.hint markup.inline.raw, markup.admonition.markdown.hint markup.raw.block	—	—
markup.admonition.markdown.hint markup.quote punctuation.definition.blockquote.markdown	#2673c035	—
markup.admonition.markdown.warning markup.admonition.header.markdown	—	—
markup.admonition.markdown.warning markup.admonition.body.markdown	—	—
markup.admonition.markdown.warning punctuation.definition.admonition.markdown, markup.admonition.markdown.warning punctuation.definition.heading,markup.admonition.markdown.warning punctuation.definition.table.vertical-line, markup.admonition.markdown.warning punctuation.definition.table.horizontal-line, markup.admonition.markdown.warning punctuation.definition.table.alignments, markup.admonition.markdown.warning punctuation.definition.heading, markup.admonition.markdown.warning punctuation.definition.bold, markup.admonition.markdown.warning punctuation.definition.italic, markup.admonition.markdown.warning punctuation.definition.list_item, markup.admonition.markdown.warning punctuation.definition.raw, markup.admonition.markdown.warning markup.checkbox.markdown, markup.admonition.markdown.warning punctuation.definition.list_item.todo.pending, markup.admonition.markdown.warning meta.link punctuation.definition, markup.admonition.markdown.warning meta.link.inline markup.underline.link, markup.admonition.markdown.warning meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.warning punctuation.definition.entity.html, markup.admonition.markdown.warning meta.separator.markdown, markup.admonition.markdown.warning markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.warning meta.definition.language.raw.block.fenced.markdown	#c98f1d75	—
markup.admonition.markdown.warning entity.name.admonition.markdown	#c98f1d	bold
markup.admonition.markdown.warning markup.table, markup.admonition.markdown.warning markup.raw, markup.admonition.markdown.warning markup.raw.block.fenced meta.language, markup.admonition.markdown.warning punctuation.definition.blockquote.markdown, markup.admonition.markdown.warning meta.separator, markup.admonition.markdown.warning markup.inline.raw, markup.admonition.markdown.warning markup.raw.block	—	—
markup.admonition.markdown.warning markup.quote punctuation.definition.blockquote.markdown	#c98f1d35	—
markup.admonition.markdown.danger markup.admonition.header.markdown	—	—
markup.admonition.markdown.danger markup.admonition.body.markdown	—	—
markup.admonition.markdown.danger punctuation.definition.admonition.markdown, markup.admonition.markdown.danger punctuation.definition.heading,markup.admonition.markdown.danger punctuation.definition.table.vertical-line, markup.admonition.markdown.danger punctuation.definition.table.horizontal-line, markup.admonition.markdown.danger punctuation.definition.table.alignments, markup.admonition.markdown.danger punctuation.definition.heading, markup.admonition.markdown.danger punctuation.definition.bold, markup.admonition.markdown.danger punctuation.definition.italic, markup.admonition.markdown.danger punctuation.definition.list_item, markup.admonition.markdown.danger punctuation.definition.raw, markup.admonition.markdown.danger markup.checkbox.markdown, markup.admonition.markdown.danger punctuation.definition.list_item.todo.pending, markup.admonition.markdown.danger meta.link punctuation.definition, markup.admonition.markdown.danger meta.link.inline markup.underline.link, markup.admonition.markdown.danger meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.danger punctuation.definition.entity.html, markup.admonition.markdown.danger meta.separator.markdown, markup.admonition.markdown.danger markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.danger meta.definition.language.raw.block.fenced.markdown	#c91d2575	—
markup.admonition.markdown.danger entity.name.admonition.markdown	#c91d25	bold
markup.admonition.markdown.danger markup.table, markup.admonition.markdown.danger markup.raw, markup.admonition.markdown.danger markup.raw.block.fenced meta.language, markup.admonition.markdown.danger punctuation.definition.blockquote.markdown, markup.admonition.markdown.danger meta.separator, markup.admonition.markdown.danger markup.inline.raw, markup.admonition.markdown.danger markup.raw.block	—	—
markup.admonition.markdown.danger markup.quote punctuation.definition.blockquote.markdown	#c91d2535	—
markup.admonition.markdown.attention markup.admonition.header.markdown	—	—
markup.admonition.markdown.attention markup.admonition.body.markdown	—	—
markup.admonition.markdown.attention punctuation.definition.admonition.markdown, markup.admonition.markdown.attention punctuation.definition.heading,markup.admonition.markdown.attention punctuation.definition.table.vertical-line, markup.admonition.markdown.attention punctuation.definition.table.horizontal-line, markup.admonition.markdown.attention punctuation.definition.table.alignments, markup.admonition.markdown.attention punctuation.definition.heading, markup.admonition.markdown.attention punctuation.definition.bold, markup.admonition.markdown.attention punctuation.definition.italic, markup.admonition.markdown.attention punctuation.definition.list_item, markup.admonition.markdown.attention punctuation.definition.raw, markup.admonition.markdown.attention markup.checkbox.markdown, markup.admonition.markdown.attention punctuation.definition.list_item.todo.pending, markup.admonition.markdown.attention meta.link punctuation.definition, markup.admonition.markdown.attention meta.link.inline markup.underline.link, markup.admonition.markdown.attention meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.attention punctuation.definition.entity.html, markup.admonition.markdown.attention meta.separator.markdown, markup.admonition.markdown.attention markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.attention meta.definition.language.raw.block.fenced.markdown	#4da24475	—
markup.admonition.markdown.attention entity.name.admonition.markdown	#4da244	bold
markup.admonition.markdown.attention markup.table, markup.admonition.markdown.attention markup.raw, markup.admonition.markdown.attention markup.raw.block.fenced meta.language, markup.admonition.markdown.attention punctuation.definition.blockquote.markdown, markup.admonition.markdown.attention meta.separator, markup.admonition.markdown.attention markup.inline.raw, markup.admonition.markdown.attention markup.raw.block	—	—
markup.admonition.markdown.attention markup.quote punctuation.definition.blockquote.markdown	#4da24435	—
acejump.label	#ffffff	—
sublimelinter.mark.warning	#c98f1d	—
sublimelinter.gutter-mark	#ffffff	—
sublimelinter.mark.error	#c91d25	—
markup.ignored.git_gutter	#65737e	—
markup.untracked.git_gutter	#65737e	—
markup.inserted.git_gutter	#4da244	—
markup.changed.git_gutter	#c98f1d	—
markup.deleted.git_gutter	#c91d25	—
brackethighlighter.default	#b431b4	—
brackethighlighter.unmatched	#c91d25	—
brackethighlighter.curly	#bb80b3	—
brackethighlighter.round	#c98f1d	—
brackethighlighter.square	#2673c0	—
brackethighlighter.angle	#cd5818	—
brackethighlighter.tag	#027979	—
brackethighlighter.quote	#4da244	—
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}!`;
}