Kokedera — Moss Temple Theme

Name: Kokedera — Moss Temple Theme
Author: 7th-Layer

Publisher: 7th-LayerThemes in package: 9

Moss-temple color themes — nine variants across the day, the seasons, and the weather of one garden.

Open in VS Code GitHub

Color themes

VS Code preview

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

Kokedera — Moss Temple Theme — Kokedera Autumn

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#261e1940
activityBar.activeBorder#b57e55
activityBar.background#1a1511
activityBar.border#3d322a
activityBar.foreground#d8c1b8
activityBar.inactiveForeground#7a6052
activityBarBadge.background#b57e55
activityBarBadge.foreground#1a1511
badge.background#453930
badge.foreground#d8c1b8
banner.background#332922
banner.foreground#d8c1b8
banner.iconForeground#c48c6c
breadcrumb.activeSelectionForeground#d8c1b8
breadcrumb.focusForeground#d8c1b8
breadcrumb.foreground#907b70
breadcrumbPicker.background#261e19
button.background#4a3628
button.border#b57e5560
button.foreground#d8c1b8
button.hoverBackground#6b4932
button.secondaryBackground#332922
button.secondaryForeground#d8c1b8
button.secondaryHoverBackground#3d3026
charts.blue#c76c48
charts.foreground#d8c1b8
charts.green#b8815a
charts.lines#907b70
charts.orange#cf9c4a
charts.purple#9a7abf
charts.red#c45a5a
charts.yellow#bfa243
checkbox.background#261e19
checkbox.border#4a3e35
checkbox.foreground#d8c1b8
checkbox.selectBackground#b57e55
commandCenter.activeBackground#3d3026
commandCenter.activeForeground#d8c1b8
commandCenter.background#1e1814
commandCenter.border#3d322a
commandCenter.foreground#d8c1b8
debugConsole.errorForeground#c45a5a
debugConsole.infoForeground#907b70
debugConsole.sourceForeground#d8c1b8
debugConsole.warningForeground#bfa243
debugConsoleInputIcon.foreground#c48c6c
debugIcon.breakpointDisabledForeground#c45a5a60
debugIcon.breakpointForeground#c45a5a
debugIcon.continueForeground#b8815a
debugIcon.pauseForeground#bfa243
debugIcon.restartForeground#b8815a
debugIcon.startForeground#b8815a
debugIcon.stepIntoForeground#c76c48
debugIcon.stepOutForeground#c76c48
debugIcon.stepOverForeground#c76c48
debugIcon.stopForeground#c45a5a
debugToolBar.background#261e19
debugToolBar.border#4a3e35
descriptionForeground#907b70
diffEditor.diagonalFill#3d322a40
diffEditor.insertedLineBackground#b8815a10
diffEditor.insertedTextBackground#b8815a15
diffEditor.removedLineBackground#c45a5a10
diffEditor.removedTextBackground#c45a5a15
dropdown.background#261e19
dropdown.border#4a3e35
dropdown.foreground#d8c1b8
dropdown.listBackground#261e19
editor.background#1a1511
editor.findMatchBackground#d4c88e40
editor.findMatchBorder#d4c88e80
editor.findMatchHighlightBackground#d4c88e25
editor.foldBackground#261e1940
editor.foreground#d8c1b8
editor.hoverHighlightBackground#3d302640
editor.inactiveSelectionBackground#3d302680
editor.lineHighlightBackground#ffffff08
editor.lineHighlightBorder#ffffff00
editor.rangeHighlightBackground#261e1940
editor.selectionBackground#3d3026
editor.selectionHighlightBackground#3d302640
editor.wordHighlightBackground#6b4e3a25
editor.wordHighlightStrongBackground#6b4e3a40
editorBracketHighlight.foreground1#b57e55
editorBracketHighlight.foreground2#c76c48
editorBracketHighlight.foreground3#d4c88e
editorBracketHighlight.foreground4#cf9c4a
editorBracketHighlight.foreground5#bf886f
editorBracketHighlight.foreground6#bfa243
editorBracketHighlight.unexpectedBracket.foreground#c45a5a
editorBracketMatch.background#45393040
editorBracketMatch.border#b57e5580
editorCursor.background#1a1511
editorCursor.foreground#e6945a
editorError.foreground#c45a5a
editorGroup.border#3d322a
editorGroup.dropBackground#3d302640
editorGroupHeader.noTabsBackground#1e1814
editorGroupHeader.tabsBackground#1a1511
editorGroupHeader.tabsBorder#3d322a
editorGutter.addedBackground#b8815a
editorGutter.background#1a1511
editorGutter.deletedBackground#c45a5a
editorGutter.foldingControlForeground#907b70
editorGutter.modifiedBackground#bfa243
editorHint.foreground#7a6052
editorHoverWidget.background#261e19
editorHoverWidget.border#4a3e35
editorHoverWidget.foreground#d8c1b8
editorIndentGuide.activeBackground#5a4c44
editorIndentGuide.background#3d322a
editorInfo.foreground#c76c48
editorLightBulb.foreground#bfa243
editorLightBulbAutoFix.foreground#b8815a
editorLineNumber.activeForeground#c48c6c
editorLineNumber.foreground#5a4c44
editorOverviewRuler.addedForeground#b8815a
editorOverviewRuler.border#3d322a
editorOverviewRuler.deletedForeground#c45a5a
editorOverviewRuler.errorForeground#c45a5a
editorOverviewRuler.findMatchForeground#d4c88e80
editorOverviewRuler.infoForeground#c76c48
editorOverviewRuler.modifiedForeground#bfa243
editorOverviewRuler.warningForeground#bfa243
editorRuler.foreground#3d322a
editorStickyScroll.background#1e1814
editorStickyScrollHover.background#261e19
editorSuggestWidget.background#261e19
editorSuggestWidget.focusHighlightForeground#c48c6c
editorSuggestWidget.foreground#d8c1b8
editorSuggestWidget.highlightForeground#c48c6c
editorSuggestWidget.selectedBackground#3d3026
editorSuggestWidget.selectedForeground#d8c1b8
editorWarning.foreground#bfa243
editorWhitespace.foreground#4a3e35
editorWidget.background#261e19
editorWidget.border#4a3e35
editorWidget.foreground#d8c1b8
errorForeground#c45a5a
focusBorder#b57e5580
foreground#d8c1b8
gitDecoration.addedResourceForeground#b8815a
gitDecoration.conflictingResourceForeground#bfa243
gitDecoration.deletedResourceForeground#c45a5a
gitDecoration.ignoredResourceForeground#5a4c44
gitDecoration.modifiedResourceForeground#bfa243
gitDecoration.renamedResourceForeground#c76c48
gitDecoration.stageDeletedResourceForeground#c45a5a
gitDecoration.stageModifiedResourceForeground#bfa243
gitDecoration.submoduleResourceForeground#c76c48
gitDecoration.untrackedResourceForeground#b8815a
icon.foreground#907b70
input.background#261e19
input.border#4a3e35
input.foreground#d8c1b8
input.placeholderForeground#7a6052
inputOption.activeBackground#b57e5540
inputOption.activeBorder#b57e55
inputOption.activeForeground#d8c1b8
inputValidation.errorBackground#c45a5a20
inputValidation.errorBorder#c45a5a60
inputValidation.infoBackground#c76c4820
inputValidation.infoBorder#c76c4860
inputValidation.warningBackground#bfa24320
inputValidation.warningBorder#bfa24360
keybindingLabel.background#33292240
keybindingLabel.border#4a3e3560
keybindingLabel.bottomBorder#4a3e3580
keybindingLabel.foreground#d8c1b8
list.activeSelectionBackground#3d3026
list.activeSelectionForeground#d8c1b8
list.dropBackground#3d302640
list.errorForeground#c45a5a
list.filterMatchBackground#d4c88e40
list.filterMatchBorder#d4c88e80
list.focusBackground#3d3026
list.focusForeground#d8c1b8
list.focusOutline#b57e5580
list.highlightForeground#c48c6c
list.hoverBackground#261e19
list.hoverForeground#d8c1b8
list.inactiveSelectionBackground#332922
list.inactiveSelectionForeground#d8c1b8
list.warningForeground#bfa243
menu.background#261e19
menu.border#4a3e35
menu.foreground#d8c1b8
menu.selectionBackground#3d3026
menu.selectionForeground#d8c1b8
menu.separatorBackground#3d322a
menubar.selectionBackground#3d3026
menubar.selectionForeground#d8c1b8
merge.border#4a3e35
merge.currentContentBackground#b8815a15
merge.currentHeaderBackground#b8815a30
merge.incomingContentBackground#c76c4815
merge.incomingHeaderBackground#c76c4830
minimap.background#1a1511
minimap.errorHighlight#c45a5a80
minimap.findMatchHighlight#d4c88e60
minimap.selectionHighlight#3d302680
minimap.warningHighlight#bfa24380
minimapGutter.addedBackground#b8815a
minimapGutter.deletedBackground#c45a5a
minimapGutter.modifiedBackground#bfa243
minimapSlider.activeBackground#5a4c4460
minimapSlider.background#5a4c4420
minimapSlider.hoverBackground#5a4c4440
notificationCenter.border#4a3e35
notificationLink.foreground#c48c6c
notifications.background#261e19
notifications.border#4a3e35
notifications.foreground#d8c1b8
notificationsErrorIcon.foreground#c45a5a
notificationsInfoIcon.foreground#c76c48
notificationsWarningIcon.foreground#bfa243
panel.background#1e1814
panel.border#3d322a
panel.dropBorder#b57e55
panelSection.border#3d322a
panelSectionHeader.background#261e19
panelTitle.activeBorder#b57e55
panelTitle.activeForeground#d8c1b8
panelTitle.inactiveForeground#907b70
peekView.border#b57e55
peekViewEditor.background#1e1814
peekViewEditor.matchHighlightBackground#d4c88e40
peekViewResult.background#261e19
peekViewResult.fileForeground#d8c1b8
peekViewResult.lineForeground#907b70
peekViewResult.matchHighlightBackground#d4c88e40
peekViewResult.selectionBackground#3d3026
peekViewResult.selectionForeground#d8c1b8
peekViewTitle.background#261e19
peekViewTitleDescription.foreground#907b70
peekViewTitleLabel.foreground#d8c1b8
progressBar.background#b57e55
scrollbar.shadow#120d0a80
scrollbarSlider.activeBackground#5a4c44a0
scrollbarSlider.background#5a4c4440
scrollbarSlider.hoverBackground#5a4c4480
selection.background#3d302680
settings.checkboxBackground#261e19
settings.checkboxBorder#4a3e35
settings.checkboxForeground#d8c1b8
settings.dropdownBackground#261e19
settings.dropdownBorder#4a3e35
settings.dropdownForeground#d8c1b8
settings.focusedRowBackground#261e1960
settings.focusedRowBorder#b57e5540
settings.headerForeground#d8c1b8
settings.modifiedItemIndicator#b57e55
settings.numberInputBackground#261e19
settings.numberInputBorder#4a3e35
settings.numberInputForeground#d8c1b8
settings.rowHoverBackground#261e1940
settings.textInputBackground#261e19
settings.textInputBorder#4a3e35
settings.textInputForeground#d8c1b8
sideBar.background#1e1814
sideBar.border#3d322a
sideBar.dropBackground#3d302640
sideBar.foreground#d8c1b8
sideBarSectionHeader.background#261e19
sideBarSectionHeader.border#3d322a
sideBarSectionHeader.foreground#d8c1b8
sideBarTitle.foreground#d8c1b8
statusBar.background#1e1814
statusBar.border#3d322a
statusBar.debuggingBackground#cf9c4a
statusBar.debuggingForeground#1a1511
statusBar.foreground#907b70
statusBar.noFolderBackground#261e19
statusBar.noFolderForeground#907b70
statusBarItem.activeBackground#453930
statusBarItem.errorBackground#c45a5a
statusBarItem.errorForeground#d8c1b8
statusBarItem.hoverBackground#3d3026
statusBarItem.prominentBackground#332922
statusBarItem.prominentHoverBackground#3d3026
statusBarItem.remoteBackground#b57e55
statusBarItem.remoteForeground#1a1511
statusBarItem.warningBackground#bfa243
statusBarItem.warningForeground#1a1511
tab.activeBackground#261e19
tab.activeBorderTop#b57e55
tab.activeForeground#d8c1b8
tab.activeModifiedBorder#bfa243
tab.border#1a1511
tab.hoverBackground#261e19
tab.hoverForeground#d8c1b8
tab.inactiveBackground#1a1511
tab.inactiveForeground#907b70
tab.inactiveModifiedBorder#bfa24380
tab.lastPinnedBorder#4a3e35
terminal.ansiBlack#261e19
terminal.ansiBlue#c76c48
terminal.ansiBrightBlack#5a4c44
terminal.ansiBrightBlue#cc8266
terminal.ansiBrightCyan#cf9480
terminal.ansiBrightGreen#c48c6c
terminal.ansiBrightMagenta#b49ad4
terminal.ansiBrightRed#d47070
terminal.ansiBrightWhite#e8d3ca
terminal.ansiBrightYellow#d4c88e
terminal.ansiCyan#c47a5e
terminal.ansiGreen#b8815a
terminal.ansiMagenta#9a7abf
terminal.ansiRed#c45a5a
terminal.ansiWhite#d8c1b8
terminal.ansiYellow#bfa243
terminal.background#1a1511
terminal.border#3d322a
terminal.foreground#d8c1b8
terminal.selectionBackground#3d3026
terminal.tab.activeBorder#b57e55
terminalCursor.background#1a1511
terminalCursor.foreground#e6945a
testing.iconErrored#c45a5a
testing.iconFailed#c45a5a
testing.iconPassed#b8815a
testing.iconQueued#907b70
testing.iconSkipped#bfa243
testing.iconUnset#7a6052
testing.runAction#b8815a
textBlockQuote.background#261e19
textBlockQuote.border#b57e55
textCodeBlock.background#261e19
textLink.activeForeground#e6945a
textLink.foreground#c48c6c
textPreformat.foreground#d4c88e
titleBar.activeBackground#1a1511
titleBar.activeForeground#d8c1b8
titleBar.border#3d322a
titleBar.inactiveBackground#17120e
titleBar.inactiveForeground#907b70
toolbar.activeBackground#453930
toolbar.hoverBackground#3d3026
tree.indentGuidesStroke#3d322a
tree.tableOddRowsBackground#211b17
walkThrough.embeddedEditorBackground#1e1814
welcomePage.background#1a1511
welcomePage.progress.foreground#b57e55
welcomePage.tileBackground#261e19
welcomePage.tileBorder#3d322a
welcomePage.tileHoverBackground#332922
widget.shadow#120d0a80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7d6a56	italic
comment.block.documentation, comment.block.javadoc	#7e6a60	italic
comment.block.documentation storage.type, comment.block.javadoc keyword, comment.block.documentation punctuation.definition	#907b70	bold italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, storage.type, storage.modifier	#b57e55	—
string, string.quoted, string.template	#d4c88e	—
constant.character.escape	#9a7abf	bold
string.regexp	#9a7abf	—
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded	#d4c88e	italic
constant.numeric, constant.language, constant.character	#cf9c4a	—
constant.language.boolean	#cf9c4a	bold
entity.name.function, support.function, meta.function-call entity.name.function	#bf886f	—
variable.parameter	#be9b8c	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.name.module	#c76c48	—
support.type.builtin, support.type.primitive	#c76c48	italic
entity.name.type.interface	#c76c48	—
entity.name.type.enum	#c76c48	—
variable, variable.other, variable.other.readwrite	#be9b8c	—
variable.other.constant, variable.other.enummember	#cf9c4a	—
variable.language.this, variable.language.self, variable.language.super	#c48c6c	italic
variable.other.property, variable.other.object.property, support.variable.property	#be9b8c	—
keyword.operator, punctuation.accessor, punctuation.separator	#907b70	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.section, meta.brace	#907b70	—
meta.decorator, meta.annotation, storage.type.annotation, punctuation.decorator	#bf886f	—
entity.name.label	#c48c6c	—
entity.name.tag, punctuation.definition.tag	#b57e55	—
entity.other.attribute-name	#bf886f	—
string.quoted.double.html, string.quoted.single.html	#d4c88e	—
support.type.property-name.css, meta.property-name.css	#c48c6c	—
support.constant.property-value.css, meta.property-value.css	#be9b8c	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#bf886f	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#c76c48	—
keyword.other.unit.css	#cf9c4a	—
support.type.property-name.json	#c48c6c	—
string.quoted.double.json	#d4c88e	—
entity.name.tag.yaml	#c48c6c	—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml	#d4c88e	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml	#c76c48	—
markup.heading, entity.name.section	#b57e55	bold
markup.bold	#d8c1b8	bold
markup.italic	#d8c1b8	italic
markup.bold markup.italic, markup.italic markup.bold	—	bold italic
markup.inline.raw, markup.fenced_code, markup.raw.block	#d4c88e	—
markup.underline.link	#c76c48	italic
string.other.link	#c47a5e	—
punctuation.definition.list.begin.markdown	#c48c6c	—
markup.quote	#907b70	italic
markup.inserted	#b8815a	—
markup.deleted	#c45a5a	—
markup.changed	#bfa243	—
invalid, invalid.illegal	#c45a5a	—
invalid.deprecated	#907b70	strikethrough
emphasis	—	italic
strong	—	bold

