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

Kokedera Winter

VS Code preview

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

Kokedera — Moss Temple Theme — Kokedera Winter

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#e2e6e240
activityBar.activeBorder#25708f
activityBar.background#eef0ee
activityBar.border#d2d7d2
activityBar.foreground#323c36
activityBar.inactiveForeground#8a968c
activityBarBadge.background#25708f
activityBarBadge.foreground#eef0ee
badge.background#c9d0c9
badge.foreground#323c36
banner.background#d8ddd8
banner.foreground#323c36
banner.iconForeground#2e7a8a
breadcrumb.activeSelectionForeground#323c36
breadcrumb.focusForeground#323c36
breadcrumb.foreground#5e6b62
breadcrumbPicker.background#e2e6e2
button.background#cfdccf
button.border#25708f60
button.foreground#323c36
button.hoverBackground#c2d4c2
button.secondaryBackground#d8ddd8
button.secondaryForeground#323c36
button.secondaryHoverBackground#d4dad4
charts.blue#1f7d6b
charts.foreground#323c36
charts.green#2a7f9c
charts.lines#5e6b62
charts.orange#8a552e
charts.purple#6b5a9a
charts.red#a84848
charts.yellow#7a6518
checkbox.background#e2e6e2
checkbox.border#c8cec8
checkbox.foreground#323c36
checkbox.selectBackground#25708f
commandCenter.activeBackground#d4dad4
commandCenter.activeForeground#323c36
commandCenter.background#e6e9e6
commandCenter.border#d2d7d2
commandCenter.foreground#323c36
debugConsole.errorForeground#a84848
debugConsole.infoForeground#5e6b62
debugConsole.sourceForeground#323c36
debugConsole.warningForeground#7a6518
debugConsoleInputIcon.foreground#2e7a8a
debugIcon.breakpointDisabledForeground#a8484860
debugIcon.breakpointForeground#a84848
debugIcon.continueForeground#2a7f9c
debugIcon.pauseForeground#7a6518
debugIcon.restartForeground#2a7f9c
debugIcon.startForeground#2a7f9c
debugIcon.stepIntoForeground#1f7d6b
debugIcon.stepOutForeground#1f7d6b
debugIcon.stepOverForeground#1f7d6b
debugIcon.stopForeground#a84848
debugToolBar.background#e2e6e2
debugToolBar.border#c8cec8
descriptionForeground#5e6b62
diffEditor.diagonalFill#d2d7d240
diffEditor.insertedLineBackground#2a7f9c10
diffEditor.insertedTextBackground#2a7f9c15
diffEditor.removedLineBackground#a8484810
diffEditor.removedTextBackground#a8484815
dropdown.background#e2e6e2
dropdown.border#c8cec8
dropdown.foreground#323c36
dropdown.listBackground#e2e6e2
editor.background#eef0ee
editor.findMatchBackground#6b5c2a40
editor.findMatchBorder#6b5c2a80
editor.findMatchHighlightBackground#6b5c2a25
editor.foldBackground#e2e6e240
editor.foreground#323c36
editor.hoverHighlightBackground#d4dad440
editor.inactiveSelectionBackground#d4dad480
editor.lineHighlightBackground#00000008
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#e2e6e240
editor.selectionBackground#d4dad4
editor.selectionHighlightBackground#d4dad440
editor.wordHighlightBackground#aacbb225
editor.wordHighlightStrongBackground#aacbb240
editorBracketHighlight.foreground1#25708f
editorBracketHighlight.foreground2#1f7d6b
editorBracketHighlight.foreground3#6b5c2a
editorBracketHighlight.foreground4#8a552e
editorBracketHighlight.foreground5#2f7846
editorBracketHighlight.foreground6#7a6518
editorBracketHighlight.unexpectedBracket.foreground#a84848
editorBracketMatch.background#c9d0c940
editorBracketMatch.border#25708f80
editorCursor.background#eef0ee
editorCursor.foreground#1f8aa8
editorError.foreground#a84848
editorGroup.border#d2d7d2
editorGroup.dropBackground#d4dad440
editorGroupHeader.noTabsBackground#e6e9e6
editorGroupHeader.tabsBackground#eef0ee
editorGroupHeader.tabsBorder#d2d7d2
editorGutter.addedBackground#2a7f9c
editorGutter.background#eef0ee
editorGutter.deletedBackground#a84848
editorGutter.foldingControlForeground#5e6b62
editorGutter.modifiedBackground#7a6518
editorHint.foreground#8a968c
editorHoverWidget.background#e2e6e2
editorHoverWidget.border#c8cec8
editorHoverWidget.foreground#323c36
editorIndentGuide.activeBackground#a2aaa2
editorIndentGuide.background#d2d7d2
editorInfo.foreground#1f7d6b
editorLightBulb.foreground#7a6518
editorLightBulbAutoFix.foreground#2a7f9c
editorLineNumber.activeForeground#2e7a8a
editorLineNumber.foreground#a2aaa2
editorOverviewRuler.addedForeground#2a7f9c
editorOverviewRuler.border#d2d7d2
editorOverviewRuler.deletedForeground#a84848
editorOverviewRuler.errorForeground#a84848
editorOverviewRuler.findMatchForeground#6b5c2a80
editorOverviewRuler.infoForeground#1f7d6b
editorOverviewRuler.modifiedForeground#7a6518
editorOverviewRuler.warningForeground#7a6518
editorRuler.foreground#d2d7d2
editorStickyScroll.background#e6e9e6
editorStickyScrollHover.background#e2e6e2
editorSuggestWidget.background#e2e6e2
editorSuggestWidget.focusHighlightForeground#2e7a8a
editorSuggestWidget.foreground#323c36
editorSuggestWidget.highlightForeground#2e7a8a
editorSuggestWidget.selectedBackground#d4dad4
editorSuggestWidget.selectedForeground#323c36
editorWarning.foreground#7a6518
editorWhitespace.foreground#c8cec8
editorWidget.background#e2e6e2
editorWidget.border#c8cec8
editorWidget.foreground#323c36
errorForeground#a84848
focusBorder#25708f80
foreground#323c36
gitDecoration.addedResourceForeground#2a7f9c
gitDecoration.conflictingResourceForeground#7a6518
gitDecoration.deletedResourceForeground#a84848
gitDecoration.ignoredResourceForeground#a2aaa2
gitDecoration.modifiedResourceForeground#7a6518
gitDecoration.renamedResourceForeground#1f7d6b
gitDecoration.stageDeletedResourceForeground#a84848
gitDecoration.stageModifiedResourceForeground#7a6518
gitDecoration.submoduleResourceForeground#1f7d6b
gitDecoration.untrackedResourceForeground#2a7f9c
icon.foreground#5e6b62
input.background#e2e6e2
input.border#c8cec8
input.foreground#323c36
input.placeholderForeground#8a968c
inputOption.activeBackground#25708f40
inputOption.activeBorder#25708f
inputOption.activeForeground#323c36
inputValidation.errorBackground#a8484820
inputValidation.errorBorder#a8484860
inputValidation.infoBackground#1f7d6b20
inputValidation.infoBorder#1f7d6b60
inputValidation.warningBackground#7a651820
inputValidation.warningBorder#7a651860
keybindingLabel.background#d8ddd840
keybindingLabel.border#c8cec860
keybindingLabel.bottomBorder#c8cec880
keybindingLabel.foreground#323c36
list.activeSelectionBackground#d4dad4
list.activeSelectionForeground#323c36
list.dropBackground#d4dad440
list.errorForeground#a84848
list.filterMatchBackground#6b5c2a40
list.filterMatchBorder#6b5c2a80
list.focusBackground#d4dad4
list.focusForeground#323c36
list.focusOutline#25708f80
list.highlightForeground#2e7a8a
list.hoverBackground#e2e6e2
list.hoverForeground#323c36
list.inactiveSelectionBackground#d8ddd8
list.inactiveSelectionForeground#323c36
list.warningForeground#7a6518
menu.background#e2e6e2
menu.border#c8cec8
menu.foreground#323c36
menu.selectionBackground#d4dad4
menu.selectionForeground#323c36
menu.separatorBackground#d2d7d2
menubar.selectionBackground#d4dad4
menubar.selectionForeground#323c36
merge.border#c8cec8
merge.currentContentBackground#2a7f9c15
merge.currentHeaderBackground#2a7f9c30
merge.incomingContentBackground#1f7d6b15
merge.incomingHeaderBackground#1f7d6b30
minimap.background#eef0ee
minimap.errorHighlight#a8484880
minimap.findMatchHighlight#6b5c2a60
minimap.selectionHighlight#d4dad480
minimap.warningHighlight#7a651880
minimapGutter.addedBackground#2a7f9c
minimapGutter.deletedBackground#a84848
minimapGutter.modifiedBackground#7a6518
minimapSlider.activeBackground#a2aaa260
minimapSlider.background#a2aaa220
minimapSlider.hoverBackground#a2aaa240
notificationCenter.border#c8cec8
notificationLink.foreground#2e7a8a
notifications.background#e2e6e2
notifications.border#c8cec8
notifications.foreground#323c36
notificationsErrorIcon.foreground#a84848
notificationsInfoIcon.foreground#1f7d6b
notificationsWarningIcon.foreground#7a6518
panel.background#e6e9e6
panel.border#d2d7d2
panel.dropBorder#25708f
panelSection.border#d2d7d2
panelSectionHeader.background#e2e6e2
panelTitle.activeBorder#25708f
panelTitle.activeForeground#323c36
panelTitle.inactiveForeground#5e6b62
peekView.border#25708f
peekViewEditor.background#e6e9e6
peekViewEditor.matchHighlightBackground#6b5c2a40
peekViewResult.background#e2e6e2
peekViewResult.fileForeground#323c36
peekViewResult.lineForeground#5e6b62
peekViewResult.matchHighlightBackground#6b5c2a40
peekViewResult.selectionBackground#d4dad4
peekViewResult.selectionForeground#323c36
peekViewTitle.background#e2e6e2
peekViewTitleDescription.foreground#5e6b62
peekViewTitleLabel.foreground#323c36
progressBar.background#25708f
scrollbar.shadow#5c645c80
scrollbarSlider.activeBackground#a2aaa2a0
scrollbarSlider.background#a2aaa240
scrollbarSlider.hoverBackground#a2aaa280
selection.background#d4dad480
settings.checkboxBackground#e2e6e2
settings.checkboxBorder#c8cec8
settings.checkboxForeground#323c36
settings.dropdownBackground#e2e6e2
settings.dropdownBorder#c8cec8
settings.dropdownForeground#323c36
settings.focusedRowBackground#e2e6e260
settings.focusedRowBorder#25708f40
settings.headerForeground#323c36
settings.modifiedItemIndicator#25708f
settings.numberInputBackground#e2e6e2
settings.numberInputBorder#c8cec8
settings.numberInputForeground#323c36
settings.rowHoverBackground#e2e6e240
settings.textInputBackground#e2e6e2
settings.textInputBorder#c8cec8
settings.textInputForeground#323c36
sideBar.background#e6e9e6
sideBar.border#d2d7d2
sideBar.dropBackground#d4dad440
sideBar.foreground#323c36
sideBarSectionHeader.background#e2e6e2
sideBarSectionHeader.border#d2d7d2
sideBarSectionHeader.foreground#323c36
sideBarTitle.foreground#323c36
statusBar.background#e6e9e6
statusBar.border#d2d7d2
statusBar.debuggingBackground#8a552e
statusBar.debuggingForeground#eef0ee
statusBar.foreground#5e6b62
statusBar.noFolderBackground#e2e6e2
statusBar.noFolderForeground#5e6b62
statusBarItem.activeBackground#c9d0c9
statusBarItem.errorBackground#a84848
statusBarItem.errorForeground#323c36
statusBarItem.hoverBackground#d4dad4
statusBarItem.prominentBackground#d8ddd8
statusBarItem.prominentHoverBackground#d4dad4
statusBarItem.remoteBackground#25708f
statusBarItem.remoteForeground#eef0ee
statusBarItem.warningBackground#7a6518
statusBarItem.warningForeground#eef0ee
tab.activeBackground#e2e6e2
tab.activeBorderTop#25708f
tab.activeForeground#323c36
tab.activeModifiedBorder#7a6518
tab.border#eef0ee
tab.hoverBackground#e2e6e2
tab.hoverForeground#323c36
tab.inactiveBackground#eef0ee
tab.inactiveForeground#5e6b62
tab.inactiveModifiedBorder#7a651880
tab.lastPinnedBorder#c8cec8
terminal.ansiBlack#e2e6e2
terminal.ansiBlue#1f7d6b
terminal.ansiBrightBlack#a2aaa2
terminal.ansiBrightBlue#2a8a75
terminal.ansiBrightCyan#4a8a7e
terminal.ansiBrightGreen#2e7a8a
terminal.ansiBrightMagenta#7d6aab
terminal.ansiBrightRed#b85858
terminal.ansiBrightWhite#222b26
terminal.ansiBrightYellow#6b5c2a
terminal.ansiCyan#357d70
terminal.ansiGreen#2a7f9c
terminal.ansiMagenta#6b5a9a
terminal.ansiRed#a84848
terminal.ansiWhite#323c36
terminal.ansiYellow#7a6518
terminal.background#eef0ee
terminal.border#d2d7d2
terminal.foreground#323c36
terminal.selectionBackground#d4dad4
terminal.tab.activeBorder#25708f
terminalCursor.background#eef0ee
terminalCursor.foreground#1f8aa8
testing.iconErrored#a84848
testing.iconFailed#a84848
testing.iconPassed#2a7f9c
testing.iconQueued#5e6b62
testing.iconSkipped#7a6518
testing.iconUnset#8a968c
testing.runAction#2a7f9c
textBlockQuote.background#e2e6e2
textBlockQuote.border#25708f
textCodeBlock.background#e2e6e2
textLink.activeForeground#1f8aa8
textLink.foreground#2e7a8a
textPreformat.foreground#6b5c2a
titleBar.activeBackground#eef0ee
titleBar.activeForeground#323c36
titleBar.border#d2d7d2
titleBar.inactiveBackground#f2f4f2
titleBar.inactiveForeground#5e6b62
toolbar.activeBackground#c9d0c9
toolbar.hoverBackground#d4dad4
tree.indentGuidesStroke#d2d7d2
tree.tableOddRowsBackground#e9ece9
walkThrough.embeddedEditorBackground#e6e9e6
welcomePage.background#eef0ee
welcomePage.progress.foreground#25708f
welcomePage.tileBackground#e2e6e2
welcomePage.tileBorder#d2d7d2
welcomePage.tileHoverBackground#d8ddd8
widget.shadow#5c645c80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7d8a80	italic
comment.block.documentation, comment.block.javadoc	#6e7a70	italic
comment.block.documentation storage.type, comment.block.javadoc keyword, comment.block.documentation punctuation.definition	#5e6b62	bold italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, storage.type, storage.modifier	#25708f	—
string, string.quoted, string.template	#6b5c2a	—
constant.character.escape	#6b5a9a	bold
string.regexp	#6b5a9a	—
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded	#6b5c2a	italic
constant.numeric, constant.language, constant.character	#8a552e	—
constant.language.boolean	#8a552e	bold
entity.name.function, support.function, meta.function-call entity.name.function	#2f7846	—
variable.parameter	#4a6b5c	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.name.module	#1f7d6b	—
support.type.builtin, support.type.primitive	#1f7d6b	italic
entity.name.type.interface	#1f7d6b	—
entity.name.type.enum	#1f7d6b	—
variable, variable.other, variable.other.readwrite	#4a6b5c	—
variable.other.constant, variable.other.enummember	#8a552e	—
variable.language.this, variable.language.self, variable.language.super	#2e7a8a	italic
variable.other.property, variable.other.object.property, support.variable.property	#4a6b5c	—
keyword.operator, punctuation.accessor, punctuation.separator	#5e6b62	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.section, meta.brace	#5e6b62	—
meta.decorator, meta.annotation, storage.type.annotation, punctuation.decorator	#2f7846	—
entity.name.label	#2e7a8a	—
entity.name.tag, punctuation.definition.tag	#25708f	—
entity.other.attribute-name	#2f7846	—
string.quoted.double.html, string.quoted.single.html	#6b5c2a	—
support.type.property-name.css, meta.property-name.css	#2e7a8a	—
support.constant.property-value.css, meta.property-value.css	#4a6b5c	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#2f7846	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#1f7d6b	—
keyword.other.unit.css	#8a552e	—
support.type.property-name.json	#2e7a8a	—
string.quoted.double.json	#6b5c2a	—
entity.name.tag.yaml	#2e7a8a	—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml	#6b5c2a	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml	#1f7d6b	—
markup.heading, entity.name.section	#25708f	bold
markup.bold	#323c36	bold
markup.italic	#323c36	italic
markup.bold markup.italic, markup.italic markup.bold	—	bold italic
markup.inline.raw, markup.fenced_code, markup.raw.block	#6b5c2a	—
markup.underline.link	#1f7d6b	italic
string.other.link	#357d70	—
punctuation.definition.list.begin.markdown	#2e7a8a	—
markup.quote	#5e6b62	italic
markup.inserted	#2a7f9c	—
markup.deleted	#a84848	—
markup.changed	#7a6518	—
invalid, invalid.illegal	#a84848	—
invalid.deprecated	#5e6b62	strikethrough
emphasis	—	italic
strong	—	bold