Shape Theme

Name: Shape Theme
Author: apk

Publisher: apkThemes in package: 2

A minimalistic theme designed with the goal of increased readability and reduced visual clutter. The code structure is outlined with a simple set of vibrant colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Shape Theme — Shape

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#131c28
activityBar.foreground#fff
activityBarBadge.background#ffffff99
activityBarBadge.foreground#131c28
button.background#fff
button.foreground#314365
diffEditor.insertedTextBackground#00809B33
dropdown.background#1d1f23
dropdown.border#131c28
editor.background#192434
editor.findMatchBackground#42557B
editor.findMatchHighlightBackground#314365
editor.foreground#fffeca
editor.lineHighlightBackground#161f2c
editor.selectionBackground#42557B
editorCodeLens.foreground#FFCB6B
editorCursor.foreground#F8FAFD
editorError.border#FF000011
editorError.foreground#FF4A4AEE
editorGroup.background#131c28
editorGroup.border#131c28
editorGroupHeader.tabsBackground#131c28
editorHoverWidget.background#131c28
editorHoverWidget.border#131c28
editorIndentGuide.background#3b465560
editorLineNumber.foreground#747D9170
editorLink.activeForeground#ffffff
editorSuggestWidget.background#131c28
editorSuggestWidget.border#131c28
editorSuggestWidget.selectedBackground#2c313a
editorWarning.border#FFEFC411
editorWarning.foreground#FFEFC4
editorWhitespace.foreground#3B4048
editorWidget.background#131c28
input.background#131c28
list.activeSelectionBackground#5A637550
list.activeSelectionForeground#ffffff
list.focusBackground#5A637540
list.highlightForeground#929faf
list.hoverBackground#5A637520
list.inactiveSelectionBackground#5A637540
list.inactiveSelectionForeground#ffffff
notification.background#131c28
scrollbarSlider.activeBackground#747D9180
scrollbarSlider.background#4E566680
scrollbarSlider.hoverBackground#5A637580
sideBar.background#131c28
sideBarSectionHeader.background#131c28
statusBar.background#131c28
statusBar.debuggingBackground#131c28
statusBar.foreground#747D91
statusBar.noFolderBackground#131c28
statusBarItem.hoverBackground#5A637540
tab.activeBackground#192433
tab.border#192433
tab.inactiveBackground#131c28
titleBar.activeBackground#192433
titleBar.activeForeground#747D91
titleBar.inactiveBackground#131c28
titleBar.inactiveForeground#747D9160

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta, punctuation, punctuation.definition.tag, punctuation.section.embedded, keyword.operator, storage.type.function.arrow, meta.arrow	#FFFFFFEE
comment, punctuation.definition.comment	#5099ab	italic
comment.block.documentation entity.name.tag, comment.block.documentation punctuation.definition.tag	#6C9BAF	italic
source, variable, string constant.other.placeholder, entity.name.variable.local, meta.tag, entity.name, entity.name.function, entity.name.tag, keyword.other.special-method, markup.deleted.git_gutter, meta.block variable.other, meta.function-call, meta.tag.sgml, support.function, support.other.variable, support.variable.property.dom, variable, variable.function, variable.language, variable.parameter, entity.name.type.namespace, meta.block, meta.object.member, meta.object-literal.key, entity.name.type.module	#49F3C3	—
keyword, storage, storage.type.function, storage.type, storage.type.type, storage.modifier, meta.type.declaration, keyword.operator.new, invalid, support.type.primitive	#FF6E89	italic
constant, support.constant, string, meta.group.regexp, markup.heading, meta.type.parameters entity.name.type	#fffeca	—
string.quoted, punctuation.definition.string.begin, punctuation.definition.string.	#fffeca	italic
meta.type.parameters entity.name.type, entity.name.type.type-parameter	#FFCB6B	—
entity, source.cs storage.type, entity.name.type, support.type, support.class, support.function.attribute	#FFCB6B
markup.inserted	#49F3C3	—
markup.deleted	#FF6E89	—
markup.changed	#fffeca	—
url, link, uri	—	underline
token.info-token	#6796e6	—
token.warn-token	#FFEFC4	—
token.error-token	#FF6E89	—
token.debug-token	#b267e6	—
source.json meta.structure.dictionary.json support.type.property-name.json	#49F3C3	—
source.json string.quoted.double.json	—	italic
source.json constant.language.json	#FF6E89	—
markup.heading.markdown entity.name.section.markdown, text.html.markdown markup.heading punctuation, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#FF6E89	italic
text.html.markdown, meta.paragraph.markdown	#fffeca
text.html.markdown markup.underline.link.markdown	#49F3C3
text.html.markdown punctuation, beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote, text.html.markdown punctuation.definition.string.begin, text.html.markdown punctuation.definition.string.end	#FFFFFF
text.xml meta.tag.preprocessor.xml, text.xml meta.tag.xml	#FFFFFF
meta.tag.xml entity.other.attribute-name, text.xml meta.tag.preprocessor.xml entity.other.attribute-name.xml	#FF6E89
meta.tag.xml entity.name.tag	#49F3C3
text.xml	#fffeca	italic
source.shell keyword, source.shell support.function.builtin	#FF6E89	italic
source.shell meta.function.shell meta.scope, source.shell meta.function.shell meta.scope meta.scope, source.shell meta.function.shell meta.scope meta.scope meta.scope, source.shell meta.function.shell meta.scope meta.scope meta.scope meta.scope, source.shell meta.function.shell meta.scope meta.scope meta.scope meta.scope meta.scope, source.shell meta.function.shell meta.scope meta.scope meta.scope meta.scope meta.scope meta.scope, source.shell meta.scope, source.shell meta.scope meta.scope, source.shell meta.scope meta.scope meta.scope, source.shell meta.scope meta.scope meta.scope meta.scope, source.shell meta.scope meta.scope meta.scope meta.scope meta.scope, source.shell meta.scope meta.scope meta.scope meta.scope meta.scope meta.scope	#49F3C3	—
source.powershell support.function	#FF6E89	italic
source.powershell, source.powershell entity.other.attribute-name, source.powershell keyword.other, source.powershell storage.modifier.scope	#FFFFFF
source.powershell interpolated.simple.source support.constant.automatic	#49F3C3
source.powershell constant.numeric.scientific	—
	#FF6E89	italic
