dora-dora Theme

Name: dora-dora Theme
Author: venz-x

Publisher: venz-xThemes in package: 3

A dark, vibrant VS Code color theme inspired by Doraemon.

Open in VS Code GitHub

Color themes

VS Code preview

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

dora-dora Theme — Dora Dora Deep

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.activeBackground#0B0910
activityBar.activeBorder#4E97D9
activityBar.background#0B0910
activityBar.border#0B0910
activityBar.foreground#F2E9E4
activityBar.inactiveForeground#6E6275
activityBarBadge.background#4E97D9
activityBarBadge.foreground#FFFFFF
badge.background#4E97D9
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#4E97D9
breadcrumb.background#1B1720
breadcrumb.focusForeground#F2E9E4
breadcrumb.foreground#6E6275
breadcrumbPicker.background#26202E
button.background#4E97D9
button.foreground#FFFFFF
button.hoverBackground#6FB0E8
button.secondaryBackground#26202E
button.secondaryForeground#F2E9E4
button.secondaryHoverBackground#3D2B45
checkbox.background#26202E
checkbox.border#3A3140
checkbox.foreground#F2E9E4
descriptionForeground#A296A3
diffEditor.diagonalFill#3A3140
diffEditor.insertedLineBackground#6B9E5E15
diffEditor.insertedTextBackground#6B9E5E25
diffEditor.removedLineBackground#C24B4A15
diffEditor.removedTextBackground#C24B4A25
diffEditorGutter.insertedLineBackground#6B9E5E30
diffEditorGutter.removedLineBackground#C24B4A30
dropdown.background#26202E
dropdown.border#3A3140
dropdown.foreground#F2E9E4
dropdown.listBackground#26202E
editor.background#120F1C
editor.findMatchBackground#E08A3C55
editor.findMatchHighlightBackground#E08A3C30
editor.findRangeHighlightBackground#26202E90
editor.foreground#F2E9E4
editor.inactiveSelectionBackground#3D2B4550
editor.lineHighlightBackground#26202E80
editor.lineHighlightBorder#00000000
editor.selectionBackground#3D2B45
editor.selectionHighlightBackground#3D2B4560
editor.wordHighlightBackground#4E97D930
editor.wordHighlightStrongBackground#4E97D945
editorBracketHighlight.foreground1#4E97D9
editorBracketHighlight.foreground2#D9648F
editorBracketHighlight.foreground3#E08A3C
editorBracketHighlight.foreground4#4FA8A0
editorBracketHighlight.foreground5#6B9E5E
editorBracketHighlight.foreground6#EA84AA
editorBracketHighlight.unexpectedBracket.foreground#E06864
editorBracketMatch.background#4E97D930
editorBracketMatch.border#4E97D9
editorCodeLens.foreground#6E6275
editorCursor.background#0B0910
editorCursor.foreground#4E97D9
editorError.foreground#C24B4A
editorGroup.border#0B0910
editorGroupHeader.border#0B0910
editorGroupHeader.tabsBackground#131018
editorGutter.addedBackground#6B9E5E
editorGutter.deletedBackground#C24B4A
editorGutter.modifiedBackground#E08A3C
editorHint.foreground#4FA8A0
editorHoverWidget.background#26202E
editorHoverWidget.border#0B0910
editorIndentGuide.activeBackground1#4E97D960
editorIndentGuide.background1#2E2736
editorInfo.foreground#4E97D9
editorLineNumber.activeForeground#A296A3
editorLineNumber.foreground#4A3F52
editorLink.activeForeground#6FB0E8
editorRuler.foreground#26202E
editorSuggestWidget.background#26202E
editorSuggestWidget.border#0B0910
editorSuggestWidget.foreground#F2E9E4
editorSuggestWidget.highlightForeground#6FB0E8
editorSuggestWidget.selectedBackground#3D2B45
editorWarning.foreground#E08A3C
editorWhitespace.foreground#3A3140
editorWidget.background#26202E
editorWidget.border#0B0910
editorWidget.foreground#F2E9E4
errorForeground#E06864
extensionButton.prominentBackground#4E97D9
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#6FB0E8
focusBorder#4E97D9
foreground#F2E9E4
gitDecoration.addedResourceForeground#6B9E5E
gitDecoration.conflictingResourceForeground#D9648F
gitDecoration.deletedResourceForeground#C24B4A
gitDecoration.ignoredResourceForeground#6E6275
gitDecoration.modifiedResourceForeground#E08A3C
gitDecoration.submoduleResourceForeground#A296A3
gitDecoration.untrackedResourceForeground#4FA8A0
icon.foreground#A296A3
input.background#131018
input.border#3A3140
input.foreground#F2E9E4
input.placeholderForeground#6E6275
inputOption.activeBackground#4E97D930
inputOption.activeBorder#4E97D9
inputValidation.errorBackground#C24B4A30
inputValidation.errorBorder#C24B4A
inputValidation.infoBackground#4E97D930
inputValidation.infoBorder#4E97D9
inputValidation.warningBackground#E08A3C30
inputValidation.warningBorder#E08A3C
list.activeSelectionBackground#3D2B45
list.activeSelectionForeground#F7F0EC
list.dropBackground#4E97D930
list.errorForeground#E06864
list.focusBackground#3D2B4590
list.focusForeground#F7F0EC
list.highlightForeground#6FB0E8
list.hoverBackground#26202E90
list.hoverForeground#4E97D9
list.inactiveSelectionBackground#26202E
list.inactiveSelectionForeground#F2E9E4
list.warningForeground#F2A85C
listFilterWidget.background#26202E
listFilterWidget.outline#4E97D9
menu.background#26202E
menu.border#0B0910
menu.foreground#F2E9E4
menu.selectionBackground#3D2B45
menu.selectionForeground#F7F0EC
menu.separatorBackground#3A3140
menubar.selectionBackground#26202E
menubar.selectionForeground#F7F0EC
minimap.background#131018
minimap.selectionHighlight#3D2B4599
minimapGutter.addedBackground#6B9E5E
minimapGutter.deletedBackground#C24B4A
minimapGutter.modifiedBackground#E08A3C
minimapSlider.activeBackground#4E97D970
minimapSlider.background#3A314050
minimapSlider.hoverBackground#4E97D940
notificationCenter.border#0B0910
notifications.background#26202E
notifications.border#0B0910
notifications.foreground#F2E9E4
notificationsErrorIcon.foreground#C24B4A
notificationsInfoIcon.foreground#4E97D9
notificationsWarningIcon.foreground#E08A3C
notificationToast.border#0B0910
panel.background#131018
panel.border#0B0910
panelInput.border#3A3140
panelTitle.activeBorder#4E97D9
panelTitle.activeForeground#F2E9E4
panelTitle.inactiveForeground#6E6275
peekView.border#4E97D9
peekViewEditor.background#131018
peekViewEditorGutter.background#131018
peekViewResult.background#131018
peekViewResult.selectionBackground#3D2B45
peekViewTitle.background#26202E
peekViewTitleDescription.foreground#A296A3
peekViewTitleLabel.foreground#F2E9E4
pickerGroup.border#3A3140
pickerGroup.foreground#4E97D9
problemsErrorIcon.foreground#C24B4A
problemsInfoIcon.foreground#4E97D9
problemsWarningIcon.foreground#E08A3C
progressBar.background#4E97D9
quickInput.background#26202E
quickInput.foreground#F2E9E4
quickInputList.focusBackground#3D2B45
quickInputList.focusForeground#F7F0EC
quickInputTitle.background#26202E
scrollbar.shadow#0B0910
scrollbarSlider.activeBackground#4E97D970
scrollbarSlider.background#3A314060
scrollbarSlider.hoverBackground#4E97D940
selection.background#3D2B4580
sideBar.background#120F1C
sideBar.border#0B0910
sideBar.foreground#A296A3
sideBarSectionHeader.background#131018
sideBarSectionHeader.border#0B0910
sideBarSectionHeader.foreground#F2E9E4
sideBarTitle.foreground#F2E9E4
statusBar.background#0B0910
statusBar.border#0B0910
statusBar.debuggingBackground#D9648F
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#A296A3
statusBar.noFolderBackground#0B0910
statusBarItem.activeBackground#3D2B45
statusBarItem.hoverBackground#26202E
statusBarItem.prominentBackground#26202E
statusBarItem.remoteBackground#4E97D9
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#1B1720
tab.activeBorder#4E97D9
tab.activeBorderTop#00000000
tab.activeForeground#F7F0EC
tab.border#0B0910
tab.hoverBackground#26202E
tab.inactiveBackground#131018
tab.inactiveForeground#6E6275
tab.unfocusedActiveBackground#1B1720
tab.unfocusedActiveBorder#3D2B45
terminal.ansiBlack#0B0910
terminal.ansiBlue#4E97D9
terminal.ansiBrightBlack#6E6275
terminal.ansiBrightBlue#6FB0E8
terminal.ansiBrightCyan#6BC2BA
terminal.ansiBrightGreen#8CBF7B
terminal.ansiBrightMagenta#EA84AA
terminal.ansiBrightRed#E06864
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F2A85C
terminal.ansiCyan#4FA8A0
terminal.ansiGreen#6B9E5E
terminal.ansiMagenta#D9648F
terminal.ansiRed#C24B4A
terminal.ansiWhite#A296A3
terminal.ansiYellow#E08A3C
terminal.background#131018
terminal.foreground#F2E9E4
terminalCursor.foreground#4E97D9
textBlockQuote.background#26202E
textBlockQuote.border#4E97D9
textCodeBlock.background#131018
textLink.activeForeground#4E97D9
textLink.foreground#6FB0E8
textPreformat.foreground#F2A85C
titleBar.activeBackground#0B0910
titleBar.activeForeground#F2E9E4
titleBar.border#0B0910
titleBar.inactiveBackground#0B0910
titleBar.inactiveForeground#6E6275
tree.indentGuidesStroke#3A3140
welcomePage.tileBackground#26202E
welcomePage.tileBorder#3A3140

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6E6275	italic
string, string.quoted, string.template, punctuation.definition.string	#6B9E5E	—
string.regexp	#4FA8A0	—
constant.numeric, constant.language.boolean, constant.language	#E08A3C	—
constant, variable.other.constant, variable.other.enummember	#F2A85C	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#D9648F	—
keyword.operator	#A296A3	—
entity.name.function, support.function, meta.function-call	#4E97D9	—
entity.name.class, entity.name.type.class, support.class	#4FA8A0	bold
entity.name.type, entity.name.type.interface, entity.other.inherited-class, support.type	#6BC2BA	—
variable, variable.other.readwrite	#F2E9E4	—
variable.parameter	#F7F0EC	italic
variable.other.property, meta.object-literal.key, support.variable.property	#6FB0E8	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#E08A3C	—
entity.name.tag, meta.tag	#D9648F	—
entity.other.attribute-name	#F2A85C	—
punctuation, meta.brace	#A296A3	—
invalid, invalid.illegal	#E06864	underline
markup.heading	#4E97D9	bold
markup.bold	#F7F0EC	bold
markup.italic	#F7F0EC	italic
markup.underline.link	#6FB0E8	—

