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 Alter

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#BFBBB9
activityBar.foreground#2F2C2A
activityBarBadge.background#B27700
activityBarBadge.foreground#ECE7E5
badge.background#B27700
badge.foreground#ECE7E5
breadcrumb.activeSelectionForeground#A16800
breadcrumb.focusForeground#A16800
breadcrumb.foreground#7D7977
breadcrumbPicker.background#E6E2E0
button.background#D49937
button.foreground#ECE7E5
button.hoverBackground#E5AA4F
debugToolBar.background#D4D0CDFF
diffEditor.insertedTextBackground#51A46B1A
diffEditor.removedTextBackground#DB776E26
dropdown.background#E6E2E0
dropdown.border#A7A3A1
dropdown.foreground#413E3C
editor.background#F4F0ED
editor.findMatchBackground#88420050
editor.findMatchHighlightBackground#A9622B40
editor.findRangeHighlightBackground#A9A5A340
editor.foreground#413E3C
editor.inactiveSelectionBackground#635F5D50
editor.lineHighlightBackground#E6E2E0
editor.selectionBackground#A1680050
editor.selectionHighlightBackground#D4993740
editor.wordHighlightBackground#928E8C40
editor.wordHighlightStrongBackground#C3881B40
editorActiveLineNumber.foreground#1E1B19
editorBracketHighlight.foreground1#9A812F
editorBracketHighlight.foreground2#3B9459
editorBracketHighlight.foreground3#0096AA
editorBracketHighlight.foreground4#2D87D3
editorBracketHighlight.foreground5#B469AC
editorBracketHighlight.foreground6#CB645D
editorBracketMatch.background#A9A5A340
editorBracketMatch.border#928E8BBF
editorCodeLens.foreground#7D7977
editorCursor.foreground#703A00
editorError.foreground#AC403C
editorGroup.border#D4D0CE
editorGroupHeader.noTabsBackground#F4F0ED
editorGroupHeader.tabsBackground#F4F0ED
editorGutter.addedBackground#67B47D
editorGutter.deletedBackground#EA8980
editorGutter.modifiedBackground#00B6C8
editorHint.foreground#0069B9
editorInfo.foreground#0069B9
editorLineNumber.foreground#7D7977
editorLink.activeForeground#703A00
editorOverviewRuler.addedForeground#00597133
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#1E1B194D
editorOverviewRuler.deletedForeground#00597133
editorOverviewRuler.errorForeground#DB776EE6
editorOverviewRuler.findMatchForeground#C98350E6
editorOverviewRuler.infoForeground#4E97E1E6
editorOverviewRuler.modifiedForeground#00597133
editorOverviewRuler.warningForeground#AA9143E6
editorOverviewRuler.wordHighlightForeground#1E1B194D
editorOverviewRuler.wordHighlightStrongForeground#1E1B194D
editorSuggestWidget.background#F4F0EDFF
editorWarning.foreground#786200
editorWidget.background#E6E2E0FF
errorForeground#CB645D
focusBorder#C3881B
foreground#413E3C
gitDecoration.addedResourceForeground#007437
gitDecoration.conflictingResourceForeground#AC403C
gitDecoration.deletedResourceForeground#AC403C
gitDecoration.modifiedResourceForeground#00778D
gitDecoration.untrackedResourceForeground#007437
input.background#F4F0ED
input.border#A7A3A1
input.foreground#413E3C
input.placeholderForeground#7D7977
inputOption.activeBorder#B27700
list.activeSelectionBackground#C3881B40
list.activeSelectionForeground#1E1B19
list.errorForeground#AC403C
list.focusBackground#C3881B40
list.focusForeground#1E1B19
list.highlightForeground#B27700
list.hoverBackground#BFBBB9
list.inactiveSelectionBackground#928E8C4D
list.inactiveSelectionForeground#1E1B19
list.warningForeground#786200
minimap.findMatchHighlight#A9622B40
minimap.selectionHighlight#A1680050
notification.errorBackground#EA8980
notification.errorForeground#AC403C
notification.infoBackground#68A7EE
notification.infoForeground#0069B9
notification.warningBackground#BBA157
notification.warningForeground#786200
panel.border#A7A3A1
panelTitle.activeBorder#C3881B
peekView.border#BEBAB7
peekViewEditor.background#BFBBB92B
peekViewTitle.background#E6E2E0FF
scrollbar.shadow#0000001A
scrollbarSlider.activeBackground#1E1B1926
scrollbarSlider.background#1E1B1913
scrollbarSlider.hoverBackground#1E1B1926
sideBar.background#E6E2E0
sideBarSectionHeader.background#BFBBB9
sideBarTitle.foreground#1E1B19
statusBar.background#D4D0CD
statusBar.debuggingBackground#D4D0CD
statusBar.debuggingForeground#413E3C
statusBar.foreground#413E3C
statusBar.noFolderBackground#D4D0CD
statusBar.noFolderForeground#413E3C
tab.activeBackground#F4F0ED
tab.activeBorder#905800
tab.activeForeground#1E1B19
tab.border#F4F0ED
tab.hoverBackground#E6E2E0
tab.hoverBorder#C3881B
tab.inactiveBackground#F4F0ED
tab.inactiveForeground#54514F
textLink.activeForeground#905800
textLink.foreground#A16800
titleBar.activeBackground#4B4846
titleBar.activeForeground#D4D0CE
titleBar.inactiveBackground#635F5D
titleBar.inactiveForeground#BEBAB7

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	#413E3C	—
variable.parameter, variable.other.local, variable.other.constant	#413E3C	italic
variable.other.property, variable.other.constant.property	#654C3C	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#413E3C	—
comment, punctuation.comment, punctuation.definition.comment	#7D7977	—
keyword.operator	#703A00	—
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	#7D7977	—
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	#7A604F	—
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	#A16800	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	#804900	—
entity.name.namespace, entity.name.type.module	#3D2819	—
entity.name.type	#B93409	—
support.type	#A81B00	—
entity.name.type.parameter	#B93409	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	#2F2C2A	—
entity.name.function.member	#2F2C2A	—
variable.language.this	#1E1B19	—
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	#1E1B19	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	#1E1B19	bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx	—	—
meta.preprocessor	#2F2C2A	—
support.class, support.function, support.constant	#2F2C2A	—
invalid	#BC524D	—
invalid.deprecated	#BC524D	—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation	#2F2C2A	—
markup.heading, entity.name.section	#1E1B19	bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code	#A16800	italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline	#2F2C2A	—
variable.language.makefile, variable.other.makefile	#2F2C2A	—
markup.italic	—	italic
markup.bold	—	bold
entity.other.attribute-name.class.css	#2F2C2A	—
entity.name.tag.css	#1E1B19	bold
meta.property-name.css	#2F2C2A	—

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