Turtle Theme Collection

Name: Turtle Theme Collection
Author: Ryly Dou

Publisher: Ryly DouThemes in package: 4

A collection of themes by a turtle, for turtles

Open in VS Code GitHub

Color themes

VS Code preview

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

Turtle Theme Collection — Turtle Theme - Zughy Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#a93b3b
activityBar.background#eee8d5
activityBar.border#ded8c5
activityBar.foreground#302c2e
activityBar.inactiveForeground#a0938e
activityBarBadge.background#fdf6e3
activityBarBadge.foreground#302c2e
activityBarTop.foreground#302c2e
activityBarTop.inactiveForeground#a0938e
badge.background#fdf6e3
badge.foreground#302c2e
breadcrumb.activeSelectionForeground#302c2e
breadcrumb.focusForeground#302c2e
breadcrumb.foreground#7d7071
breadcrumbPicker.background#fdf6e3
button.background#f4cca1
button.foreground#000000
button.hoverBackground#eea160
button.secondaryBackground#fdf6e3
button.secondaryForeground#302c2e
button.secondaryHoverBackground#eee8d5
button.separator#fdf6e3
commandCenter.activeBackground#fdf6e3
commandCenter.activeBorder#fdf6e3
commandCenter.activeForeground#302c2e
commandCenter.background#fdf6e3
commandCenter.border#fdf6e3
commandCenter.debuggingBackground#fdf6e3
commandCenter.foreground#302c2e
commandCenter.inactiveBorder#fdf6e3
commandCenter.inactiveForeground#7d7071
commentsView.resolvedIcon#7d7071
commentsView.unresolvedIcon#a93b3b
debugIcon.breakpointDisabledForeground#f4cca1
debugIcon.breakpointForeground#a93b3b
debugIcon.continueForeground#397b44
debugIcon.disconnectForeground#a93b3b
debugIcon.pauseForeground#3978a8
debugIcon.restartForeground#397b44
debugIcon.startForeground#397b44
debugIcon.stepBackForeground#302c2e
debugIcon.stepIntoForeground#302c2e
debugIcon.stepOutForeground#302c2e
debugIcon.stepOverForeground#302c2e
debugIcon.stopForeground#a93b3b
debugToolBar.background#fdf6e3
debugToolBar.border#ded8c5
descriptionForeground#a0938e
diffEditor.diagonalFill#f4cca1
diffEditor.insertedLineBackground#0000
diffEditor.insertedTextBackground#397b4433
diffEditor.move.border#eea160
diffEditor.moveActive.border#302c2e
diffEditor.removedLineBackground#0000
diffEditor.removedTextBackground#a93b3b33
diffEditor.unchangedCodeBackground#eea160
diffEditor.unchangedRegionBackground#eea160
diffEditor.unchangedRegionForeground#7d7071
diffEditor.unchangedRegionShadow#0000
diffEditorGutter.insertedLineBackground#397b4440
diffEditorGutter.removedLineBackground#a93b3b40
disabledForeground#a0938e
dropdown.background#fdf6e3
dropdown.border#ded8c5
dropdown.foreground#302c2e
dropdown.listBackground#fdf6e3
editor.background#fdf6e3
editor.findMatchBackground#f4cca140
editor.findMatchBorder#a93b3b
editor.findMatchHighlightBackground#a93b3b40
editor.findRangeHighlightBackground#eea160
editor.foldBackground#eee8d5
editor.foreground#302c2e
editor.lineHighlightBackground#eee8d5
editor.rangeHighlightBackground#eee8d5
editor.selectionBackground#f47e1b40
editorActionList.background#fdf6e3
editorActionList.focusBackground#f4cca1
editorActionList.focusForeground#000000
editorActionList.foreground#302c2e
editorBracketHighlight.foreground1#a93b3b
editorBracketHighlight.foreground2#e6482e
editorBracketHighlight.foreground3#f47e1b
editorBracketHighlight.foreground4#397b44
editorBracketHighlight.foreground5#3978a8
editorBracketHighlight.foreground6#8e478c
editorBracketMatch.background#eee8d5
editorBracketMatch.border#eea160
editorCursor.background#ffffff
editorCursor.foreground#000000
editorGroup.border#eee8d5
editorGroup.dropBackground#a93b3b40
editorGroup.emptyBackground#eee8d5
editorGroup.focusedEmptyBorder#a93b3b
editorGroupHeader.tabsBackground#eee8d5
editorGroupHeader.tabsBorder#ded8c5
editorGutter.commentGlyphForeground#302c2e
editorGutter.commentRangeForeground#eee8d5
editorGutter.commentUnresolvedGlyphForeground#a93b3b
editorHoverWidget.background#fdf6e3
editorHoverWidget.border#ded8c5
editorHoverWidget.foreground#302c2e
editorHoverWidget.highlightForeground#a93b3b
editorHoverWidget.statusBarBackground#eee8d5
editorLightBulb.foreground#f47e1b
editorLineNumber.activeForeground#eea160
editorLineNumber.foreground#f4cca1
editorLink.activeForeground#a93b3b
editorMultiCursor.secondary.background#000000
editorMultiCursor.secondary.foreground#a93b3b
editorStickyScrollHover.background#eee8d5
editorSuggestWidget.background#fdf6e3
editorSuggestWidget.border#ded8c5
editorSuggestWidget.focusHighlightForeground#a93b3b
editorSuggestWidget.foreground#302c2e
editorSuggestWidget.highlightForeground#a93b3b
editorSuggestWidget.selectedBackground#f4cca1
editorSuggestWidget.selectedForeground#000000
editorSuggestWidget.selectedIconForeground#000000
editorSuggestWidgetStatus.foreground#7d7071
editorWarning.foreground#f47e1b
editorWhitespace.foreground#f4cca1
editorWidget.background#fdf6e3
errorForeground#a93b3b
focusBorder#a93b3b
foreground#302c2e
gitDecoration.addedResourceForeground#397b44
gitDecoration.conflictingResourceForeground#a93b3b
gitDecoration.deletedResourceForeground#a93b3b
gitDecoration.ignoredResourceForeground#f4cca1
gitDecoration.modifiedResourceForeground#f47e1b
gitDecoration.renamedResourceForeground#8e478c
gitDecoration.stageDeletedResourceForeground#f47e1b
gitDecoration.stageModifiedResourceForeground#f47e1b
gitDecoration.submoduleResourceForeground#ff0000
gitDecoration.untrackedResourceForeground#397b44
icon.foreground#a0938e
input.background#fdf6e3
input.border#ded8c5
input.foreground#302c2e
input.placeholderForeground#7d7071
inputOption.activeBackground#f4cca1
inputOption.activeBorder#a93b3b
inputOption.activeForeground#000000
inputOption.hoverBackground#f4cca1
keybindingLabel.background#eee8d5
keybindingLabel.border#ded8c5
keybindingLabel.bottomBorder#ded8c5
keybindingLabel.foreground#302c2e
list.activeSelectionBackground#f4cca1
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.dropBackground#a93b3b40
list.highlightForeground#a93b3b
list.hoverBackground#fdf6e3
list.inactiveSelectionBackground#fdf6e3
list.inactiveSelectionForeground#302c2e
list.inactiveSelectionIconForeground#7d7071
menu.background#fdf6e3
menu.border#ded8c5
menu.foreground#302c2e
menu.selectionBackground#f4cca1
menu.selectionForeground#000000
menu.separatorBackground#ded8c5
menubar.selectionBackground#f4cca1
menubar.selectionForeground#000000
merge.commonContentBackground#ff0000
merge.commonHeaderBackground#ff0000
merge.currentContentBackground#8e478c26
merge.currentHeaderBackground#8e478c54
merge.incomingContentBackground#3978a826
merge.incomingHeaderBackground#3978a854
mergeEditor.change.background#0000
mergeEditor.change.word.background#f47e1b33
mergeEditor.conflict.handledFocused.border#397b44
mergeEditor.conflict.handledUnfocused.border#397b4480
mergeEditor.conflict.unhandledFocused.border#a93b3b
mergeEditor.conflict.unhandledUnfocused.border#a93b3b
multiDiffEditor.background#eee8d5
multiDiffEditor.border#ded8c5
multiDiffEditor.headerBackground#eee8d5
notificationCenter.border#ded8c5
notificationCenterHeader.background#fdf6e3
notificationCenterHeader.foreground#302c2e
notifications.background#fdf6e3
notifications.border#ded8c5
notifications.foreground#302c2e
panel.background#eee8d5
panel.border#ded8c5
panelSection.dropBackground#a93b3b40
panelSectionHeader.background#eee8d5
panelTitle.activeForeground#302c2e
panelTitle.inactiveForeground#a0938e
peekView.border#a93b3b
peekViewEditor.background#fdf6e3
peekViewEditor.matchHighlightBackground#a93b3b40
peekViewEditor.matchHighlightBorder#a93b3b
peekViewEditorStickyScroll.background#ded8c5
peekViewResult.background#eee8d5
peekViewResult.fileForeground#302c2e
peekViewResult.lineForeground#7d7071
peekViewResult.matchHighlightBackground#f4cca1
peekViewTitle.background#eee8d5
peekViewTitleDescription.foreground#a0938e
peekViewTitleLabel.foreground#302c2e
pickerGroup.border#ded8c5
pickerGroup.foreground#a93b3b
progressBar.background#a93b3b
quickInput.background#fdf6e3
quickInput.foreground#302c2e
quickInputList.focusBackground#f4cca1
quickInputList.focusForeground#000000
quickInputList.focusIconForeground#000000
quickInputTitle.background#eee8d5
scmGraph.foreground1#e6482e
scmGraph.foreground2#f47e1b
scmGraph.foreground3#397b44
scmGraph.foreground4#3978a8
scmGraph.foreground5#8e478c
scmGraph.historyItemBaseRefColor#7d7071
scmGraph.historyItemHoverDefaultLabelBackground#7d7071
scmGraph.historyItemHoverDefaultLabelForeground#eee8d5
scmGraph.historyItemHoverLabelForeground#eee8d5
scmGraph.historyItemRefColor#7d7071
scmGraph.historyItemRemoteRefColor#7d7071
scrollbar.shadow#ded8c5
scrollbarSlider.activeBackground#0001
scrollbarSlider.background#0001
scrollbarSlider.hoverBackground#0002
selectionHighlightBackground#f47e1b4040
settings.headerForeground#302c2e
settings.modifiedItemIndicator#a93b3b
sideBar.background#eee8d5
sideBar.border#ded8c5
sideBar.dropBackground#a93b3b40
sideBar.foreground#7d7071
sideBarSectionHeader.background#eee8d5
sideBarSectionHeader.border#ded8c5
statusBar.background#eee8d5
statusBar.border#ded8c5
statusBar.debuggingBackground#f4cca1
statusBar.debuggingForeground#000000
statusBar.foreground#7d7071
statusBar.noFolderBackground#eee8d5
statusBar.noFolderForeground#7d7071
statusBarItem.activeBackground#fdf6e3
statusBarItem.hoverForeground#302c2e
statusBarItem.remoteBackground#0000
tab.activeBackground#fdf6e3
tab.activeBorder#fdf6e3
tab.activeBorderTop#a93b3b
tab.activeForeground#302c2e
tab.activeModifiedBorder#a93b3b
tab.border#ded8c5
tab.hoverBackground#fdf6e3
tab.hoverForeground#302c2e
tab.inactiveBackground#eee8d5
tab.inactiveForeground#a0938e
tab.inactiveModifiedBorder#a93b3b54
tab.lastPinnedBorder#ded8c5
tab.unfocusedActiveBackground#fdf6e3
tab.unfocusedActiveBorder#fdf6e3
tab.unfocusedActiveForeground#302c2e
tab.unfocusedHoverBackground#fdf6e3
tab.unfocusedHoverForeground#302c2e
tab.unfocusedInactiveForeground#a0938e
terminal.foreground#302c2e
terminalStickyScrollHover.background#fdf6e3
textBlockQuote.background#eee8d5
textBlockQuote.border#a93b3b
textLink.activeForeground#a93b3b
textLink.foreground#a93b3b
titleBar.activeBackground#eee8d5
titleBar.activeForeground#7d7071
titleBar.border#ded8c5
titleBar.inactiveBackground#eee8d5
titleBar.inactiveForeground#a0938e
toolbar.activeBackground#fdf6e3
toolbar.hoverBackground#fdf6e3
widget.border#ded8c5
widget.shadow#ded8c5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.block.documentation, comment.line, punctuation.definition.comment	#397b44	—
string	#f47e1b	—
constant.character, variable.language.makefile	#8e478c	—
constant.language, constant.numeric, constant.other	#8e478c	—
constant.other.color, entity.name.tag.yaml, entity.name.variable, meta.function-call.arguments, meta.jsx.children.js.jsx, meta.object.member, source.css support.type.property-name, source.less support.type.property-name, source.postcss support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.stylus support.type.property-name, support.constant.color, variable, variable.other.object.property, meta.jsx.children	#302c2e	—
variable.language.this	#7d7071	italic
entity, entity.name.type, keyword.type, meta.function, support, variable.other.makefile	#3978a8	—
entity.name.function, entity.name.method, entity.name.type.delegate, entity.other.attribute-name.pseudo-class, meta.function-call, meta.selector.pseudo-class, support.function	#397b44	—
keyword, keyword.operator.expression, keyword.operator.new, keyword.operator.wordlike, storage.modifier, storage.type, storage.type.function, entity.name.function.decorator	#a93b3b	italic
keyword.operator, storage.type.function.arrow	—
entity.name.tag, meta.tag.end, meta.tag.start, meta.tag.structure.end, meta.tag.structure.start, punctuation.definition.variable.makefile	#a93b3b	—
keyword.operator.combinator, keyword.operator.type.annotation, meta.brace, punctuation, punctuation.definition.interpolation	#bf7958	—
punctuation.separator, punctuation.terminator, meta.function.parameters.gdscript, meta.function.gdscript, keyword.control.@.makefile	#eea160	—
source.json meta.structure.dictionary.json support.type.property-name.json	#a93b3b	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#e6482e	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f47e1b	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#397b44	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#3978a8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8e478c	—
source.yaml meta.mapping.yaml entity.name.tag.yaml	#a93b3b	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#e6482e	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#f47e1b	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#397b44	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#3978a8	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#8e478c	—
markup.italic	—	italic
markup.bold	—	bold
markup.italic markup.bold	—	italic bold
markup.underline	—	underline
markup.link, markup.underline.link	#397b44	underline
markup.fenced_code, markup.inline.raw	#8e478c	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}