VS Code preview

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

dora-dora Theme — Dora Dora Green

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.activeBackground#0A0D11
activityBar.activeBorder#3B7FC4
activityBar.background#0A0D11
activityBar.border#0A0D11
activityBar.foreground#E8EDF0
activityBar.inactiveForeground#6B7480
activityBarBadge.background#3B7FC4
activityBarBadge.foreground#FFFFFF
badge.background#3B7FC4
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#3B7FC4
breadcrumb.background#1A2128
breadcrumb.focusForeground#E8EDF0
breadcrumb.foreground#6B7480
breadcrumbPicker.background#242D36
button.background#3B7FC4
button.foreground#FFFFFF
button.hoverBackground#5FA0E8
button.secondaryBackground#242D36
button.secondaryForeground#E8EDF0
button.secondaryHoverBackground#2C3A4A
checkbox.background#242D36
checkbox.border#2E3944
checkbox.foreground#E8EDF0
descriptionForeground#9BA7B0
diffEditor.diagonalFill#2E3944
diffEditor.insertedLineBackground#5E9E7C15
diffEditor.insertedTextBackground#5E9E7C25
diffEditor.removedLineBackground#C23B3615
diffEditor.removedTextBackground#C23B3625
diffEditorGutter.insertedLineBackground#5E9E7C30
diffEditorGutter.removedLineBackground#C23B3630
dropdown.background#242D36
dropdown.border#2E3944
dropdown.foreground#E8EDF0
dropdown.listBackground#242D36
editor.background#1A2128
editor.findMatchBackground#D9A23C55
editor.findMatchHighlightBackground#D9A23C30
editor.findRangeHighlightBackground#242D3690
editor.foreground#E8EDF0
editor.inactiveSelectionBackground#2C3A4A50
editor.lineHighlightBackground#242D3680
editor.lineHighlightBorder#00000000
editor.selectionBackground#2C3A4A
editor.selectionHighlightBackground#2C3A4A60
editor.wordHighlightBackground#3B7FC430
editor.wordHighlightStrongBackground#3B7FC445
editorBracketHighlight.foreground1#3B7FC4
editorBracketHighlight.foreground2#B85C7E
editorBracketHighlight.foreground3#D9A23C
editorBracketHighlight.foreground4#4FA0A8
editorBracketHighlight.foreground5#5E9E7C
editorBracketHighlight.foreground6#D97CA0
editorBracketHighlight.unexpectedBracket.foreground#E4534A
editorBracketMatch.background#3B7FC430
editorBracketMatch.border#3B7FC4
editorCodeLens.foreground#6B7480
editorCursor.background#0A0D11
editorCursor.foreground#3B7FC4
editorError.foreground#C23B36
editorGroup.border#0A0D11
editorGroupHeader.border#0A0D11
editorGroupHeader.tabsBackground#11161B
editorGutter.addedBackground#5E9E7C
editorGutter.deletedBackground#C23B36
editorGutter.modifiedBackground#D9A23C
editorHint.foreground#4FA0A8
editorHoverWidget.background#242D36
editorHoverWidget.border#0A0D11
editorIndentGuide.activeBackground1#3B7FC460
editorIndentGuide.background1#26313C
editorInfo.foreground#3B7FC4
editorLineNumber.activeForeground#9BA7B0
editorLineNumber.foreground#3A4552
editorLink.activeForeground#5FA0E8
editorRuler.foreground#242D36
editorSuggestWidget.background#242D36
editorSuggestWidget.border#0A0D11
editorSuggestWidget.foreground#E8EDF0
editorSuggestWidget.highlightForeground#5FA0E8
editorSuggestWidget.selectedBackground#2C3A4A
editorWarning.foreground#D9A23C
editorWhitespace.foreground#2E3944
editorWidget.background#242D36
editorWidget.border#0A0D11
editorWidget.foreground#E8EDF0
errorForeground#E4534A
extensionButton.prominentBackground#3B7FC4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#5FA0E8
focusBorder#3B7FC4
foreground#E8EDF0
gitDecoration.addedResourceForeground#5E9E7C
gitDecoration.conflictingResourceForeground#B85C7E
gitDecoration.deletedResourceForeground#C23B36
gitDecoration.ignoredResourceForeground#6B7480
gitDecoration.modifiedResourceForeground#D9A23C
gitDecoration.submoduleResourceForeground#9BA7B0
gitDecoration.untrackedResourceForeground#4FA0A8
icon.foreground#9BA7B0
input.background#11161B
input.border#2E3944
input.foreground#E8EDF0
input.placeholderForeground#6B7480
inputOption.activeBackground#3B7FC430
inputOption.activeBorder#3B7FC4
inputValidation.errorBackground#C23B3630
inputValidation.errorBorder#C23B36
inputValidation.infoBackground#3B7FC430
inputValidation.infoBorder#3B7FC4
inputValidation.warningBackground#D9A23C30
inputValidation.warningBorder#D9A23C
list.activeSelectionBackground#2C3A4A
list.activeSelectionForeground#F2F5F7
list.dropBackground#3B7FC430
list.errorForeground#E4534A
list.focusBackground#2C3A4A90
list.focusForeground#F2F5F7
list.highlightForeground#5FA0E8
list.hoverBackground#242D3690
list.hoverForeground#3B7FC4
list.inactiveSelectionBackground#242D36
list.inactiveSelectionForeground#E8EDF0
list.warningForeground#F0BC5C
listFilterWidget.background#242D36
listFilterWidget.outline#3B7FC4
menu.background#242D36
menu.border#0A0D11
menu.foreground#E8EDF0
menu.selectionBackground#2C3A4A
menu.selectionForeground#F2F5F7
menu.separatorBackground#2E3944
menubar.selectionBackground#242D36
menubar.selectionForeground#F2F5F7
minimap.background#11161B
minimap.selectionHighlight#2C3A4A99
minimapGutter.addedBackground#5E9E7C
minimapGutter.deletedBackground#C23B36
minimapGutter.modifiedBackground#D9A23C
minimapSlider.activeBackground#3B7FC470
minimapSlider.background#2E394450
minimapSlider.hoverBackground#3B7FC440
notificationCenter.border#0A0D11
notifications.background#242D36
notifications.border#0A0D11
notifications.foreground#E8EDF0
notificationsErrorIcon.foreground#C23B36
notificationsInfoIcon.foreground#3B7FC4
notificationsWarningIcon.foreground#D9A23C
notificationToast.border#0A0D11
panel.background#11161B
panel.border#0A0D11
panelInput.border#2E3944
panelTitle.activeBorder#3B7FC4
panelTitle.activeForeground#E8EDF0
panelTitle.inactiveForeground#6B7480
peekView.border#3B7FC4
peekViewEditor.background#11161B
peekViewEditorGutter.background#11161B
peekViewResult.background#11161B
peekViewResult.selectionBackground#2C3A4A
peekViewTitle.background#242D36
peekViewTitleDescription.foreground#9BA7B0
peekViewTitleLabel.foreground#E8EDF0
pickerGroup.border#2E3944
pickerGroup.foreground#3B7FC4
problemsErrorIcon.foreground#C23B36
problemsInfoIcon.foreground#3B7FC4
problemsWarningIcon.foreground#D9A23C
progressBar.background#3B7FC4
quickInput.background#242D36
quickInput.foreground#E8EDF0
quickInputList.focusBackground#2C3A4A
quickInputList.focusForeground#F2F5F7
quickInputTitle.background#242D36
scrollbar.shadow#0A0D11
scrollbarSlider.activeBackground#3B7FC470
scrollbarSlider.background#2E394460
scrollbarSlider.hoverBackground#3B7FC440
selection.background#2C3A4A80
sideBar.background#11161B
sideBar.border#0A0D11
sideBar.foreground#9BA7B0
sideBarSectionHeader.background#11161B
sideBarSectionHeader.border#0A0D11
sideBarSectionHeader.foreground#E8EDF0
sideBarTitle.foreground#E8EDF0
statusBar.background#0A0D11
statusBar.border#0A0D11
statusBar.debuggingBackground#B85C7E
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#9BA7B0
statusBar.noFolderBackground#0A0D11
statusBarItem.activeBackground#2C3A4A
statusBarItem.hoverBackground#242D36
statusBarItem.prominentBackground#242D36
statusBarItem.remoteBackground#3B7FC4
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#1A2128
tab.activeBorder#3B7FC4
tab.activeBorderTop#00000000
tab.activeForeground#F2F5F7
tab.border#0A0D11
tab.hoverBackground#242D36
tab.inactiveBackground#11161B
tab.inactiveForeground#6B7480
tab.unfocusedActiveBackground#1A2128
tab.unfocusedActiveBorder#2C3A4A
terminal.ansiBlack#0A0D11
terminal.ansiBlue#3B7FC4
terminal.ansiBrightBlack#6B7480
terminal.ansiBrightBlue#5FA0E8
terminal.ansiBrightCyan#6FC2C8
terminal.ansiBrightGreen#7DBF9C
terminal.ansiBrightMagenta#D97CA0
terminal.ansiBrightRed#E4534A
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F0BC5C
terminal.ansiCyan#4FA0A8
terminal.ansiGreen#5E9E7C
terminal.ansiMagenta#B85C7E
terminal.ansiRed#C23B36
terminal.ansiWhite#9BA7B0
terminal.ansiYellow#D9A23C
terminal.background#11161B
terminal.foreground#E8EDF0
terminalCursor.foreground#3B7FC4
textBlockQuote.background#242D36
textBlockQuote.border#3B7FC4
textCodeBlock.background#11161B
textLink.activeForeground#3B7FC4
textLink.foreground#5FA0E8
textPreformat.foreground#F0BC5C
titleBar.activeBackground#0A0D11
titleBar.activeForeground#E8EDF0
titleBar.border#0A0D11
titleBar.inactiveBackground#0A0D11
titleBar.inactiveForeground#6B7480
tree.indentGuidesStroke#2E3944
welcomePage.tileBackground#242D36
welcomePage.tileBorder#2E3944

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B7480	italic
string, string.quoted, string.template, punctuation.definition.string	#5E9E7C	—
string.regexp	#4FA0A8	—
constant.numeric, constant.language.boolean, constant.language	#D9A23C	—
constant, variable.other.constant, variable.other.enummember	#F0BC5C	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#B85C7E	—
keyword.operator	#9BA7B0	—
entity.name.function, support.function, meta.function-call	#3B7FC4	—
entity.name.class, entity.name.type.class, support.class	#4FA0A8	bold
entity.name.type, entity.name.type.interface, entity.other.inherited-class, support.type	#6FC2C8	—
variable, variable.other.readwrite	#E8EDF0	—
variable.parameter	#F2F5F7	italic
variable.other.property, meta.object-literal.key, support.variable.property	#5FA0E8	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#D9A23C	—
entity.name.tag, meta.tag	#B85C7E	—
entity.other.attribute-name	#F0BC5C	—
punctuation, meta.brace	#9BA7B0	—
invalid, invalid.illegal	#E4534A	underline
markup.heading	#3B7FC4	bold
markup.bold	#F2F5F7	bold
markup.italic	#F2F5F7	italic
markup.underline.link	#5FA0E8	—

