Color Wheel

Name: Color Wheel
Author: eScape Technology LLC

Publisher: eScape Technology LLCThemes in package: 2

Color Wheel Algorithmic Theme

Open in VS Code

Color themes

VS Code preview

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

Color Wheel — Wheel

fetchUser.ts

index.ts

README.md

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#091D14
activityBar.activeBorder#CEE7F3
activityBar.background#092418
activityBar.foreground#F3CEDE
activityBarBadge.background#092418
activityBarBadge.foreground#F3CEDE
badge.background#092418
badge.foreground#F3CEDE
breadcrumb.background#08160F
breadcrumb.foreground#F3CEDE
breadcrumbPicker.background#092418
button.background#092418
button.foreground#F3CEDE
button.hoverBackground#C65D8B80
charts.foreground#F3CEDE
checkbox.background#092418
checkbox.border#9CCCE1
checkbox.foreground#F3CEDE
debugConsole.errorForeground#F3CED4
debugConsole.infoForeground#CED4F3
debugConsole.warningForeground#F3E7CE
debugConsoleInputIcon.foreground#F3CEDE
debugExceptionWidget.background#092418
debugToolBar.background#092418
diffEditor.diagonalFill#9CCCE126
diffEditor.insertedTextBackground#7CD57C26
diffEditor.removedTextBackground#D57C8B26
dropdown.background#091D14
dropdown.foreground#F3D7E3
dropdown.listBackground#091D14
editor.background#092418
editor.foreground#F3CEDE
editor.lineHighlightBackground#7CB9D526
editor.lineHighlightBorder#7CB9D526
editor.selectionBackground#C65D8B
editor.selectionForeground#091D14
editorBracketMatch.background#7CB9D533
editorCodeLens.foreground#F3CEDE
editorCursor.background#092418
editorCursor.foreground#F3CEDE
editorError.background#E19CA826
editorError.foreground#F3CEDE
editorGroupHeader.tabsBackground#091D14
editorGutter.background#092418
editorHint.foreground#F3CEDE
editorHoverWidget.background#092418
editorIndentGuide.activeBackground#D5987C80
editorIndentGuide.background#D5987C33
editorInfo.background#9CA8E126
editorInfo.foreground#F3CEDE
editorLightBulb.foreground#F3CEDE
editorLightBulbAutoFix.foreground#F3CEDE
editorLineNumber.activeForeground#E19CBA
editorLineNumber.foreground#D5987C
editorLink.activeForeground#E19CBA
editorMarkerNavigation.background#092418
editorMarkerNavigationError.background#092418
editorMarkerNavigationInfo.background#092418
editorMarkerNavigationWarning.background#092418
editorOverviewRuler.background#092418
editorOverviewRuler.errorForeground#F3CED4
editorOverviewRuler.infoForeground#CED4F3
editorOverviewRuler.warningForeground#F3E7CE
editorPane.background#092418
editorRuler.foreground#F3CEDE
editorSuggestWidget.background#091D14
editorSuggestWidget.border#9CCCE1
editorSuggestWidget.foreground#E19CBA
editorSuggestWidget.highlightForeground#666666
editorSuggestWidget.selectedBackground#D57CA3
editorSuggestWidget.selectedForeground#000000
editorUnnecessaryCode.border#7CB9D526
editorUnnecessaryCode.opacity#000000b3
editorWarning.background#E1CA9C26
editorWarning.foreground#F3CEDE
editorWhitespace.foreground#D57CA359
editorWidget.background#081912
editorWidget.foreground#F3CEDE
errorForeground#F3CED4
extensionBadge.remoteBackground#081912
extensionBadge.remoteForeground#D57CA3
foreground#F3CEDE
icon.foreground#F3CEDE
input.background#092418
input.foreground#F3CEDE
inputOption.activeBackground#091D14
inputOption.activeBorder#CEE7F3
inputOption.activeForeground#E19CBA
inputValidation.errorForeground#F3CED4
inputValidation.infoForeground#CED4F3
inputValidation.warningForeground#F3E7CE
list.errorForeground#F3CED4
list.hoverBackground#C65D8B80
list.warningForeground#F3E7CE
listFilterWidget.background#092418
menu.background#091D14
menu.foreground#E19CBA
menu.selectionBackground#C65D8B
menu.selectionForeground#000000
menubar.selectionBackground#C65D8B
menubar.selectionForeground#091D14
merge.commonContentBackground#C6A35D26
merge.commonHeaderBackground#D5B77C26
merge.currentContentBackground#7C8BD526
merge.currentHeaderBackground#5D6FC626
merge.incomingContentBackground#7CD57C26
merge.incomingHeaderBackground#5DC65D26
minimap.background#092418
minimapGutter.addedBackground#7CD57C26
minimapGutter.deletedBackground#D57C8B26
minimapGutter.modifiedBackground#7C8BD526
minimapSlider.activeBackground#7CB9D573
minimapSlider.background#7CB9D533
minimapSlider.hoverBackground#5DA6C659
notebookScrollbarSlider.activeBackground#7CB9D573
notebookScrollbarSlider.background#7CB9D533
notebookScrollbarSlider.hoverBackground#5DA6C659
notebookStatusErrorIcon.foreground#F3CEDE
notebookStatusRunningIcon.foreground#F3CEDE
notebookStatusSuccessIcon.foreground#F3CEDE
notificationCenterHeader.background#092418
notificationCenterHeader.foreground#F3CEDE
notificationLink.foreground#F3CEDE
notifications.background#091D14
notifications.foreground#F3CEDE
notificationsErrorIcon.foreground#F3CED4
notificationsInfoIcon.foreground#CED4F3
notificationsWarningIcon.foreground#F3E7CE
panel.background#092418
panelSection.dropBackground#7CB9D540
panelSectionHeader.background#092418
panelSectionHeader.foreground#F3CEDE
panelTitle.activeBorder#CEE7F3
panelTitle.activeForeground#E19CBA
peekViewEditor.background#092418
peekViewEditorGutter.background#092418
peekViewResult.background#092418
peekViewResult.selectionBackground#C65D8B
peekViewResult.selectionForeground#091D14
peekViewTitle.background#092418
peekViewTitleDescription.foreground#F3CEDE
peekViewTitleLabel.foreground#F3CEDE
pickerGroup.foreground#F3CEDE
problemsErrorIcon.foreground#F3CEDE
problemsInfoIcon.foreground#F3CEDE
problemsWarningIcon.foreground#F3CEDE
progressBar.background#092418
quickInput.background#091D14
quickInput.foreground#F3CEDE
quickInputTitle.background#092418
sash.hoverBorder#7CB9D580
scrollbar.shadow#CEE7F380
scrollbarSlider.activeBackground#7CB9D573
scrollbarSlider.background#7CB9D533
scrollbarSlider.hoverBackground#5DA6C659
selection.background#7CB9D5bf
sideBar.background#091D14
sideBar.dropBackground#7CB9D540
sideBar.foreground#F3CEDE
sideBarSectionHeader.background#092418
sideBarSectionHeader.foreground#F3CEDE
sideBarTitle.foreground#F3CEDE
statusBar.background#091D14
statusBar.foreground#F3CEDE
statusBarItem.activeBackground#091D14
statusBarItem.errorForeground#F3CED4
statusBarItem.hoverBackground#C65D8B80
statusBarItem.remoteBackground#081912
statusBarItem.remoteForeground#D57CA3
tab.activeBackground#08160F
tab.activeBorder#CEE7F3
tab.activeForeground#E19CBA
tab.hoverBackground#C65D8B80
tab.inactiveBackground#081912
terminal.ansiBlack#404040
terminal.ansiBlue#0B0B6F
terminal.ansiBrightBlack#787878
terminal.ansiBrightBlue#6F6FDE
terminal.ansiBrightCyan#6FDEDE
terminal.ansiBrightGreen#6FDE6F
terminal.ansiBrightMagenta#DE6FDE
terminal.ansiBrightRed#DE6F6F
terminal.ansiBrightWhite#DEDEDE
terminal.ansiBrightYellow#DEDE6F
terminal.ansiCyan#0B6F6F
terminal.ansiGreen#0B6F0B
terminal.ansiMagenta#6F0B6F
terminal.ansiRed#6F0B0B
terminal.ansiWhite#B0B0B0
terminal.ansiYellow#6F6F0B
terminal.background#000000
terminal.foreground#EFEFEF
terminal.selectionBackground#C65D8B
terminalCursor.background#092418
terminalCursor.foreground#F3CEDE
textBlockQuote.background#092418
textCodeBlock.background#092418
textLink.activeForeground#E19CBA
textLink.foreground#F3CEDE
textPreformat.foreground#F3CEDE
textSeparator.foreground#F3CEDE
titleBar.activeBackground#091D14
titleBar.activeForeground#E19CBA
welcomePage.background#092418
welcomePage.progress.background#092418
welcomePage.progress.foreground#F3CEDE
widget.shadow#CEE7F380
window.activeBorder#CEE7F3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.block.documentation, comment.line, comment.line.double-slash, comment.single, punctuation.definition.comment, storage.type.class.jsdoc	#D57CA3bf	italic
constant.language, constant.language.boolean, constant.language.import-export-all, constant.language.null, constant.language.symbol	#F3DACE	bold
constant, constant.character, constant.character.escpae, constant.numeric, constant.numeric.complex, constant.numeric.float, constant.numeric.integer, constant.other, constant.other.placeholder	#E1B29C	bold
support.type.property-name, support.type.property-name.class	#7CB9D5	bold
string.interpolated, string.regexp, string.template	—	underline
string, string.literal, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.unquoted	#CEF3E3	—
meta.interpolation, meta.template, meta.template.expression	—	underline
variable.language, variable.language.super, variable.language.this, variable.other.object.property	#E1B29C	italic
variable, variable.annotation, variable.function, variable.member, variable.other.constant, variable.other.readwrite, variable.other.readwrite.alias, variable.parameter	#9CE1C3	—
storage, storage.modifier, storage.type, storage.type.function	#E1B29C	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.word	#F3DACE	—
keyword, keyword.control, keyword.control.conditional, keyword.control.export, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.other	#F3DACE	bold
punctuation.separator, punctuation.separator.array, punctuation.separator.continuation, punctuation.separator.dictionary, punctuation.terminator, punctuation.terminator.array, punctuation.terminator.dictionary	#D57CA3bf	bold
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end	#D57CA380	—
punctuation, punctuation.accessor, punctuation.definition, punctuation.definition.array, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.heading, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.quote, punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.typeparameters, punctuation.definition.variable, punctuation.section, punctuation.section.interpolation, punctuation.section.interpolation.begin, punctuation.section.interpolation.end	#D57CA3	bold
markup.bold, markup.heading	#D57CA3	bold
markup.italic, markup.quote	#D57CA3	italic
markup, markup.fenced_code, markup.underline, markup.underline.link	#D57CA3	—
entity.other.inherited-class	#C67E5D	underline
entity.other, entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id	#C67E5D	—
entity, entity.name, entity.name.class, entity.name.enum, entity.name.function, entity.name.function.constructor, entity.name.function.destructor, entity.name.impl, entity.name.interface, entity.name.section, entity.name.struct, entity.name.tag, entity.name.tag.reference, entity.name.tag.yaml, entity.name.trait, entity.name.type, entity.name.type.module, entity.name.union	#D5987C	—
invalid, invalid.deprecated, invalid.illegal	#E19CA8	bold

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