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 - Monokai 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#cc7a0a
activityBar.background#fdf7f3
activityBar.border#ede7e5
activityBar.foreground#302c2e
activityBar.inactiveForeground#a0938e
activityBarBadge.background#f3ebe7
activityBarBadge.foreground#302c2e
activityBarTop.foreground#302c2e
activityBarTop.inactiveForeground#a0938e
badge.background#f3ebe7
badge.foreground#302c2e
breadcrumb.activeSelectionForeground#2c232e
breadcrumb.focusForeground#2c232e
breadcrumb.foreground#7d7071
breadcrumbPicker.background#fdf7f3
button.background#ffba67
button.foreground#302c2e
button.hoverBackground#ba6a00
button.secondaryBackground#fdf7f3
button.secondaryForeground#2c232e
button.secondaryHoverBackground#f3ebe7
button.separator#fdf7f3
commandCenter.activeBackground#fdf7f3
commandCenter.activeBorder#fdf7f3
commandCenter.activeForeground#2c232e
commandCenter.background#fdf7f3
commandCenter.border#fdf7f3
commandCenter.debuggingBackground#fdf7f3
commandCenter.foreground#2c232e
commandCenter.inactiveBorder#fdf7f3
commandCenter.inactiveForeground#7d7071
commentsView.resolvedIcon#7d7071
commentsView.unresolvedIcon#cc7a0a
debugIcon.breakpointDisabledForeground#d2c9c4
debugIcon.breakpointForeground#ce4770
debugIcon.continueForeground#218871
debugIcon.disconnectForeground#ce4770
debugIcon.pauseForeground#2473b6
debugIcon.restartForeground#218871
debugIcon.startForeground#218871
debugIcon.stepBackForeground#2c232e
debugIcon.stepIntoForeground#2c232e
debugIcon.stepOutForeground#2c232e
debugIcon.stepOverForeground#2c232e
debugIcon.stopForeground#ce4770
debugToolBar.background#fdf7f3
debugToolBar.border#ede7e5
descriptionForeground#a0938e
diffEditor.diagonalFill#d2c9c4
diffEditor.insertedLineBackground#0000
diffEditor.insertedTextBackground#21887133
diffEditor.move.border#beb5b3
diffEditor.moveActive.border#2c232e
diffEditor.removedLineBackground#0000
diffEditor.removedTextBackground#ce477033
diffEditor.unchangedCodeBackground#0001
diffEditor.unchangedRegionBackground#0001
diffEditor.unchangedRegionForeground#7d7071
diffEditor.unchangedRegionShadow#0000
diffEditorGutter.insertedLineBackground#21887140
diffEditorGutter.removedLineBackground#ce477040
disabledForeground#a0938e
dropdown.background#fdf7f3
dropdown.border#ede7e5
dropdown.foreground#2c232e
dropdown.listBackground#fdf7f3
editor.background#fdf7f3
editor.findMatchBackground#ffba6740
editor.findMatchBorder#cc7a0a
editor.findMatchHighlightBackground#cc7a0a40
editor.findRangeHighlightBackground#0001
editor.foldBackground#f3ebe7
editor.foreground#302c2e
editor.lineHighlightBackground#fdf7f3
editor.rangeHighlightBackground#fdf7f3
editor.selectionBackground#f47e1b40
editorActionList.background#fdf7f3
editorActionList.focusBackground#ffba67
editorActionList.focusForeground#302c2e
editorActionList.foreground#2c232e
editorBracketHighlight.foreground1#ce4770
editorBracketHighlight.foreground2#d4572b
editorBracketHighlight.foreground3#b16803
editorBracketHighlight.foreground4#218871
editorBracketHighlight.foreground5#2473b6
editorBracketHighlight.foreground6#6851a2
editorBracketMatch.background#f3ebe7
editorBracketMatch.border#a59c9c
editorCursor.background#ffffff
editorCursor.foreground#000000
editorGroup.border#fdf7f3
editorGroup.dropBackground#a93b3b40
editorGroup.emptyBackground#fdf7f3
editorGroup.focusedEmptyBorder#cc7a0a
editorGroupHeader.tabsBackground#fdf7f3
editorGroupHeader.tabsBorder#ede7e5
editorGutter.commentGlyphForeground#2c232e
editorGutter.commentRangeForeground#fdf7f3
editorGutter.commentUnresolvedGlyphForeground#cc7a0a
editorHoverWidget.background#fdf7f3
editorHoverWidget.border#ede7e5
editorHoverWidget.foreground#2c232e
editorHoverWidget.highlightForeground#cc7a0a
editorHoverWidget.statusBarBackground#f3ebe7
editorLightBulb.foreground#b16803
editorLineNumber.activeForeground#beb5b3
editorLineNumber.foreground#d2c9c4
editorLink.activeForeground#c97700
editorMultiCursor.secondary.background#302c2e
editorMultiCursor.secondary.foreground#cc7a0a
editorStickyScrollHover.background#f3ebe7
editorSuggestWidget.background#fdf7f3
editorSuggestWidget.border#ede7e5
editorSuggestWidget.focusHighlightForeground#c97700
editorSuggestWidget.foreground#2c232e
editorSuggestWidget.highlightForeground#cc7a0a
editorSuggestWidget.selectedBackground#ffba67
editorSuggestWidget.selectedForeground#302c2e
editorSuggestWidget.selectedIconForeground#302c2e
editorSuggestWidgetStatus.foreground#7d7071
editorWarning.foreground#b16803
editorWhitespace.foreground#d2c9c4
editorWidget.background#fdf7f3
errorForeground#ce4770
focusBorder#cc7a0a
foreground#302c2e
gitDecoration.addedResourceForeground#218871
gitDecoration.conflictingResourceForeground#ce4770
gitDecoration.deletedResourceForeground#ce4770
gitDecoration.ignoredResourceForeground#d2c9c4
gitDecoration.modifiedResourceForeground#b16803
gitDecoration.renamedResourceForeground#6851a2
gitDecoration.stageDeletedResourceForeground#b16803
gitDecoration.stageModifiedResourceForeground#b16803
gitDecoration.submoduleResourceForeground#ff0000
gitDecoration.untrackedResourceForeground#218871
icon.foreground#a0938e
input.background#fdf7f3
input.border#ede7e5
input.foreground#2c232e
input.placeholderForeground#7d7071
inputOption.activeBackground#ffba67
inputOption.activeBorder#cc7a0a
inputOption.activeForeground#302c2e
inputOption.hoverBackground#ffba67
keybindingLabel.background#fdf7f3
keybindingLabel.border#ede7e5
keybindingLabel.bottomBorder#ede7e5
keybindingLabel.foreground#302c2e
list.activeSelectionBackground#ffba67
list.activeSelectionForeground#302c2e
list.activeSelectionIconForeground#302c2e
list.dropBackground#a93b3b40
list.highlightForeground#c97700
list.hoverBackground#f3ebe7
list.inactiveSelectionBackground#eee5de
list.inactiveSelectionForeground#302c2e
list.inactiveSelectionIconForeground#7d7071
menu.background#fdf7f3
menu.border#ede7e5
menu.foreground#2c232e
menu.selectionBackground#ffba67
menu.selectionForeground#302c2e
menu.separatorBackground#ede7e5
menubar.selectionBackground#ffba67
menubar.selectionForeground#302c2e
merge.commonContentBackground#ff0000
merge.commonHeaderBackground#ff0000
merge.currentContentBackground#6851a226
merge.currentHeaderBackground#6851a254
merge.incomingContentBackground#2473b626
merge.incomingHeaderBackground#2473b654
mergeEditor.change.background#0000
mergeEditor.change.word.background#b1680333
mergeEditor.conflict.handledFocused.border#218871
mergeEditor.conflict.handledUnfocused.border#21887180
mergeEditor.conflict.unhandledFocused.border#ce4770
mergeEditor.conflict.unhandledUnfocused.border#ce4770
multiDiffEditor.background#fdf7f3
multiDiffEditor.border#ede7e5
multiDiffEditor.headerBackground#fdf7f3
notificationCenter.border#ede7e5
notificationCenterHeader.background#fdf7f3
notificationCenterHeader.foreground#2c232e
notifications.background#fdf7f3
notifications.border#ede7e5
notifications.foreground#2c232e
panel.background#fdf7f3
panel.border#ede7e5
panelSection.dropBackground#a93b3b40
panelSectionHeader.background#fdf7f3
panelTitle.activeForeground#302c2e
panelTitle.inactiveForeground#a0938e
peekView.border#cc7a0a
peekViewEditor.background#fdf6e3
peekViewEditor.matchHighlightBackground#cc7a0a40
peekViewEditor.matchHighlightBorder#cc7a0a
peekViewEditorStickyScroll.background#ede7e5
peekViewResult.background#fdf7f3
peekViewResult.fileForeground#302c2e
peekViewResult.lineForeground#7d7071
peekViewResult.matchHighlightBackground#ffba67
peekViewTitle.background#fdf7f3
peekViewTitleDescription.foreground#a0938e
peekViewTitleLabel.foreground#302c2e
pickerGroup.border#ede7e5
pickerGroup.foreground#cc7a0a
progressBar.background#cc7a0a
quickInput.background#fdf7f3
quickInput.foreground#2c232e
quickInputList.focusBackground#ffba67
quickInputList.focusForeground#302c2e
quickInputList.focusIconForeground#302c2e
quickInputTitle.background#f3ebe7
scmGraph.foreground1#d4572b
scmGraph.foreground2#b16803
scmGraph.foreground3#218871
scmGraph.foreground4#2473b6
scmGraph.foreground5#6851a2
scmGraph.historyItemBaseRefColor#7d7071
scmGraph.historyItemHoverDefaultLabelBackground#7d7071
scmGraph.historyItemHoverDefaultLabelForeground#fdf7f3
scmGraph.historyItemHoverLabelForeground#fdf7f3
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#cc7a0a
sideBar.background#fdf7f3
sideBar.border#ede7e5
sideBar.dropBackground#a93b3b40
sideBar.foreground#7d7071
sideBarSectionHeader.background#fdf7f3
sideBarSectionHeader.border#ede7e5
statusBar.background#fdf7f3
statusBar.border#ede7e5
statusBar.debuggingBackground#ffba67
statusBar.debuggingForeground#302c2e
statusBar.foreground#7d7071
statusBar.noFolderBackground#fdf7f3
statusBar.noFolderForeground#7d7071
statusBarItem.activeBackground#eee5de
statusBarItem.hoverForeground#302c2e
statusBarItem.remoteBackground#0000
tab.activeBackground#fdf7f3
tab.activeBorder#fdf7f3
tab.activeBorderTop#c97700
tab.activeForeground#302c2e
tab.activeModifiedBorder#cc7a0a
tab.border#ede7e5
tab.hoverBackground#fdf7f3
tab.hoverForeground#302c2e
tab.inactiveBackground#fdf7f3
tab.inactiveForeground#a0938e
tab.inactiveModifiedBorder#cc7a0a54
tab.lastPinnedBorder#ede7e5
tab.unfocusedActiveBackground#fdf7f3
tab.unfocusedActiveBorder#fdf7f3
tab.unfocusedActiveForeground#302c2e
tab.unfocusedHoverBackground#f3ebe7
tab.unfocusedHoverForeground#302c2e
tab.unfocusedInactiveForeground#a0938e
terminal.foreground#302c2e
terminalStickyScrollHover.background#f3ebe7
textBlockQuote.background#fdf7f3
textBlockQuote.border#cc7a0a
textLink.activeForeground#c97700
textLink.foreground#cc7a0a
titleBar.activeBackground#fdf7f3
titleBar.activeForeground#7d7071
titleBar.border#ede7e5
titleBar.inactiveBackground#fdf7f3
titleBar.inactiveForeground#a0938e
toolbar.activeBackground#eee5de
toolbar.hoverBackground#f3ebe7
widget.border#ede7e5
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	#a59c9c	—
string	#b16803	—
constant.character, variable.language.makefile	#6851a2	—
constant.language, constant.numeric, constant.other	#6851a2	—
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	#2c232e	—
variable.language.this	#7d7071	italic
entity, entity.name.type, keyword.type, meta.function, support, variable.other.makefile	#2473b6	—
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	#218871	—
keyword, keyword.operator.expression, keyword.operator.new, keyword.operator.wordlike, storage.modifier, storage.type, storage.type.function, entity.name.function.decorator	#ce4770	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	#ce4770	—
keyword.operator.combinator, keyword.operator.type.annotation, meta.brace, punctuation, punctuation.definition.interpolation	#92898a	—
punctuation.separator, punctuation.terminator, meta.function.parameters.gdscript, meta.function.gdscript, keyword.control.@.makefile	#a59c9c	—
source.json meta.structure.dictionary.json support.type.property-name.json	#ce4770	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d4572b	—
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	#b16803	—
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	#218871	—
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	#2473b6	—
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	#6851a2	—
source.yaml meta.mapping.yaml entity.name.tag.yaml	#ce4770	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#d4572b	—
source.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml meta.map.value.yaml meta.mapping.yaml entity.name.tag.yaml	#b16803	—
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	#218871	—
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	#2473b6	—
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	#6851a2	—
markup.italic	—	italic
markup.bold	—	bold
markup.italic markup.bold	—	italic bold
markup.underline	—	underline
markup.link, markup.underline.link	#218871	underline
markup.fenced_code, markup.inline.raw	#6851a2	—

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