VS Code preview

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

dora-dora Theme — Dora Dora Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.activeBackground#0B0910
activityBar.activeBorder#4E97D9
activityBar.background#0B0910
activityBar.border#0B0910
activityBar.foreground#F2E9E4
activityBar.inactiveForeground#6E6275
activityBarBadge.background#4E97D9
activityBarBadge.foreground#FFFFFF
badge.background#4E97D9
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#4E97D9
breadcrumb.background#1B1720
breadcrumb.focusForeground#F2E9E4
breadcrumb.foreground#6E6275
breadcrumbPicker.background#26202E
button.background#4E97D9
button.foreground#FFFFFF
button.hoverBackground#6FB0E8
button.secondaryBackground#26202E
button.secondaryForeground#F2E9E4
button.secondaryHoverBackground#3D2B45
checkbox.background#26202E
checkbox.border#3A3140
checkbox.foreground#F2E9E4
descriptionForeground#A296A3
diffEditor.diagonalFill#3A3140
diffEditor.insertedLineBackground#6B9E5E15
diffEditor.insertedTextBackground#6B9E5E25
diffEditor.removedLineBackground#C24B4A15
diffEditor.removedTextBackground#C24B4A25
diffEditorGutter.insertedLineBackground#6B9E5E30
diffEditorGutter.removedLineBackground#C24B4A30
dropdown.background#26202E
dropdown.border#3A3140
dropdown.foreground#F2E9E4
dropdown.listBackground#26202E
editor.background#1B1720
editor.findMatchBackground#E08A3C55
editor.findMatchHighlightBackground#E08A3C30
editor.findRangeHighlightBackground#26202E90
editor.foreground#F2E9E4
editor.inactiveSelectionBackground#3D2B4550
editor.lineHighlightBackground#26202E80
editor.lineHighlightBorder#00000000
editor.selectionBackground#3D2B45
editor.selectionHighlightBackground#3D2B4560
editor.wordHighlightBackground#4E97D930
editor.wordHighlightStrongBackground#4E97D945
editorBracketHighlight.foreground1#4E97D9
editorBracketHighlight.foreground2#D9648F
editorBracketHighlight.foreground3#E08A3C
editorBracketHighlight.foreground4#4FA8A0
editorBracketHighlight.foreground5#6B9E5E
editorBracketHighlight.foreground6#EA84AA
editorBracketHighlight.unexpectedBracket.foreground#E06864
editorBracketMatch.background#4E97D930
editorBracketMatch.border#4E97D9
editorCodeLens.foreground#6E6275
editorCursor.background#0B0910
editorCursor.foreground#4E97D9
editorError.foreground#C24B4A
editorGroup.border#0B0910
editorGroupHeader.border#0B0910
editorGroupHeader.tabsBackground#131018
editorGutter.addedBackground#6B9E5E
editorGutter.deletedBackground#C24B4A
editorGutter.modifiedBackground#E08A3C
editorHint.foreground#4FA8A0
editorHoverWidget.background#26202E
editorHoverWidget.border#0B0910
editorIndentGuide.activeBackground1#4E97D960
editorIndentGuide.background1#2E2736
editorInfo.foreground#4E97D9
editorLineNumber.activeForeground#A296A3
editorLineNumber.foreground#4A3F52
editorLink.activeForeground#6FB0E8
editorRuler.foreground#26202E
editorSuggestWidget.background#26202E
editorSuggestWidget.border#0B0910
editorSuggestWidget.foreground#F2E9E4
editorSuggestWidget.highlightForeground#6FB0E8
editorSuggestWidget.selectedBackground#3D2B45
editorWarning.foreground#E08A3C
editorWhitespace.foreground#3A3140
editorWidget.background#26202E
editorWidget.border#0B0910
editorWidget.foreground#F2E9E4
errorForeground#E06864
extensionButton.prominentBackground#4E97D9
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#6FB0E8
focusBorder#4E97D9
foreground#F2E9E4
gitDecoration.addedResourceForeground#6B9E5E
gitDecoration.conflictingResourceForeground#D9648F
gitDecoration.deletedResourceForeground#C24B4A
gitDecoration.ignoredResourceForeground#6E6275
gitDecoration.modifiedResourceForeground#E08A3C
gitDecoration.submoduleResourceForeground#A296A3
gitDecoration.untrackedResourceForeground#4FA8A0
icon.foreground#A296A3
input.background#131018
input.border#3A3140
input.foreground#F2E9E4
input.placeholderForeground#6E6275
inputOption.activeBackground#4E97D930
inputOption.activeBorder#4E97D9
inputValidation.errorBackground#C24B4A30
inputValidation.errorBorder#C24B4A
inputValidation.infoBackground#4E97D930
inputValidation.infoBorder#4E97D9
inputValidation.warningBackground#E08A3C30
inputValidation.warningBorder#E08A3C
list.activeSelectionBackground#3D2B45
list.activeSelectionForeground#F7F0EC
list.dropBackground#4E97D930
list.errorForeground#E06864
list.focusBackground#3D2B4590
list.focusForeground#F7F0EC
list.highlightForeground#6FB0E8
list.hoverBackground#26202E90
list.hoverForeground#4E97D9
list.inactiveSelectionBackground#26202E
list.inactiveSelectionForeground#F2E9E4
list.warningForeground#F2A85C
listFilterWidget.background#26202E
listFilterWidget.outline#4E97D9
menu.background#26202E
menu.border#0B0910
menu.foreground#F2E9E4
menu.selectionBackground#3D2B45
menu.selectionForeground#F7F0EC
menu.separatorBackground#3A3140
menubar.selectionBackground#26202E
menubar.selectionForeground#F7F0EC
minimap.background#131018
minimap.selectionHighlight#3D2B4599
minimapGutter.addedBackground#6B9E5E
minimapGutter.deletedBackground#C24B4A
minimapGutter.modifiedBackground#E08A3C
minimapSlider.activeBackground#4E97D970
minimapSlider.background#3A314050
minimapSlider.hoverBackground#4E97D940
notificationCenter.border#0B0910
notifications.background#26202E
notifications.border#0B0910
notifications.foreground#F2E9E4
notificationsErrorIcon.foreground#C24B4A
notificationsInfoIcon.foreground#4E97D9
notificationsWarningIcon.foreground#E08A3C
notificationToast.border#0B0910
panel.background#131018
panel.border#0B0910
panelInput.border#3A3140
panelTitle.activeBorder#4E97D9
panelTitle.activeForeground#F2E9E4
panelTitle.inactiveForeground#6E6275
peekView.border#4E97D9
peekViewEditor.background#131018
peekViewEditorGutter.background#131018
peekViewResult.background#131018
peekViewResult.selectionBackground#3D2B45
peekViewTitle.background#26202E
peekViewTitleDescription.foreground#A296A3
peekViewTitleLabel.foreground#F2E9E4
pickerGroup.border#3A3140
pickerGroup.foreground#4E97D9
problemsErrorIcon.foreground#C24B4A
problemsInfoIcon.foreground#4E97D9
problemsWarningIcon.foreground#E08A3C
progressBar.background#4E97D9
quickInput.background#26202E
quickInput.foreground#F2E9E4
quickInputList.focusBackground#3D2B45
quickInputList.focusForeground#F7F0EC
quickInputTitle.background#26202E
scrollbar.shadow#0B0910
scrollbarSlider.activeBackground#4E97D970
scrollbarSlider.background#3A314060
scrollbarSlider.hoverBackground#4E97D940
selection.background#3D2B4580
sideBar.background#131018
sideBar.border#0B0910
sideBar.foreground#A296A3
sideBarSectionHeader.background#131018
sideBarSectionHeader.border#0B0910
sideBarSectionHeader.foreground#F2E9E4
sideBarTitle.foreground#F2E9E4
statusBar.background#0B0910
statusBar.border#0B0910
statusBar.debuggingBackground#D9648F
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#A296A3
statusBar.noFolderBackground#0B0910
statusBarItem.activeBackground#3D2B45
statusBarItem.hoverBackground#26202E
statusBarItem.prominentBackground#26202E
statusBarItem.remoteBackground#4E97D9
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#1B1720
tab.activeBorder#4E97D9
tab.activeBorderTop#00000000
tab.activeForeground#F7F0EC
tab.border#0B0910
tab.hoverBackground#26202E
tab.inactiveBackground#131018
tab.inactiveForeground#6E6275
tab.unfocusedActiveBackground#1B1720
tab.unfocusedActiveBorder#3D2B45
terminal.ansiBlack#0B0910
terminal.ansiBlue#4E97D9
terminal.ansiBrightBlack#6E6275
terminal.ansiBrightBlue#6FB0E8
terminal.ansiBrightCyan#6BC2BA
terminal.ansiBrightGreen#8CBF7B
terminal.ansiBrightMagenta#EA84AA
terminal.ansiBrightRed#E06864
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F2A85C
terminal.ansiCyan#4FA8A0
terminal.ansiGreen#6B9E5E
terminal.ansiMagenta#D9648F
terminal.ansiRed#C24B4A
terminal.ansiWhite#A296A3
terminal.ansiYellow#E08A3C
terminal.background#131018
terminal.foreground#F2E9E4
terminalCursor.foreground#4E97D9
textBlockQuote.background#26202E
textBlockQuote.border#4E97D9
textCodeBlock.background#131018
textLink.activeForeground#4E97D9
textLink.foreground#6FB0E8
textPreformat.foreground#F2A85C
titleBar.activeBackground#0B0910
titleBar.activeForeground#F2E9E4
titleBar.border#0B0910
titleBar.inactiveBackground#0B0910
titleBar.inactiveForeground#6E6275
tree.indentGuidesStroke#3A3140
welcomePage.tileBackground#26202E
welcomePage.tileBorder#3A3140

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6E6275	italic
string, string.quoted, string.template, punctuation.definition.string	#6B9E5E	—
string.regexp	#4FA8A0	—
constant.numeric, constant.language.boolean, constant.language	#E08A3C	—
constant, variable.other.constant, variable.other.enummember	#F2A85C	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#D9648F	—
keyword.operator	#A296A3	—
entity.name.function, support.function, meta.function-call	#4E97D9	—
entity.name.class, entity.name.type.class, support.class	#4FA8A0	bold
entity.name.type, entity.name.type.interface, entity.other.inherited-class, support.type	#6BC2BA	—
variable, variable.other.readwrite	#F2E9E4	—
variable.parameter	#F7F0EC	italic
variable.other.property, meta.object-literal.key, support.variable.property	#6FB0E8	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#E08A3C	—
entity.name.tag, meta.tag	#D9648F	—
entity.other.attribute-name	#F2A85C	—
punctuation, meta.brace	#A296A3	—
invalid, invalid.illegal	#E06864	underline
markup.heading	#4E97D9	bold
markup.bold	#F7F0EC	bold
markup.italic	#F7F0EC	italic
markup.underline.link	#6FB0E8	—