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 Alter

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

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#4C4947
activityBar.foreground#CECAC8
activityBarBadge.background#845300
activityBarBadge.foreground#E6E2DF
badge.background#845300
badge.foreground#E6E2DF
breadcrumb.activeSelectionForeground#CA933C
breadcrumb.focusForeground#CA933C
breadcrumb.foreground#75716F
breadcrumbPicker.background#272422
button.background#B37D1E
button.foreground#E6E2DF
button.hoverBackground#CA933C
debugToolBar.background#393634FF
diffEditor.insertedTextBackground#2D814B1A
diffEditor.removedTextBackground#B4554F26
dropdown.background#272422
dropdown.border#4C4947
dropdown.foreground#B7B3B1
editor.background#161310
editor.findMatchBackground#FFB67550
editor.findMatchHighlightBackground#D98B5240
editor.findRangeHighlightBackground#605D5A40
editor.foreground#B7B3B1
editor.inactiveSelectionBackground#A09C9A50
editor.lineHighlightBackground#272422
editor.selectionBackground#CA933C50
editor.selectionHighlightBackground#84530040
editor.wordHighlightBackground#75716F40
editor.wordHighlightStrongBackground#9B680040
editorActiveLineNumber.foreground#E6E2DF
editorBracketHighlight.foreground1#9E8533
editorBracketHighlight.foreground2#3F985D
editorBracketHighlight.foreground3#009BAE
editorBracketHighlight.foreground4#348CD8
editorBracketHighlight.foreground5#B96DB0
editorBracketHighlight.foreground6#D06961
editorBracketMatch.background#605D5A40
editorBracketMatch.border#605D5ABF
editorCodeLens.foreground#75716F
editorCursor.foreground#FFD98F
editorError.foreground#FF9187
editorGroup.border#272422
editorGroupHeader.noTabsBackground#161310
editorGroupHeader.tabsBackground#161310
editorGutter.addedBackground#1A6B3A
editorGutter.deletedBackground#99423D
editorGutter.modifiedBackground#006D7E
editorHint.foreground#60B9FF
editorInfo.foreground#60B9FF
editorLineNumber.foreground#75716F
editorLink.activeForeground#FFD98F
editorOverviewRuler.addedForeground#00FDFF33
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#E6E2DF4D
editorOverviewRuler.deletedForeground#00FDFF33
editorOverviewRuler.errorForeground#B4554FE6
editorOverviewRuler.findMatchForeground#A36231E6
editorOverviewRuler.infoForeground#1976BCE6
editorOverviewRuler.modifiedForeground#00FDFF33
editorOverviewRuler.warningForeground#867023E6
editorOverviewRuler.wordHighlightForeground#E6E2DF4D
editorOverviewRuler.wordHighlightStrongForeground#E6E2DF4D
editorSuggestWidget.background#161310FF
editorWarning.foreground#D0B153
editorWidget.background#272422FF
errorForeground#D06961
focusBorder#9B6800
foreground#B7B3B1
gitDecoration.addedResourceForeground#64C883
gitDecoration.conflictingResourceForeground#FF9187
gitDecoration.deletedResourceForeground#FF9187
gitDecoration.modifiedResourceForeground#00CBE1
gitDecoration.untrackedResourceForeground#64C883
input.background#161310
input.border#4C4947
input.foreground#B7B3B1
input.placeholderForeground#75716F
inputOption.activeBorder#B37D1E
list.activeSelectionBackground#9B680040
list.activeSelectionForeground#E6E2DF
list.errorForeground#FF9187
list.focusBackground#9B680040
list.focusForeground#E6E2DF
list.highlightForeground#B37D1E
list.hoverBackground#4C4947
list.inactiveSelectionBackground#75716F4D
list.inactiveSelectionForeground#E6E2DF
list.warningForeground#D0B153
minimap.findMatchHighlight#D98B5240
minimap.selectionHighlight#CA933C50
notification.errorBackground#99423D
notification.errorForeground#FF9187
notification.infoBackground#0061A1
notification.infoForeground#60B9FF
notification.warningBackground#6F5C13
notification.warningForeground#D0B153
panel.border#4C4947
panelTitle.activeBorder#9B6800
peekView.border#393634
peekViewEditor.background#4C49472B
peekViewTitle.background#272422FF
scrollbar.shadow#0000001A
scrollbarSlider.activeBackground#E6E2DF26
scrollbarSlider.background#E6E2DF13
scrollbarSlider.hoverBackground#E6E2DF26
sideBar.background#272422
sideBarSectionHeader.background#4C4947
sideBarTitle.foreground#E6E2DF
statusBar.background#393634
statusBar.debuggingBackground#393634
statusBar.debuggingForeground#B7B3B1
statusBar.foreground#B7B3B1
statusBar.noFolderBackground#393634
statusBar.noFolderForeground#B7B3B1
tab.activeBackground#161310
tab.activeBorder#E1AA57
tab.activeForeground#E6E2DF
tab.border#161310
tab.hoverBackground#272422
tab.hoverBorder#9B6800
tab.inactiveBackground#161310
tab.inactiveForeground#A09C9A
textLink.activeForeground#E1AA57
textLink.foreground#CA933C
titleBar.activeBackground#393634
titleBar.activeForeground#CECAC8
titleBar.inactiveBackground#4C4947
titleBar.inactiveForeground#B7B3B1

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	#B7B3B1	—
variable.parameter, variable.other.local, variable.other.constant	#B7B3B1	italic
variable.other.property, variable.other.constant.property	#B59885	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#B7B3B1	—
comment, punctuation.comment, punctuation.definition.comment	#75716F	—
keyword.operator	#FFD98F	—
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	#75716F	—
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	#9E8270	—
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	#CA933C	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	#F8C173	—
entity.name.namespace, entity.name.type.module	#E4C5B1	—
entity.name.type	#FF9874	—
support.type	#FFB18D	—
entity.name.type.parameter	#FF9874	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	#CECAC8	—
entity.name.function.member	#CECAC8	—
variable.language.this	#E6E2DF	—
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	#E6E2DF	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	#E6E2DF	bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx	—	—
meta.preprocessor	#CECAC8	—
support.class, support.function, support.constant	#CECAC8	—
invalid	#ED7D74	—
invalid.deprecated	#ED7D74	—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation	#CECAC8	—
markup.heading, entity.name.section	#E6E2DF	bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code	#CA933C	italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline	#CECAC8	—
variable.language.makefile, variable.other.makefile	#CECAC8	—
markup.italic	—	italic
markup.bold	—	bold
entity.other.attribute-name.class.css	#CECAC8	—
entity.name.tag.css	#E6E2DF	bold
meta.property-name.css	#CECAC8	—

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