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

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#464A4C
activityBar.foreground#C7CBCE
activityBarBadge.background#006B8C
activityBarBadge.foreground#DFE3E6
badge.background#006B8C
badge.foreground#DFE3E6
breadcrumb.activeSelectionForeground#00ACCE
breadcrumb.focusForeground#00ACCE
breadcrumb.foreground#6F7375
breadcrumbPicker.background#222527
button.background#0096B7
button.foreground#DFE3E6
button.hoverBackground#00ACCE
debugToolBar.background#343739FF
diffEditor.insertedTextBackground#28814D1A
diffEditor.removedTextBackground#B4564D26
dropdown.background#222527
dropdown.border#464A4C
dropdown.foreground#B0B4B7
editor.background#101416
editor.findMatchBackground#FFB77350
editor.findMatchHighlightBackground#D78C5040
editor.findRangeHighlightBackground#5A5E6040
editor.foreground#B0B4B7
editor.inactiveSelectionBackground#9A9EA050
editor.lineHighlightBackground#222527
editor.selectionBackground#00ACCE50
editor.selectionHighlightBackground#006B8C40
editor.wordHighlightBackground#6F737540
editor.wordHighlightStrongBackground#0080A140
editorActiveLineNumber.foreground#DFE3E6
editorBracketHighlight.foreground1#0095CE
editorBracketHighlight.foreground2#009B89
editorBracketHighlight.foreground3#72913F
editorBracketHighlight.foreground4#BC7740
editorBracketHighlight.foreground5#D06486
editorBracketHighlight.foreground6#8D7CCC
editorBracketMatch.background#5A5E6040
editorBracketMatch.border#5A5E60BF
editorCodeLens.foreground#6F7375
editorCursor.foreground#7BF2FF
editorError.foreground#FF9285
editorGroup.border#222527
editorGroupHeader.noTabsBackground#101416
editorGroupHeader.tabsBackground#101416
editorGutter.addedBackground#136B3C
editorGutter.deletedBackground#98433B
editorGutter.modifiedBackground#006D80
editorHint.foreground#67B8FF
editorInfo.foreground#67B8FF
editorLineNumber.foreground#6F7375
editorLink.activeForeground#7BF2FF
editorOverviewRuler.addedForeground#00FDFF33
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#DFE3E64D
editorOverviewRuler.deletedForeground#00FDFF33
editorOverviewRuler.errorForeground#B4564DE6
editorOverviewRuler.findMatchForeground#A26330E6
editorOverviewRuler.infoForeground#2575BCE6
editorOverviewRuler.modifiedForeground#00FDFF33
editorOverviewRuler.warningForeground#847123E6
editorOverviewRuler.wordHighlightForeground#DFE3E64D
editorOverviewRuler.wordHighlightStrongForeground#DFE3E64D
editorSuggestWidget.background#101416FF
editorWarning.foreground#CDB253
editorWidget.background#222527FF
errorForeground#CF695F
focusBorder#0080A1
foreground#B0B4B7
gitDecoration.addedResourceForeground#5FC886
gitDecoration.conflictingResourceForeground#FF9285
gitDecoration.deletedResourceForeground#FF9285
gitDecoration.modifiedResourceForeground#00CBE4
gitDecoration.untrackedResourceForeground#5FC886
input.background#101416
input.border#464A4C
input.foreground#B0B4B7
input.placeholderForeground#6F7375
inputOption.activeBorder#0096B7
list.activeSelectionBackground#0080A140
list.activeSelectionForeground#DFE3E6
list.errorForeground#FF9285
list.focusBackground#0080A140
list.focusForeground#DFE3E6
list.highlightForeground#0096B7
list.hoverBackground#464A4C
list.inactiveSelectionBackground#6F73754D
list.inactiveSelectionForeground#DFE3E6
list.warningForeground#CDB253
minimap.findMatchHighlight#D78C5040
minimap.selectionHighlight#00ACCE50
notification.errorBackground#98433B
notification.errorForeground#FF9285
notification.infoBackground#0060A1
notification.infoForeground#67B8FF
notification.warningBackground#6D5C12
notification.warningForeground#CDB253
panel.border#464A4C
panelTitle.activeBorder#0080A1
peekView.border#343739
peekViewEditor.background#464A4C2B
peekViewTitle.background#222527FF
scrollbar.shadow#0000001A
scrollbarSlider.activeBackground#DFE3E626
scrollbarSlider.background#DFE3E613
scrollbarSlider.hoverBackground#DFE3E626
sideBar.background#222527
sideBarSectionHeader.background#464A4C
sideBarTitle.foreground#DFE3E6
statusBar.background#343739
statusBar.debuggingBackground#343739
statusBar.debuggingForeground#B0B4B7
statusBar.foreground#B0B4B7
statusBar.noFolderBackground#343739
statusBar.noFolderForeground#B0B4B7
tab.activeBackground#101416
tab.activeBorder#38C3E5
tab.activeForeground#DFE3E6
tab.border#101416
tab.hoverBackground#222527
tab.hoverBorder#0080A1
tab.inactiveBackground#101416
tab.inactiveForeground#9A9EA0
textLink.activeForeground#38C3E5
textLink.foreground#00ACCE
titleBar.activeBackground#343739
titleBar.activeForeground#C7CBCE
titleBar.inactiveBackground#464A4C
titleBar.inactiveForeground#B0B4B7

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	#B0B4B7	—
variable.parameter, variable.other.local, variable.other.constant	#B0B4B7	italic
variable.other.property, variable.other.constant.property	#7EA3B5	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#B0B4B7	—
comment, punctuation.comment, punctuation.definition.comment	#6F7375	—
keyword.operator	#7BF2FF	—
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	#6F7375	—
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	#688C9F	—
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	#00ACCE	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	#5CDAFC	—
entity.name.namespace, entity.name.type.module	#ABD0E4	—
entity.name.type	#3EC6C4	—
support.type	#5EDEDB	—
entity.name.type.parameter	#3EC6C4	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	#C7CBCE	—
entity.name.function.member	#C7CBCE	—
variable.language.this	#DFE3E6	—
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	#DFE3E6	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	#DFE3E6	bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx	—	—
meta.preprocessor	#C7CBCE	—
support.class, support.function, support.constant	#C7CBCE	—
invalid	#EC7D71	—
invalid.deprecated	#EC7D71	—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation	#C7CBCE	—
markup.heading, entity.name.section	#DFE3E6	bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code	#00ACCE	italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline	#C7CBCE	—
variable.language.makefile, variable.other.makefile	#C7CBCE	—
markup.italic	—	italic
markup.bold	—	bold
entity.other.attribute-name.class.css	#C7CBCE	—
entity.name.tag.css	#DFE3E6	bold
meta.property-name.css	#C7CBCE	—

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