VS Code preview

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

Kokedera — Moss Temple Theme — Kokedera Dusk

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#1a261940
activityBar.activeBorder#4ca64c
activityBar.background#121a11
activityBar.border#2e3d2a
activityBar.foreground#c8d8b8
activityBar.inactiveForeground#5e7a52
activityBarBadge.background#4ca64c
activityBarBadge.foreground#121a11
badge.background#314530
badge.foreground#c8d8b8
banner.background#243322
banner.foreground#c8d8b8
banner.iconForeground#7ec46c
breadcrumb.activeSelectionForeground#c8d8b8
breadcrumb.focusForeground#c8d8b8
breadcrumb.foreground#7a9070
breadcrumbPicker.background#1a2619
button.background#2a4a28
button.border#4ca64c60
button.foreground#c8d8b8
button.hoverBackground#356b32
button.secondaryBackground#243322
button.secondaryForeground#c8d8b8
button.secondaryHoverBackground#2a3d26
charts.blue#3d9970
charts.foreground#c8d8b8
charts.green#5ab85a
charts.lines#7a9070
charts.orange#c49a5c
charts.purple#9a7abf
charts.red#c45a5a
charts.yellow#bfa243
checkbox.background#1a2619
checkbox.border#3a4a35
checkbox.foreground#c8d8b8
checkbox.selectBackground#4ca64c
commandCenter.activeBackground#2a3d26
commandCenter.activeForeground#c8d8b8
commandCenter.background#151e14
commandCenter.border#2e3d2a
commandCenter.foreground#c8d8b8
debugConsole.errorForeground#c45a5a
debugConsole.infoForeground#7a9070
debugConsole.sourceForeground#c8d8b8
debugConsole.warningForeground#bfa243
debugConsoleInputIcon.foreground#7ec46c
debugIcon.breakpointDisabledForeground#c45a5a60
debugIcon.breakpointForeground#c45a5a
debugIcon.continueForeground#5ab85a
debugIcon.pauseForeground#bfa243
debugIcon.restartForeground#5ab85a
debugIcon.startForeground#5ab85a
debugIcon.stepIntoForeground#3d9970
debugIcon.stepOutForeground#3d9970
debugIcon.stepOverForeground#3d9970
debugIcon.stopForeground#c45a5a
debugToolBar.background#1a2619
debugToolBar.border#3a4a35
descriptionForeground#7a9070
diffEditor.diagonalFill#2e3d2a40
diffEditor.insertedLineBackground#5ab85a10
diffEditor.insertedTextBackground#5ab85a15
diffEditor.removedLineBackground#c45a5a10
diffEditor.removedTextBackground#c45a5a15
dropdown.background#1a2619
dropdown.border#3a4a35
dropdown.foreground#c8d8b8
dropdown.listBackground#1a2619
editor.background#121a11
editor.findMatchBackground#d4c88e40
editor.findMatchBorder#d4c88e80
editor.findMatchHighlightBackground#d4c88e25
editor.foldBackground#1a261940
editor.foreground#c8d8b8
editor.hoverHighlightBackground#2a3d2640
editor.inactiveSelectionBackground#2a3d2680
editor.lineHighlightBackground#ffffff08
editor.lineHighlightBorder#ffffff00
editor.rangeHighlightBackground#1a261940
editor.selectionBackground#2a3d26
editor.selectionHighlightBackground#2a3d2640
editor.wordHighlightBackground#3a6b3a25
editor.wordHighlightStrongBackground#3a6b3a40
editorBracketHighlight.foreground1#4ca64c
editorBracketHighlight.foreground2#3d9970
editorBracketHighlight.foreground3#d4c88e
editorBracketHighlight.foreground4#c49a5c
editorBracketHighlight.foreground5#8fbf6f
editorBracketHighlight.foreground6#bfa243
editorBracketHighlight.unexpectedBracket.foreground#c45a5a
editorBracketMatch.background#31453040
editorBracketMatch.border#4ca64c80
editorCursor.background#121a11
editorCursor.foreground#5ae65a
editorError.foreground#c45a5a
editorGroup.border#2e3d2a
editorGroup.dropBackground#2a3d2640
editorGroupHeader.noTabsBackground#151e14
editorGroupHeader.tabsBackground#121a11
editorGroupHeader.tabsBorder#2e3d2a
editorGutter.addedBackground#5ab85a
editorGutter.background#121a11
editorGutter.deletedBackground#c45a5a
editorGutter.foldingControlForeground#7a9070
editorGutter.modifiedBackground#bfa243
editorHint.foreground#5e7a52
editorHoverWidget.background#1a2619
editorHoverWidget.border#3a4a35
editorHoverWidget.foreground#c8d8b8
editorIndentGuide.activeBackground#4a5a44
editorIndentGuide.background#2e3d2a
editorInfo.foreground#3d9970
editorLightBulb.foreground#bfa243
editorLightBulbAutoFix.foreground#5ab85a
editorLineNumber.activeForeground#7ec46c
editorLineNumber.foreground#4a5a44
editorOverviewRuler.addedForeground#5ab85a
editorOverviewRuler.border#2e3d2a
editorOverviewRuler.deletedForeground#c45a5a
editorOverviewRuler.errorForeground#c45a5a
editorOverviewRuler.findMatchForeground#d4c88e80
editorOverviewRuler.infoForeground#3d9970
editorOverviewRuler.modifiedForeground#bfa243
editorOverviewRuler.warningForeground#bfa243
editorRuler.foreground#2e3d2a
editorStickyScroll.background#151e14
editorStickyScrollHover.background#1a2619
editorSuggestWidget.background#1a2619
editorSuggestWidget.focusHighlightForeground#7ec46c
editorSuggestWidget.foreground#c8d8b8
editorSuggestWidget.highlightForeground#7ec46c
editorSuggestWidget.selectedBackground#2a3d26
editorSuggestWidget.selectedForeground#c8d8b8
editorWarning.foreground#bfa243
editorWhitespace.foreground#3a4a35
editorWidget.background#1a2619
editorWidget.border#3a4a35
editorWidget.foreground#c8d8b8
errorForeground#c45a5a
focusBorder#4ca64c80
foreground#c8d8b8
gitDecoration.addedResourceForeground#5ab85a
gitDecoration.conflictingResourceForeground#bfa243
gitDecoration.deletedResourceForeground#c45a5a
gitDecoration.ignoredResourceForeground#4a5a44
gitDecoration.modifiedResourceForeground#bfa243
gitDecoration.renamedResourceForeground#3d9970
gitDecoration.stageDeletedResourceForeground#c45a5a
gitDecoration.stageModifiedResourceForeground#bfa243
gitDecoration.submoduleResourceForeground#3d9970
gitDecoration.untrackedResourceForeground#5ab85a
icon.foreground#7a9070
input.background#1a2619
input.border#3a4a35
input.foreground#c8d8b8
input.placeholderForeground#5e7a52
inputOption.activeBackground#4ca64c40
inputOption.activeBorder#4ca64c
inputOption.activeForeground#c8d8b8
inputValidation.errorBackground#c45a5a20
inputValidation.errorBorder#c45a5a60
inputValidation.infoBackground#3d997020
inputValidation.infoBorder#3d997060
inputValidation.warningBackground#bfa24320
inputValidation.warningBorder#bfa24360
keybindingLabel.background#24332240
keybindingLabel.border#3a4a3560
keybindingLabel.bottomBorder#3a4a3580
keybindingLabel.foreground#c8d8b8
list.activeSelectionBackground#2a3d26
list.activeSelectionForeground#c8d8b8
list.dropBackground#2a3d2640
list.errorForeground#c45a5a
list.filterMatchBackground#d4c88e40
list.filterMatchBorder#d4c88e80
list.focusBackground#2a3d26
list.focusForeground#c8d8b8
list.focusOutline#4ca64c80
list.highlightForeground#7ec46c
list.hoverBackground#1a2619
list.hoverForeground#c8d8b8
list.inactiveSelectionBackground#243322
list.inactiveSelectionForeground#c8d8b8
list.warningForeground#bfa243
menu.background#1a2619
menu.border#3a4a35
menu.foreground#c8d8b8
menu.selectionBackground#2a3d26
menu.selectionForeground#c8d8b8
menu.separatorBackground#2e3d2a
menubar.selectionBackground#2a3d26
menubar.selectionForeground#c8d8b8
merge.border#3a4a35
merge.currentContentBackground#5ab85a15
merge.currentHeaderBackground#5ab85a30
merge.incomingContentBackground#3d997015
merge.incomingHeaderBackground#3d997030
minimap.background#121a11
minimap.errorHighlight#c45a5a80
minimap.findMatchHighlight#d4c88e60
minimap.selectionHighlight#2a3d2680
minimap.warningHighlight#bfa24380
minimapGutter.addedBackground#5ab85a
minimapGutter.deletedBackground#c45a5a
minimapGutter.modifiedBackground#bfa243
minimapSlider.activeBackground#4a5a4460
minimapSlider.background#4a5a4420
minimapSlider.hoverBackground#4a5a4440
notificationCenter.border#3a4a35
notificationLink.foreground#7ec46c
notifications.background#1a2619
notifications.border#3a4a35
notifications.foreground#c8d8b8
notificationsErrorIcon.foreground#c45a5a
notificationsInfoIcon.foreground#3d9970
notificationsWarningIcon.foreground#bfa243
panel.background#151e14
panel.border#2e3d2a
panel.dropBorder#4ca64c
panelSection.border#2e3d2a
panelSectionHeader.background#1a2619
panelTitle.activeBorder#4ca64c
panelTitle.activeForeground#c8d8b8
panelTitle.inactiveForeground#7a9070
peekView.border#4ca64c
peekViewEditor.background#151e14
peekViewEditor.matchHighlightBackground#d4c88e40
peekViewResult.background#1a2619
peekViewResult.fileForeground#c8d8b8
peekViewResult.lineForeground#7a9070
peekViewResult.matchHighlightBackground#d4c88e40
peekViewResult.selectionBackground#2a3d26
peekViewResult.selectionForeground#c8d8b8
peekViewTitle.background#1a2619
peekViewTitleDescription.foreground#7a9070
peekViewTitleLabel.foreground#c8d8b8
progressBar.background#4ca64c
scrollbar.shadow#0a120a80
scrollbarSlider.activeBackground#4a5a44a0
scrollbarSlider.background#4a5a4440
scrollbarSlider.hoverBackground#4a5a4480
selection.background#2a3d2680
settings.checkboxBackground#1a2619
settings.checkboxBorder#3a4a35
settings.checkboxForeground#c8d8b8
settings.dropdownBackground#1a2619
settings.dropdownBorder#3a4a35
settings.dropdownForeground#c8d8b8
settings.focusedRowBackground#1a261960
settings.focusedRowBorder#4ca64c40
settings.headerForeground#c8d8b8
settings.modifiedItemIndicator#4ca64c
settings.numberInputBackground#1a2619
settings.numberInputBorder#3a4a35
settings.numberInputForeground#c8d8b8
settings.rowHoverBackground#1a261940
settings.textInputBackground#1a2619
settings.textInputBorder#3a4a35
settings.textInputForeground#c8d8b8
sideBar.background#151e14
sideBar.border#2e3d2a
sideBar.dropBackground#2a3d2640
sideBar.foreground#c8d8b8
sideBarSectionHeader.background#1a2619
sideBarSectionHeader.border#2e3d2a
sideBarSectionHeader.foreground#c8d8b8
sideBarTitle.foreground#c8d8b8
statusBar.background#151e14
statusBar.border#2e3d2a
statusBar.debuggingBackground#c49a5c
statusBar.debuggingForeground#121a11
statusBar.foreground#7a9070
statusBar.noFolderBackground#1a2619
statusBar.noFolderForeground#7a9070
statusBarItem.activeBackground#314530
statusBarItem.errorBackground#c45a5a
statusBarItem.errorForeground#c8d8b8
statusBarItem.hoverBackground#2a3d26
statusBarItem.prominentBackground#243322
statusBarItem.prominentHoverBackground#2a3d26
statusBarItem.remoteBackground#4ca64c
statusBarItem.remoteForeground#121a11
statusBarItem.warningBackground#bfa243
statusBarItem.warningForeground#121a11
tab.activeBackground#1a2619
tab.activeBorderTop#4ca64c
tab.activeForeground#c8d8b8
tab.activeModifiedBorder#bfa243
tab.border#121a11
tab.hoverBackground#1a2619
tab.hoverForeground#c8d8b8
tab.inactiveBackground#121a11
tab.inactiveForeground#7a9070
tab.inactiveModifiedBorder#bfa24380
tab.lastPinnedBorder#3a4a35
terminal.ansiBlack#1a2619
terminal.ansiBlue#3d9970
terminal.ansiBrightBlack#4a5a44
terminal.ansiBrightBlue#5ab89e
terminal.ansiBrightCyan#7ab8a8
terminal.ansiBrightGreen#7ec46c
terminal.ansiBrightMagenta#b49ad4
terminal.ansiBrightRed#d47070
terminal.ansiBrightWhite#dae8ca
terminal.ansiBrightYellow#d4c88e
terminal.ansiCyan#5a9e8f
terminal.ansiGreen#5ab85a
terminal.ansiMagenta#9a7abf
terminal.ansiRed#c45a5a
terminal.ansiWhite#c8d8b8
terminal.ansiYellow#bfa243
terminal.background#121a11
terminal.border#2e3d2a
terminal.foreground#c8d8b8
terminal.selectionBackground#2a3d26
terminal.tab.activeBorder#4ca64c
terminalCursor.background#121a11
terminalCursor.foreground#5ae65a
testing.iconErrored#c45a5a
testing.iconFailed#c45a5a
testing.iconPassed#5ab85a
testing.iconQueued#7a9070
testing.iconSkipped#bfa243
testing.iconUnset#5e7a52
testing.runAction#5ab85a
textBlockQuote.background#1a2619
textBlockQuote.border#4ca64c
textCodeBlock.background#1a2619
textLink.activeForeground#5ae65a
textLink.foreground#7ec46c
textPreformat.foreground#d4c88e
titleBar.activeBackground#121a11
titleBar.activeForeground#c8d8b8
titleBar.border#2e3d2a
titleBar.inactiveBackground#0f170e
titleBar.inactiveForeground#7a9070
toolbar.activeBackground#314530
toolbar.hoverBackground#2a3d26
tree.indentGuidesStroke#2e3d2a
tree.tableOddRowsBackground#172117
walkThrough.embeddedEditorBackground#151e14
welcomePage.background#121a11
welcomePage.progress.foreground#4ca64c
welcomePage.tileBackground#1a2619
welcomePage.tileBorder#2e3d2a
welcomePage.tileHoverBackground#243322
widget.shadow#0a120a80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5a6b50	italic
comment.block.documentation, comment.block.javadoc	#6b7e60	italic
comment.block.documentation storage.type, comment.block.javadoc keyword, comment.block.documentation punctuation.definition	#7a9070	bold italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, storage.type, storage.modifier	#4ca64c	—
string, string.quoted, string.template	#d4c88e	—
constant.character.escape	#9a7abf	bold
string.regexp	#9a7abf	—
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded	#d4c88e	italic
constant.numeric, constant.language, constant.character	#c49a5c	—
constant.language.boolean	#c49a5c	bold
entity.name.function, support.function, meta.function-call entity.name.function	#8fbf6f	—
variable.parameter	#a3be8c	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.name.module	#3d9970	—
support.type.builtin, support.type.primitive	#3d9970	italic
entity.name.type.interface	#3d9970	—
entity.name.type.enum	#3d9970	—
variable, variable.other, variable.other.readwrite	#a3be8c	—
variable.other.constant, variable.other.enummember	#c49a5c	—
variable.language.this, variable.language.self, variable.language.super	#7ec46c	italic
variable.other.property, variable.other.object.property, support.variable.property	#a3be8c	—
keyword.operator, punctuation.accessor, punctuation.separator	#7a9070	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.section, meta.brace	#7a9070	—
meta.decorator, meta.annotation, storage.type.annotation, punctuation.decorator	#8fbf6f	—
entity.name.label	#7ec46c	—
entity.name.tag, punctuation.definition.tag	#4ca64c	—
entity.other.attribute-name	#8fbf6f	—
string.quoted.double.html, string.quoted.single.html	#d4c88e	—
support.type.property-name.css, meta.property-name.css	#7ec46c	—
support.constant.property-value.css, meta.property-value.css	#a3be8c	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#8fbf6f	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#3d9970	—
keyword.other.unit.css	#c49a5c	—
support.type.property-name.json	#7ec46c	—
string.quoted.double.json	#d4c88e	—
entity.name.tag.yaml	#7ec46c	—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml	#d4c88e	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml	#3d9970	—
markup.heading, entity.name.section	#4ca64c	bold
markup.bold	#c8d8b8	bold
markup.italic	#c8d8b8	italic
markup.bold markup.italic, markup.italic markup.bold	—	bold italic
markup.inline.raw, markup.fenced_code, markup.raw.block	#d4c88e	—
markup.underline.link	#3d9970	italic
string.other.link	#5a9e8f	—
punctuation.definition.list.begin.markdown	#7ec46c	—
markup.quote	#7a9070	italic
markup.inserted	#5ab85a	—
markup.deleted	#c45a5a	—
markup.changed	#bfa243	—
invalid, invalid.illegal	#c45a5a	—
invalid.deprecated	#7a9070	strikethrough
emphasis	—	italic
strong	—	bold