source.java meta.class storage.type	#FFCB6B	—
	#FFFFFF
source.java storage.modifier.import, source.java storage.modifier.package	#49F3C3
	—
text.html entity.other.attribute-name	#FF6E89	italic
	#FFCB6B	—
text.html meta.tag	#FFFFFF
text.html.basic meta.tag punctuation.definition.tag.html meta, text.html.basic meta.tag punctuation.definition.tag.html, text.html.basic meta.tag punctuation.definition.tag.begin.html, text.html.basic meta.tag punctuation.definition.tag.end.html	#49F3C3
text.html, text.html string.quoted, text.html string.quoted meta, text.html meta.tag string.quoted, text.html invalid	#fffeca
source.css meta.property-list meta.property-name support.type	#FF6E89	italic
source.css constant.numeric keyword	#FFCB6B
	#FFFFFF
source.css meta.selector entity	#49F3C3
source.css meta.property-list meta.property-value	#fffeca
source.dosbatch variable.other	#fffeca
	#FF6E89	italic
source.cpp meta.class-struct-block, source.cpp meta.namespace-block	#FFCB6B
	#FFFFFF
source.cpp meta.function	#49F3C3
	#fffeca
source.python keyword.operator.logical	#FF6E89	italic
	#FFCB6B
	#FFFFFF
meta.item-access.python, meta.item-access.python meta.item-access.arguments	#49F3C3
	#fffeca
storage.type.js, string.regexp punctuation.definition.string.begin.js, string.regexp punctuation.definition.string.end.js	#FF6E89	italic
source.js support.variable.object, new.expr.js entity.name.type.js	#FFCB6B
	#FFFFFF
source.js support.variable.property, source.js variable.other.object, entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#49F3C3
	#fffeca
source.ts keyword.operator.expression, source.ts variable.language.this	#FF6E89	italic
source.ts entity.name.type.module	#FFCB6B
	#FFFFFF
support.variable.property.ts	#49F3C3
	#fffeca
constant.language.unit.fsharp	#FF6E89	italic
	#FFCB6B
	#FFFFFF
	#49F3C3
	#fffeca
source.dockerfile	#49F3C3
source.dockerfile keyword.other.special-method.dockerfile	#FF6E89	italic
text.log log.error	#FF6E89	italic
text.log log.warning	#FFCB6B
text.log log.info, text.log log.debug	#FFFFFF
text.log log.date, text.log log.constant, text.log log.string, text.log log.exception	#49F3C3
text.log	#fffeca
	#FF6E89	italic
	#FFCB6B
	#FFFFFF
	#49F3C3
	#fffeca

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