Dolch Theme

Name: Dolch Theme
Author: be5invis

Publisher: be5invisThemes in package: 4

Dolch themes for VS Code.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dolch Theme — Dolch 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#B8BCBF
activityBar.foreground#2A2D2F
activityBarBadge.background#168FAA
activityBarBadge.foreground#E4E9EB
badge.background#168FAA
badge.foreground#E4E9EB
breadcrumb.activeSelectionForeground#00809D
breadcrumb.focusForeground#00809D
breadcrumb.foreground#767A7C
breadcrumbPicker.background#DFE4E6
button.background#61AEC5
button.foreground#E4E9EB
button.hoverBackground#7CBED2
debugToolBar.background#CDD1D4FF
diffEditor.insertedTextBackground#4DA46D1A
diffEditor.removedTextBackground#DA776C26
dropdown.background#DFE4E6
dropdown.border#A1A5A7
dropdown.foreground#3B3F41
editor.background#EDF1F4
editor.findMatchBackground#87430050
editor.findMatchHighlightBackground#A7632940
editor.findRangeHighlightBackground#A2A6A940
editor.foreground#3B3F41
editor.inactiveSelectionBackground#5C606250
editor.lineHighlightBackground#DFE4E6
editor.selectionBackground#00809D50
editor.selectionHighlightBackground#61AEC540
editor.wordHighlightBackground#8B8F9240
editor.wordHighlightStrongBackground#439FB740
editorActiveLineNumber.foreground#191C1E
editorBracketHighlight.foreground1#0091C9
editorBracketHighlight.foreground2#009785
editorBracketHighlight.foreground3#6E8D3B
editorBracketHighlight.foreground4#B7733C
editorBracketHighlight.foreground5#CC6082
editorBracketHighlight.foreground6#8977C7
editorBracketMatch.background#A2A6A940
editorBracketMatch.border#8B8F91BF
editorCodeLens.foreground#767A7C
editorCursor.foreground#005476
editorError.foreground#AC413A
editorGroup.border#CDD2D4
editorGroupHeader.noTabsBackground#EDF1F4
editorGroupHeader.tabsBackground#EDF1F4
editorGutter.addedBackground#63B47F
editorGutter.deletedBackground#E9897E
editorGutter.modifiedBackground#00B6CA
editorHint.foreground#0068B9
editorInfo.foreground#0068B9
editorLineNumber.foreground#767A7C
editorLink.activeForeground#005476
editorOverviewRuler.addedForeground#00597433
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#191C1E4D
editorOverviewRuler.deletedForeground#00597433
editorOverviewRuler.errorForeground#DA776CE6
editorOverviewRuler.findMatchForeground#C7844FE6
editorOverviewRuler.infoForeground#5496E1E6
editorOverviewRuler.modifiedForeground#00597433
editorOverviewRuler.warningForeground#A89243E6
editorOverviewRuler.wordHighlightForeground#191C1E4D
editorOverviewRuler.wordHighlightStrongForeground#191C1E4D
editorSuggestWidget.background#EDF1F4FF
editorWarning.foreground#766300
editorWidget.background#DFE4E6FF
errorForeground#CB655B
focusBorder#439FB7
foreground#3B3F41
gitDecoration.addedResourceForeground#00753A
gitDecoration.conflictingResourceForeground#AC413A
gitDecoration.deletedResourceForeground#AC413A
gitDecoration.modifiedResourceForeground#007790
gitDecoration.untrackedResourceForeground#00753A
input.background#EDF1F4
input.border#A1A5A7
input.foreground#3B3F41
input.placeholderForeground#767A7C
inputOption.activeBorder#168FAA
list.activeSelectionBackground#439FB740
list.activeSelectionForeground#191C1E
list.errorForeground#AC413A
list.focusBackground#439FB740
list.focusForeground#191C1E
list.highlightForeground#168FAA
list.hoverBackground#B8BCBF
list.inactiveSelectionBackground#8B8F924D
list.inactiveSelectionForeground#191C1E
list.warningForeground#766300
minimap.findMatchHighlight#A7632940
minimap.selectionHighlight#00809D50
notification.errorBackground#E9897E
notification.errorForeground#AC413A
notification.infoBackground#6DA7EE
notification.infoForeground#0068B9
notification.warningBackground#B9A257
notification.warningForeground#766300
panel.border#A1A5A7
panelTitle.activeBorder#439FB7
peekView.border#B7BBBD
peekViewEditor.background#B8BCBF2B
peekViewTitle.background#DFE4E6FF
scrollbar.shadow#0000001A
scrollbarSlider.activeBackground#191C1E26
scrollbarSlider.background#191C1E13
scrollbarSlider.hoverBackground#191C1E26
sideBar.background#DFE4E6
sideBarSectionHeader.background#B8BCBF
sideBarTitle.foreground#191C1E
statusBar.background#CDD1D4
statusBar.debuggingBackground#CDD1D4
statusBar.debuggingForeground#3B3F41
statusBar.foreground#3B3F41
statusBar.noFolderBackground#CDD1D4
statusBar.noFolderForeground#3B3F41
tab.activeBackground#EDF1F4
tab.activeBorder#007190
tab.activeForeground#191C1E
tab.border#EDF1F4
tab.hoverBackground#DFE4E6
tab.hoverBorder#439FB7
tab.inactiveBackground#EDF1F4
tab.inactiveForeground#4E5254
textLink.activeForeground#007190
textLink.foreground#00809D
titleBar.activeBackground#45494B
titleBar.activeForeground#CDD2D4
titleBar.inactiveBackground#5C6062
titleBar.inactiveForeground#B7BBBD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, meta.definition.variable.name, support.variable, variable.other.readwrite, variable.other.constant, variable.other.readonly	#3B3F41	—
variable.parameter, variable.other.local, variable.other.constant	#3B3F41	italic
variable.other.property, variable.other.constant.property	#315667	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#3B3F41	—
comment, punctuation.comment, punctuation.definition.comment	#767A7C	—
keyword.operator	#005476	—
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace	#767A7C	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.definition.typeparameters	#456A7C	—
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string	#00809D	italic
meta.template.expression.ts	—
constant.numeric, constant.dec.numeric, constant.hex.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language	#006283	—
entity.name.namespace, entity.name.type.module	#043140	—
entity.name.type	#007373	—
support.type	#006465	—
entity.name.type.parameter	#007373	italic
constant.character, constant.other, entity.name, entity.name.class, entity.name.function, entity.other.inherited-class, entity.other.attribute-name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, string.key, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json	#2A2D2F	—
entity.name.function.member	#2A2D2F	—
variable.language.this	#191C1E	—
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as	#191C1E	bold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag	#191C1E	bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx	—	—
meta.preprocessor	#2A2D2F	—
support.class, support.function, support.constant	#2A2D2F	—
invalid	#BB534A	—
invalid.deprecated	#BB534A	—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation	#2A2D2F	—
markup.heading, entity.name.section	#191C1E	bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code	#00809D	italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline	#2A2D2F	—
variable.language.makefile, variable.other.makefile	#2A2D2F	—
markup.italic	—	italic
markup.bold	—	bold
entity.other.attribute-name.class.css	#2A2D2F	—
entity.name.tag.css	#191C1E	bold
meta.property-name.css	#2A2D2F	—

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