VS Code preview

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

Kokedera — Moss Temple Theme — Kokedera Mist

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#242a2340
activityBar.activeBorder#6ba263
activityBar.background#191e19
activityBar.border#3b4339
activityBar.foreground#aab69e
activityBar.inactiveForeground#74856d
activityBarBadge.background#6ba263
activityBarBadge.foreground#191e19
badge.background#414b40
badge.foreground#aab69e
banner.background#30382f
banner.foreground#aab69e
banner.iconForeground#8ab383
breadcrumb.activeSelectionForeground#aab69e
breadcrumb.focusForeground#aab69e
breadcrumb.foreground#838e7f
breadcrumbPicker.background#242a23
button.background#3c4d3b
button.border#6ba26360
button.foreground#aab69e
button.hoverBackground#5c815a
button.secondaryBackground#30382f
button.secondaryForeground#aab69e
button.secondaryHoverBackground#374235
charts.blue#6b8fa6
charts.foreground#aab69e
charts.green#74ab6c
charts.lines#838e7f
charts.orange#b08e6a
charts.purple#9787ab
charts.red#a87373
charts.yellow#a8935a
checkbox.background#242a23
checkbox.border#495146
checkbox.foreground#aab69e
checkbox.selectBackground#6ba263
commandCenter.activeBackground#374235
commandCenter.activeForeground#aab69e
commandCenter.background#1d221c
commandCenter.border#3b4339
commandCenter.foreground#aab69e
debugConsole.errorForeground#a87373
debugConsole.infoForeground#838e7f
debugConsole.sourceForeground#aab69e
debugConsole.warningForeground#a8935a
debugConsoleInputIcon.foreground#8ab383
debugIcon.breakpointDisabledForeground#a8737360
debugIcon.breakpointForeground#a87373
debugIcon.continueForeground#74ab6c
debugIcon.pauseForeground#a8935a
debugIcon.restartForeground#74ab6c
debugIcon.startForeground#74ab6c
debugIcon.stepIntoForeground#6b8fa6
debugIcon.stepOutForeground#6b8fa6
debugIcon.stepOverForeground#6b8fa6
debugIcon.stopForeground#a87373
debugToolBar.background#242a23
debugToolBar.border#495146
descriptionForeground#838e7f
diffEditor.diagonalFill#3b433940
diffEditor.insertedLineBackground#74ab6c10
diffEditor.insertedTextBackground#74ab6c15
diffEditor.removedLineBackground#a8737310
diffEditor.removedTextBackground#a8737315
dropdown.background#242a23
dropdown.border#495146
dropdown.foreground#aab69e
dropdown.listBackground#242a23
editor.background#191e19
editor.findMatchBackground#b5a97e40
editor.findMatchBorder#b5a97e80
editor.findMatchHighlightBackground#b5a97e25
editor.foldBackground#242a2340
editor.foreground#aab69e
editor.hoverHighlightBackground#37423540
editor.inactiveSelectionBackground#37423580
editor.lineHighlightBackground#ffffff08
editor.lineHighlightBorder#ffffff00
editor.rangeHighlightBackground#242a2340
editor.selectionBackground#374235
editor.selectionHighlightBackground#37423540
editor.wordHighlightBackground#527a5025
editor.wordHighlightStrongBackground#527a5040
editorBracketHighlight.foreground1#6ba263
editorBracketHighlight.foreground2#6b8fa6
editorBracketHighlight.foreground3#b5a97e
editorBracketHighlight.foreground4#b08e6a
editorBracketHighlight.foreground5#85ab6f
editorBracketHighlight.foreground6#a8935a
editorBracketHighlight.unexpectedBracket.foreground#a87373
editorBracketMatch.background#414b4040
editorBracketMatch.border#6ba26380
editorCursor.background#191e19
editorCursor.foreground#7dbf7d
editorError.foreground#a87373
editorGroup.border#3b4339
editorGroup.dropBackground#37423540
editorGroupHeader.noTabsBackground#1d221c
editorGroupHeader.tabsBackground#191e19
editorGroupHeader.tabsBorder#3b4339
editorGutter.addedBackground#74ab6c
editorGutter.background#191e19
editorGutter.deletedBackground#a87373
editorGutter.foldingControlForeground#838e7f
editorGutter.modifiedBackground#a8935a
editorHint.foreground#74856d
editorHoverWidget.background#242a23
editorHoverWidget.border#495146
editorHoverWidget.foreground#aab69e
editorIndentGuide.activeBackground#6a7566
editorIndentGuide.background#3b4339
editorInfo.foreground#6b8fa6
editorLightBulb.foreground#a8935a
editorLightBulbAutoFix.foreground#74ab6c
editorLineNumber.activeForeground#8ab383
editorLineNumber.foreground#6a7566
editorOverviewRuler.addedForeground#74ab6c
editorOverviewRuler.border#3b4339
editorOverviewRuler.deletedForeground#a87373
editorOverviewRuler.errorForeground#a87373
editorOverviewRuler.findMatchForeground#b5a97e80
editorOverviewRuler.infoForeground#6b8fa6
editorOverviewRuler.modifiedForeground#a8935a
editorOverviewRuler.warningForeground#a8935a
editorRuler.foreground#3b4339
editorStickyScroll.background#1d221c
editorStickyScrollHover.background#242a23
editorSuggestWidget.background#242a23
editorSuggestWidget.focusHighlightForeground#8ab383
editorSuggestWidget.foreground#aab69e
editorSuggestWidget.highlightForeground#8ab383
editorSuggestWidget.selectedBackground#374235
editorSuggestWidget.selectedForeground#aab69e
editorWarning.foreground#a8935a
editorWhitespace.foreground#495146
editorWidget.background#242a23
editorWidget.border#495146
editorWidget.foreground#aab69e
errorForeground#a87373
focusBorder#6ba26380
foreground#aab69e
gitDecoration.addedResourceForeground#74ab6c
gitDecoration.conflictingResourceForeground#a8935a
gitDecoration.deletedResourceForeground#a87373
gitDecoration.ignoredResourceForeground#6a7566
gitDecoration.modifiedResourceForeground#a8935a
gitDecoration.renamedResourceForeground#6b8fa6
gitDecoration.stageDeletedResourceForeground#a87373
gitDecoration.stageModifiedResourceForeground#a8935a
gitDecoration.submoduleResourceForeground#6b8fa6
gitDecoration.untrackedResourceForeground#74ab6c
icon.foreground#838e7f
input.background#242a23
input.border#495146
input.foreground#aab69e
input.placeholderForeground#74856d
inputOption.activeBackground#6ba26340
inputOption.activeBorder#6ba263
inputOption.activeForeground#aab69e
inputValidation.errorBackground#a8737320
inputValidation.errorBorder#a8737360
inputValidation.infoBackground#6b8fa620
inputValidation.infoBorder#6b8fa660
inputValidation.warningBackground#a8935a20
inputValidation.warningBorder#a8935a60
keybindingLabel.background#30382f40
keybindingLabel.border#49514660
keybindingLabel.bottomBorder#49514680
keybindingLabel.foreground#aab69e
list.activeSelectionBackground#374235
list.activeSelectionForeground#aab69e
list.dropBackground#37423540
list.errorForeground#a87373
list.filterMatchBackground#b5a97e40
list.filterMatchBorder#b5a97e80
list.focusBackground#374235
list.focusForeground#aab69e
list.focusOutline#6ba26380
list.highlightForeground#8ab383
list.hoverBackground#242a23
list.hoverForeground#aab69e
list.inactiveSelectionBackground#30382f
list.inactiveSelectionForeground#aab69e
list.warningForeground#a8935a
menu.background#242a23
menu.border#495146
menu.foreground#aab69e
menu.selectionBackground#374235
menu.selectionForeground#aab69e
menu.separatorBackground#3b4339
menubar.selectionBackground#374235
menubar.selectionForeground#aab69e
merge.border#495146
merge.currentContentBackground#74ab6c15
merge.currentHeaderBackground#74ab6c30
merge.incomingContentBackground#6b8fa615
merge.incomingHeaderBackground#6b8fa630
minimap.background#191e19
minimap.errorHighlight#a8737380
minimap.findMatchHighlight#b5a97e60
minimap.selectionHighlight#37423580
minimap.warningHighlight#a8935a80
minimapGutter.addedBackground#74ab6c
minimapGutter.deletedBackground#a87373
minimapGutter.modifiedBackground#a8935a
minimapSlider.activeBackground#6a756660
minimapSlider.background#6a756620
minimapSlider.hoverBackground#6a756640
notificationCenter.border#495146
notificationLink.foreground#8ab383
notifications.background#242a23
notifications.border#495146
notifications.foreground#aab69e
notificationsErrorIcon.foreground#a87373
notificationsInfoIcon.foreground#6b8fa6
notificationsWarningIcon.foreground#a8935a
panel.background#1d221c
panel.border#3b4339
panel.dropBorder#6ba263
panelSection.border#3b4339
panelSectionHeader.background#242a23
panelTitle.activeBorder#6ba263
panelTitle.activeForeground#aab69e
panelTitle.inactiveForeground#838e7f
peekView.border#6ba263
peekViewEditor.background#1d221c
peekViewEditor.matchHighlightBackground#b5a97e40
peekViewResult.background#242a23
peekViewResult.fileForeground#aab69e
peekViewResult.lineForeground#838e7f
peekViewResult.matchHighlightBackground#b5a97e40
peekViewResult.selectionBackground#374235
peekViewResult.selectionForeground#aab69e
peekViewTitle.background#242a23
peekViewTitleDescription.foreground#838e7f
peekViewTitleLabel.foreground#aab69e
progressBar.background#6ba263
scrollbar.shadow#10151080
scrollbarSlider.activeBackground#6a7566a0
scrollbarSlider.background#6a756640
scrollbarSlider.hoverBackground#6a756680
selection.background#37423580
settings.checkboxBackground#242a23
settings.checkboxBorder#495146
settings.checkboxForeground#aab69e
settings.dropdownBackground#242a23
settings.dropdownBorder#495146
settings.dropdownForeground#aab69e
settings.focusedRowBackground#242a2360
settings.focusedRowBorder#6ba26340
settings.headerForeground#aab69e
settings.modifiedItemIndicator#6ba263
settings.numberInputBackground#242a23
settings.numberInputBorder#495146
settings.numberInputForeground#aab69e
settings.rowHoverBackground#242a2340
settings.textInputBackground#242a23
settings.textInputBorder#495146
settings.textInputForeground#aab69e
sideBar.background#1d221c
sideBar.border#3b4339
sideBar.dropBackground#37423540
sideBar.foreground#aab69e
sideBarSectionHeader.background#242a23
sideBarSectionHeader.border#3b4339
sideBarSectionHeader.foreground#aab69e
sideBarTitle.foreground#aab69e
statusBar.background#1d221c
statusBar.border#3b4339
statusBar.debuggingBackground#b08e6a
statusBar.debuggingForeground#191e19
statusBar.foreground#838e7f
statusBar.noFolderBackground#242a23
statusBar.noFolderForeground#838e7f
statusBarItem.activeBackground#414b40
statusBarItem.errorBackground#a87373
statusBarItem.errorForeground#aab69e
statusBarItem.hoverBackground#374235
statusBarItem.prominentBackground#30382f
statusBarItem.prominentHoverBackground#374235
statusBarItem.remoteBackground#6ba263
statusBarItem.remoteForeground#191e19
statusBarItem.warningBackground#a8935a
statusBarItem.warningForeground#191e19
tab.activeBackground#242a23
tab.activeBorderTop#6ba263
tab.activeForeground#aab69e
tab.activeModifiedBorder#a8935a
tab.border#191e19
tab.hoverBackground#242a23
tab.hoverForeground#aab69e
tab.inactiveBackground#191e19
tab.inactiveForeground#838e7f
tab.inactiveModifiedBorder#a8935a80
tab.lastPinnedBorder#495146
terminal.ansiBlack#242a23
terminal.ansiBlue#6b8fa6
terminal.ansiBrightBlack#6a7566
terminal.ansiBrightBlue#7ba093
terminal.ansiBrightCyan#8faca4
terminal.ansiBrightGreen#8ab383
terminal.ansiBrightMagenta#a396bd
terminal.ansiBrightRed#b37b7b
terminal.ansiBrightWhite#dae0d2
terminal.ansiBrightYellow#b5a97e
terminal.ansiCyan#7b98a8
terminal.ansiGreen#74ab6c
terminal.ansiMagenta#9787ab
terminal.ansiRed#a87373
terminal.ansiWhite#aab69e
terminal.ansiYellow#a8935a
terminal.background#191e19
terminal.border#3b4339
terminal.foreground#aab69e
terminal.selectionBackground#374235
terminal.tab.activeBorder#6ba263
terminalCursor.background#191e19
terminalCursor.foreground#7dbf7d
testing.iconErrored#a87373
testing.iconFailed#a87373
testing.iconPassed#74ab6c
testing.iconQueued#838e7f
testing.iconSkipped#a8935a
testing.iconUnset#74856d
testing.runAction#74ab6c
textBlockQuote.background#242a23
textBlockQuote.border#6ba263
textCodeBlock.background#242a23
textLink.activeForeground#7dbf7d
textLink.foreground#8ab383
textPreformat.foreground#b5a97e
titleBar.activeBackground#191e19
titleBar.activeForeground#aab69e
titleBar.border#3b4339
titleBar.inactiveBackground#161a15
titleBar.inactiveForeground#838e7f
toolbar.activeBackground#414b40
toolbar.hoverBackground#374235
tree.indentGuidesStroke#3b4339
tree.tableOddRowsBackground#202620
walkThrough.embeddedEditorBackground#1d221c
welcomePage.background#191e19
welcomePage.progress.foreground#6ba263
welcomePage.tileBackground#242a23
welcomePage.tileBorder#3b4339
welcomePage.tileHoverBackground#30382f
widget.shadow#10151080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#737d6c	italic
comment.block.documentation, comment.block.javadoc	#7b8675	italic
comment.block.documentation storage.type, comment.block.javadoc keyword, comment.block.documentation punctuation.definition	#838e7f	bold italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, storage.type, storage.modifier	#6ba263	—
string, string.quoted, string.template	#b5a97e	—
constant.character.escape	#9787ab	bold
string.regexp	#9787ab	—
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded	#b5a97e	italic
constant.numeric, constant.language, constant.character	#b08e6a	—
constant.language.boolean	#b08e6a	bold
entity.name.function, support.function, meta.function-call entity.name.function	#85ab6f	—
variable.parameter	#a8b49b	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.name.module	#6b8fa6	—
support.type.builtin, support.type.primitive	#6b8fa6	italic
entity.name.type.interface	#6b8fa6	—
entity.name.type.enum	#6b8fa6	—
variable, variable.other, variable.other.readwrite	#a8b49b	—
variable.other.constant, variable.other.enummember	#b08e6a	—
variable.language.this, variable.language.self, variable.language.super	#8ab383	italic
variable.other.property, variable.other.object.property, support.variable.property	#a8b49b	—
keyword.operator, punctuation.accessor, punctuation.separator	#838e7f	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.section, meta.brace	#838e7f	—
meta.decorator, meta.annotation, storage.type.annotation, punctuation.decorator	#85ab6f	—
entity.name.label	#8ab383	—
entity.name.tag, punctuation.definition.tag	#6ba263	—
entity.other.attribute-name	#85ab6f	—
string.quoted.double.html, string.quoted.single.html	#b5a97e	—
support.type.property-name.css, meta.property-name.css	#8ab383	—
support.constant.property-value.css, meta.property-value.css	#a8b49b	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#85ab6f	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#6b8fa6	—
keyword.other.unit.css	#b08e6a	—
support.type.property-name.json	#8ab383	—
string.quoted.double.json	#b5a97e	—
entity.name.tag.yaml	#8ab383	—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml	#b5a97e	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml	#6b8fa6	—
markup.heading, entity.name.section	#6ba263	bold
markup.bold	#aab69e	bold
markup.italic	#aab69e	italic
markup.bold markup.italic, markup.italic markup.bold	—	bold italic
markup.inline.raw, markup.fenced_code, markup.raw.block	#b5a97e	—
markup.underline.link	#6b8fa6	italic
string.other.link	#7b98a8	—
punctuation.definition.list.begin.markdown	#8ab383	—
markup.quote	#838e7f	italic
markup.inserted	#74ab6c	—
markup.deleted	#a87373	—
markup.changed	#a8935a	—
invalid, invalid.illegal	#a87373	—
invalid.deprecated	#838e7f	strikethrough
emphasis	—	italic
strong	—	bold

VS Code preview

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

Kokedera — Moss Temple Theme — Kokedera Morning

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ece9d840
activityBar.activeBorder#2e7d32
activityBar.background#f4f2e6
activityBar.border#dedbc9
activityBar.foreground#333f2c
activityBar.inactiveForeground#9aa48c
activityBarBadge.background#2e7d32
activityBarBadge.foreground#f4f2e6
badge.background#d6d3bd
badge.foreground#333f2c
banner.background#e2dfcd
banner.foreground#333f2c
banner.iconForeground#3b8a3c
breadcrumb.activeSelectionForeground#333f2c
breadcrumb.focusForeground#333f2c
breadcrumb.foreground#6b7a5e
breadcrumbPicker.background#ece9d8
button.background#d9e4c8
button.border#2e7d3260
button.foreground#333f2c
button.hoverBackground#cdddb8
button.secondaryBackground#e2dfcd
button.secondaryForeground#333f2c
button.secondaryHoverBackground#e0ddc8
charts.blue#1d7a5c
charts.foreground#333f2c
charts.green#349a3c
charts.lines#6b7a5e
charts.orange#99541d
charts.purple#7a4fa8
charts.red#b03a3a
charts.yellow#87691a
checkbox.background#ece9d8
checkbox.border#d5d2c0
checkbox.foreground#333f2c
checkbox.selectBackground#2e7d32
commandCenter.activeBackground#e0ddc8
commandCenter.activeForeground#333f2c
commandCenter.background#edeadb
commandCenter.border#dedbc9
commandCenter.foreground#333f2c
debugConsole.errorForeground#b03a3a
debugConsole.infoForeground#6b7a5e
debugConsole.sourceForeground#333f2c
debugConsole.warningForeground#87691a
debugConsoleInputIcon.foreground#3b8a3c
debugIcon.breakpointDisabledForeground#b03a3a60
debugIcon.breakpointForeground#b03a3a
debugIcon.continueForeground#349a3c
debugIcon.pauseForeground#87691a
debugIcon.restartForeground#349a3c
debugIcon.startForeground#349a3c
debugIcon.stepIntoForeground#1d7a5c
debugIcon.stepOutForeground#1d7a5c
debugIcon.stepOverForeground#1d7a5c
debugIcon.stopForeground#b03a3a
debugToolBar.background#ece9d8
debugToolBar.border#d5d2c0
descriptionForeground#6b7a5e
diffEditor.diagonalFill#dedbc940
diffEditor.insertedLineBackground#349a3c10
diffEditor.insertedTextBackground#349a3c15
diffEditor.removedLineBackground#b03a3a10
diffEditor.removedTextBackground#b03a3a15
dropdown.background#ece9d8
dropdown.border#d5d2c0
dropdown.foreground#333f2c
dropdown.listBackground#ece9d8
editor.background#f4f2e6
editor.findMatchBackground#75641a40
editor.findMatchBorder#75641a80
editor.findMatchHighlightBackground#75641a25
editor.foldBackground#ece9d840
editor.foreground#333f2c
editor.hoverHighlightBackground#e0ddc840
editor.inactiveSelectionBackground#e0ddc880
editor.lineHighlightBackground#00000008
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ece9d840
editor.selectionBackground#e0ddc8
editor.selectionHighlightBackground#e0ddc840
editor.wordHighlightBackground#a5cf9a25
editor.wordHighlightStrongBackground#a5cf9a40
editorBracketHighlight.foreground1#2e7d32
editorBracketHighlight.foreground2#1d7a5c
editorBracketHighlight.foreground3#75641a
editorBracketHighlight.foreground4#99541d
editorBracketHighlight.foreground5#487612
editorBracketHighlight.foreground6#87691a
editorBracketHighlight.unexpectedBracket.foreground#b03a3a
editorBracketMatch.background#d6d3bd40
editorBracketMatch.border#2e7d3280
editorCursor.background#f4f2e6
editorCursor.foreground#27ae37
editorError.foreground#b03a3a
editorGroup.border#dedbc9
editorGroup.dropBackground#e0ddc840
editorGroupHeader.noTabsBackground#edeadb
editorGroupHeader.tabsBackground#f4f2e6
editorGroupHeader.tabsBorder#dedbc9
editorGutter.addedBackground#349a3c
editorGutter.background#f4f2e6
editorGutter.deletedBackground#b03a3a
editorGutter.foldingControlForeground#6b7a5e
editorGutter.modifiedBackground#87691a
editorHint.foreground#9aa48c
editorHoverWidget.background#ece9d8
editorHoverWidget.border#d5d2c0
editorHoverWidget.foreground#333f2c
editorIndentGuide.activeBackground#a8a492
editorIndentGuide.background#dedbc9
editorInfo.foreground#1d7a5c
editorLightBulb.foreground#87691a
editorLightBulbAutoFix.foreground#349a3c
editorLineNumber.activeForeground#3b8a3c
editorLineNumber.foreground#a8a492
editorOverviewRuler.addedForeground#349a3c
editorOverviewRuler.border#dedbc9
editorOverviewRuler.deletedForeground#b03a3a
editorOverviewRuler.errorForeground#b03a3a
editorOverviewRuler.findMatchForeground#75641a80
editorOverviewRuler.infoForeground#1d7a5c
editorOverviewRuler.modifiedForeground#87691a
editorOverviewRuler.warningForeground#87691a
editorRuler.foreground#dedbc9
editorStickyScroll.background#edeadb
editorStickyScrollHover.background#ece9d8
editorSuggestWidget.background#ece9d8
editorSuggestWidget.focusHighlightForeground#3b8a3c
editorSuggestWidget.foreground#333f2c
editorSuggestWidget.highlightForeground#3b8a3c
editorSuggestWidget.selectedBackground#e0ddc8
editorSuggestWidget.selectedForeground#333f2c
editorWarning.foreground#87691a
editorWhitespace.foreground#d5d2c0
editorWidget.background#ece9d8
editorWidget.border#d5d2c0
editorWidget.foreground#333f2c
errorForeground#b03a3a
focusBorder#2e7d3280
foreground#333f2c
gitDecoration.addedResourceForeground#349a3c
gitDecoration.conflictingResourceForeground#87691a
gitDecoration.deletedResourceForeground#b03a3a
gitDecoration.ignoredResourceForeground#a8a492
gitDecoration.modifiedResourceForeground#87691a
gitDecoration.renamedResourceForeground#1d7a5c
gitDecoration.stageDeletedResourceForeground#b03a3a
gitDecoration.stageModifiedResourceForeground#87691a
gitDecoration.submoduleResourceForeground#1d7a5c
gitDecoration.untrackedResourceForeground#349a3c
icon.foreground#6b7a5e
input.background#ece9d8
input.border#d5d2c0
input.foreground#333f2c
input.placeholderForeground#9aa48c
inputOption.activeBackground#2e7d3240
inputOption.activeBorder#2e7d32
inputOption.activeForeground#333f2c
inputValidation.errorBackground#b03a3a20
inputValidation.errorBorder#b03a3a60
inputValidation.infoBackground#1d7a5c20
inputValidation.infoBorder#1d7a5c60
inputValidation.warningBackground#87691a20
inputValidation.warningBorder#87691a60
keybindingLabel.background#e2dfcd40
keybindingLabel.border#d5d2c060
keybindingLabel.bottomBorder#d5d2c080
keybindingLabel.foreground#333f2c
list.activeSelectionBackground#e0ddc8
list.activeSelectionForeground#333f2c
list.dropBackground#e0ddc840
list.errorForeground#b03a3a
list.filterMatchBackground#75641a40
list.filterMatchBorder#75641a80
list.focusBackground#e0ddc8
list.focusForeground#333f2c
list.focusOutline#2e7d3280
list.highlightForeground#3b8a3c
list.hoverBackground#ece9d8
list.hoverForeground#333f2c
list.inactiveSelectionBackground#e2dfcd
list.inactiveSelectionForeground#333f2c
list.warningForeground#87691a
menu.background#ece9d8
menu.border#d5d2c0
menu.foreground#333f2c
menu.selectionBackground#e0ddc8
menu.selectionForeground#333f2c
menu.separatorBackground#dedbc9
menubar.selectionBackground#e0ddc8
menubar.selectionForeground#333f2c
merge.border#d5d2c0
merge.currentContentBackground#349a3c15
merge.currentHeaderBackground#349a3c30
merge.incomingContentBackground#1d7a5c15
merge.incomingHeaderBackground#1d7a5c30
minimap.background#f4f2e6
minimap.errorHighlight#b03a3a80
minimap.findMatchHighlight#75641a60
minimap.selectionHighlight#e0ddc880
minimap.warningHighlight#87691a80
minimapGutter.addedBackground#349a3c
minimapGutter.deletedBackground#b03a3a
minimapGutter.modifiedBackground#87691a
minimapSlider.activeBackground#a8a49260
minimapSlider.background#a8a49220
minimapSlider.hoverBackground#a8a49240
notificationCenter.border#d5d2c0
notificationLink.foreground#3b8a3c
notifications.background#ece9d8
notifications.border#d5d2c0
notifications.foreground#333f2c
notificationsErrorIcon.foreground#b03a3a
notificationsInfoIcon.foreground#1d7a5c
notificationsWarningIcon.foreground#87691a
panel.background#edeadb
panel.border#dedbc9
panel.dropBorder#2e7d32
panelSection.border#dedbc9
panelSectionHeader.background#ece9d8
panelTitle.activeBorder#2e7d32
panelTitle.activeForeground#333f2c
panelTitle.inactiveForeground#6b7a5e
peekView.border#2e7d32
peekViewEditor.background#edeadb
peekViewEditor.matchHighlightBackground#75641a40
peekViewResult.background#ece9d8
peekViewResult.fileForeground#333f2c
peekViewResult.lineForeground#6b7a5e
peekViewResult.matchHighlightBackground#75641a40
peekViewResult.selectionBackground#e0ddc8
peekViewResult.selectionForeground#333f2c
peekViewTitle.background#ece9d8
peekViewTitleDescription.foreground#6b7a5e
peekViewTitleLabel.foreground#333f2c
progressBar.background#2e7d32
scrollbar.shadow#6b675380
scrollbarSlider.activeBackground#a8a492a0
scrollbarSlider.background#a8a49240
scrollbarSlider.hoverBackground#a8a49280
selection.background#e0ddc880
settings.checkboxBackground#ece9d8
settings.checkboxBorder#d5d2c0
settings.checkboxForeground#333f2c
settings.dropdownBackground#ece9d8
settings.dropdownBorder#d5d2c0
settings.dropdownForeground#333f2c
settings.focusedRowBackground#ece9d860
settings.focusedRowBorder#2e7d3240
settings.headerForeground#333f2c
settings.modifiedItemIndicator#2e7d32
settings.numberInputBackground#ece9d8
settings.numberInputBorder#d5d2c0
settings.numberInputForeground#333f2c
settings.rowHoverBackground#ece9d840
settings.textInputBackground#ece9d8
settings.textInputBorder#d5d2c0
settings.textInputForeground#333f2c
sideBar.background#edeadb
sideBar.border#dedbc9
sideBar.dropBackground#e0ddc840
sideBar.foreground#333f2c
sideBarSectionHeader.background#ece9d8
sideBarSectionHeader.border#dedbc9
sideBarSectionHeader.foreground#333f2c
sideBarTitle.foreground#333f2c
statusBar.background#edeadb
statusBar.border#dedbc9
statusBar.debuggingBackground#99541d
statusBar.debuggingForeground#f4f2e6
statusBar.foreground#6b7a5e
statusBar.noFolderBackground#ece9d8
statusBar.noFolderForeground#6b7a5e
statusBarItem.activeBackground#d6d3bd
statusBarItem.errorBackground#b03a3a
statusBarItem.errorForeground#333f2c
statusBarItem.hoverBackground#e0ddc8
statusBarItem.prominentBackground#e2dfcd
statusBarItem.prominentHoverBackground#e0ddc8
statusBarItem.remoteBackground#2e7d32
statusBarItem.remoteForeground#f4f2e6
statusBarItem.warningBackground#87691a
statusBarItem.warningForeground#f4f2e6
tab.activeBackground#ece9d8
tab.activeBorderTop#2e7d32
tab.activeForeground#333f2c
tab.activeModifiedBorder#87691a
tab.border#f4f2e6
tab.hoverBackground#ece9d8
tab.hoverForeground#333f2c
tab.inactiveBackground#f4f2e6
tab.inactiveForeground#6b7a5e
tab.inactiveModifiedBorder#87691a80
tab.lastPinnedBorder#d5d2c0
terminal.ansiBlack#ece9d8
terminal.ansiBlue#1d7a5c
terminal.ansiBrightBlack#a8a492
terminal.ansiBrightBlue#2e8a6e
terminal.ansiBrightCyan#4a8a7a
terminal.ansiBrightGreen#3b8a3c
terminal.ansiBrightMagenta#8a5fb8
terminal.ansiBrightRed#c25050
terminal.ansiBrightWhite#222b1c
terminal.ansiBrightYellow#75641a
terminal.ansiCyan#3d7a6c
terminal.ansiGreen#349a3c
terminal.ansiMagenta#7a4fa8
terminal.ansiRed#b03a3a
terminal.ansiWhite#333f2c
terminal.ansiYellow#87691a
terminal.background#f4f2e6
terminal.border#dedbc9
terminal.foreground#333f2c
terminal.selectionBackground#e0ddc8
terminal.tab.activeBorder#2e7d32
terminalCursor.background#f4f2e6
terminalCursor.foreground#27ae37
testing.iconErrored#b03a3a
testing.iconFailed#b03a3a
testing.iconPassed#349a3c
testing.iconQueued#6b7a5e
testing.iconSkipped#87691a
testing.iconUnset#9aa48c
testing.runAction#349a3c
textBlockQuote.background#ece9d8
textBlockQuote.border#2e7d32
textCodeBlock.background#ece9d8
textLink.activeForeground#27ae37
textLink.foreground#3b8a3c
textPreformat.foreground#75641a
titleBar.activeBackground#f4f2e6
titleBar.activeForeground#333f2c
titleBar.border#dedbc9
titleBar.inactiveBackground#f7f5ec
titleBar.inactiveForeground#6b7a5e
toolbar.activeBackground#d6d3bd
toolbar.hoverBackground#e0ddc8
tree.indentGuidesStroke#dedbc9
tree.tableOddRowsBackground#f0ede0
walkThrough.embeddedEditorBackground#edeadb
welcomePage.background#f4f2e6
welcomePage.progress.foreground#2e7d32
welcomePage.tileBackground#ece9d8
welcomePage.tileBorder#dedbc9
welcomePage.tileHoverBackground#e2dfcd
widget.shadow#6b675380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#828e6e	italic
comment.block.documentation, comment.block.javadoc	#78846a	italic
comment.block.documentation storage.type, comment.block.javadoc keyword, comment.block.documentation punctuation.definition	#6b7a5e	bold italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, storage.type, storage.modifier	#2e7d32	—
string, string.quoted, string.template	#75641a	—
constant.character.escape	#7a4fa8	bold
string.regexp	#7a4fa8	—
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded	#75641a	italic
constant.numeric, constant.language, constant.character	#99541d	—
constant.language.boolean	#99541d	bold
entity.name.function, support.function, meta.function-call entity.name.function	#487612	—
variable.parameter	#4a6b2e	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.name.module	#1d7a5c	—
support.type.builtin, support.type.primitive	#1d7a5c	italic
entity.name.type.interface	#1d7a5c	—
entity.name.type.enum	#1d7a5c	—
variable, variable.other, variable.other.readwrite	#4a6b2e	—
variable.other.constant, variable.other.enummember	#99541d	—
variable.language.this, variable.language.self, variable.language.super	#3b8a3c	italic
variable.other.property, variable.other.object.property, support.variable.property	#4a6b2e	—
keyword.operator, punctuation.accessor, punctuation.separator	#6b7a5e	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.section, meta.brace	#6b7a5e	—
meta.decorator, meta.annotation, storage.type.annotation, punctuation.decorator	#487612	—
entity.name.label	#3b8a3c	—
entity.name.tag, punctuation.definition.tag	#2e7d32	—
entity.other.attribute-name	#487612	—
string.quoted.double.html, string.quoted.single.html	#75641a	—
support.type.property-name.css, meta.property-name.css	#3b8a3c	—
support.constant.property-value.css, meta.property-value.css	#4a6b2e	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#487612	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#1d7a5c	—
keyword.other.unit.css	#99541d	—
support.type.property-name.json	#3b8a3c	—
string.quoted.double.json	#75641a	—
entity.name.tag.yaml	#3b8a3c	—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml	#75641a	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml	#1d7a5c	—
markup.heading, entity.name.section	#2e7d32	bold
markup.bold	#333f2c	bold
markup.italic	#333f2c	italic
markup.bold markup.italic, markup.italic markup.bold	—	bold italic
markup.inline.raw, markup.fenced_code, markup.raw.block	#75641a	—
markup.underline.link	#1d7a5c	italic
string.other.link	#3d7a6c	—
punctuation.definition.list.begin.markdown	#3b8a3c	—
markup.quote	#6b7a5e	italic
markup.inserted	#349a3c	—
markup.deleted	#b03a3a	—
markup.changed	#87691a	—
invalid, invalid.illegal	#b03a3a	—
invalid.deprecated	#6b7a5e	strikethrough
emphasis	—	italic
strong	—	bold