Glitch

Name: Glitch
Author: Gers2017

Publisher: Gers2017Themes in package: 1

Glitch color theme for vscode

Open in VS Code GitHub

VS Code preview

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

Glitch — Glitch

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#151A23
activityBar.background#151A23
activityBar.foreground#52DABF
activityBar.inactiveForeground#495565
activityBarBadge.background#52DABF
activityBarBadge.foreground#151A23
badge.background#F65384
badge.foreground#151A23
breadcrumb.activeSelectionForeground#9FAECA
breadcrumb.background#151A23
breadcrumb.focusForeground#9FAECA
breadcrumb.foreground#49556571
button.background#32B69B
button.foreground#151A23
button.hoverBackground#32B69B
button.secondaryBackground#212834
button.secondaryForeground#9FAECA
button.secondaryHoverBackground#495565
checkbox.background#151A23
checkbox.border#151A23
checkbox.foreground#9FAECA
debugExceptionWidget.background#151A23
debugExceptionWidget.border#495565
debugToolBar.background#151A23
debugToolBar.border#495565
diffEditor.border#495565
diffEditor.insertedTextBackground#00ab9a41
diffEditor.removedTextBackground#d6457046
dropdown.background#151A23
dropdown.border#151A23
dropdown.foreground#9FAECA
editor.background#151A23
editor.findMatchBackground#00ab9a41
editor.findMatchBorder#151A23
editor.findMatchHighlightBackground#00ab9a41
editor.findMatchHighlightBorder#21283479
editor.findRangeHighlightBackground#21283479
editor.findRangeHighlightBorder#21283479
editor.foldBackground#21283479
editor.foreground#9FAECA
editor.hoverHighlightBackground#21283479
editor.inactiveSelectionBackground#21283479
editor.lineHighlightBackground#21283479
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#21283479
editor.rangeHighlightBorder#21283479
editor.selectionBackground#00ab9a41
editor.selectionHighlightBackground#21283479
editor.selectionHighlightBorder#0d715f93
editor.wordHighlightBackground#21283479
editor.wordHighlightStrongBackground#00ab9a41
editorBracketMatch.background#21283479
editorBracketMatch.border#495565
editorCodeLens.foreground#9FAECA
editorCursor.background#9FAECA
editorCursor.foreground#9FAECA
editorError.background#B73A3400
editorError.border#21283479
editorError.foreground#F65384
editorGroup.border#495565
editorGroup.emptyBackground#151A23
editorGroupHeader.tabsBackground#151A23
editorGutter.addedBackground#E8A872
editorGutter.background#151A23
editorGutter.commentRangeForeground#9FAECA
editorGutter.deletedBackground#F65384
editorGutter.foldingControlForeground#9FAECA
editorGutter.modifiedBackground#52DABF
editorHoverWidget.background#151A23
editorHoverWidget.border#52DABF
editorHoverWidget.foreground#9FAECA
editorIndentGuide.activeBackground#21283479
editorIndentGuide.background#21283479
editorInfo.background#21283479
editorInfo.border#21283479
editorInfo.foreground#3DA5FB
editorInlayHint.background#212834
editorInlayHint.foreground#9FAECA
editorLineNumber.activeForeground#9FAECA
editorLineNumber.foreground#495565
editorLink.activeForeground#52DABF
editorMarkerNavigation.background#151A23
editorMarkerNavigationError.background#db5796
editorMarkerNavigationInfo.background#52DABF
editorMarkerNavigationWarning.background#E8A872
editorOverviewRuler.background#21283479
editorOverviewRuler.border#49556571
editorRuler.foreground#21283479
editorSuggestWidget.background#151A23
editorSuggestWidget.border#151A23
editorSuggestWidget.foreground#9FAECA
editorSuggestWidget.highlightForeground#52DABF
editorSuggestWidget.selectedBackground#00ab9a41
editorSuggestWidget.selectedForeground#9FAECA
editorWarning.background#21283479
editorWarning.border#21283479
editorWarning.foreground#E8A872
editorWhitespace.foreground#495565
editorWidget.background#151A23
editorWidget.foreground#9FAECA
editorWidget.resizeBorder#495565
focusBorder#52DABF
foreground#9FAECA
gitDecoration.addedResourceForeground#52DABF
gitDecoration.conflictingResourceForeground#A96AE8
gitDecoration.deletedResourceForeground#D53565
gitDecoration.ignoredResourceForeground#495565
gitDecoration.modifiedResourceForeground#E8A872
gitDecoration.stageDeletedResourceForeground#D53565
gitDecoration.stageModifiedResourceForeground#E8A872
gitDecoration.submoduleResourceForeground#94D0F1
gitDecoration.untrackedResourceForeground#32B69B
icon.foreground#9FAECA
input.background#151A23
input.border#0d715f93
input.foreground#9FAECA
input.placeholderForeground#9FAECA
inputOption.activeBackground#0d715f93
inputOption.activeBorder#0d715f93
inputOption.activeForeground#9FAECA
list.activeSelectionBackground#4db6ac78
list.activeSelectionForeground#9FAECA
list.dropBackground#212834
list.focusBackground#234f4b
list.focusForeground#9FAECA
list.highlightForeground#52DABF
list.hoverBackground#212834
list.hoverForeground#9FAECA
list.inactiveSelectionBackground#212834
list.inactiveSelectionForeground#9FAECA
listFilterWidget.background#D53565
listFilterWidget.noMatchesOutline#F65384
listFilterWidget.outline#151A23
menu.background#151A23
menu.border#151A23
menu.foreground#9FAECA
menu.selectionBackground#0d715f93
menu.selectionBorder#0d715f93
menu.selectionForeground#9FAECA
menu.separatorBackground#9FAECA
menubar.selectionBackground#49556571
menubar.selectionForeground#9FAECA
merge.commonContentBackground#495565
merge.commonHeaderBackground#495565
merge.currentContentBackground#0d715f93
merge.currentHeaderBackground#32B69B
merge.incomingContentBackground#d6457046
merge.incomingHeaderBackground#D53565
minimap.background#151A23
minimap.errorHighlight#F65384
minimap.findMatchHighlight#00ab9a41
minimap.selectionHighlight#00ab9a41
minimap.warningHighlight#E8A872
minimapGutter.addedBackground#E8A872
minimapGutter.deletedBackground#F65384
minimapGutter.modifiedBackground#52DABF
notificationCenter.border#495565
notificationCenterHeader.background#151A23
notificationCenterHeader.foreground#9FAECA
notifications.background#151A23
notifications.border#151A23
notifications.foreground#9FAECA
notificationsErrorIcon.foreground#D53565
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#E8A872
notificationToast.border#495565
panel.background#151A23
panel.border#49556571
panelSection.border#49556571
panelTitle.activeBorder#0d715f93
panelTitle.activeForeground#9FAECA
panelTitle.inactiveForeground#495565
peekView.border#52DABF
peekViewEditor.background#151A23
peekViewEditor.matchHighlightBackground#d6457046
peekViewEditor.matchHighlightBorder#F65384
peekViewEditorGutter.background#151A23
peekViewResult.background#151A23
peekViewResult.fileForeground#9FAECA
peekViewResult.lineForeground#9FAECA
peekViewResult.matchHighlightBackground#d6457046
peekViewResult.selectionBackground#00ab9a41
peekViewResult.selectionForeground#9FAECA
peekViewTitle.background#151A23
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#9FAECA
pickerGroup.border#151A23
pickerGroup.foreground#52DABF
progressBar.background#52DABF
scrollbar.shadow#151A23
scrollbarSlider.activeBackground#49556571
scrollbarSlider.background#49556571
scrollbarSlider.hoverBackground#49556571
selection.background#00ab9a41
settings.focusedRowBackground#21283479
settings.headerForeground#9FAECA
sideBar.background#151A23
sideBar.border#151A23
sideBar.dropBackground#212834
sideBar.foreground#9FAECA
sideBarSectionHeader.background#151A23
sideBarSectionHeader.border#495565
sideBarSectionHeader.foreground#9FAECA
sideBarTitle.foreground#9FAECA
statusBar.background#151A23
statusBar.debuggingBackground#D53565
statusBar.debuggingForeground#212834
statusBar.foreground#32B69B
statusBar.noFolderBackground#E8A872
statusBar.noFolderForeground#212834
statusBarItem.activeBackground#49556571
statusBarItem.hoverBackground#212834
statusBarItem.remoteBackground#3DA5FB
statusBarItem.remoteForeground#151A23
tab.activeBackground#212834
tab.activeBorder#0d715f93
tab.activeBorderTop#151A23
tab.activeForeground#9FAECA
tab.border#151A23
tab.inactiveBackground#151A23
tab.inactiveForeground#9FAECA
terminal.ansiBlack#151A23
terminal.ansiBlue#3DA5FB
terminal.ansiBrightBlack#9FAECA
terminal.ansiBrightBlue#3DA5FB
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#52DABF
terminal.ansiBrightMagenta#A96AE8
terminal.ansiBrightRed#F65384
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#AED57D
terminal.ansiCyan#3DA5FB
terminal.ansiGreen#52DABF
terminal.ansiMagenta#A96AE8
terminal.ansiRed#b83360
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#E8A872
terminal.border#0d715f93
terminal.foreground#9FAECA
terminal.selectionBackground#ffffff40
terminalCursor.background#00ab9a41
terminalCursor.foreground#9FAECA
textLink.foreground#52DABF
titleBar.activeBackground#151A23
titleBar.activeForeground#9FAECA
titleBar.border#0d715f93
titleBar.inactiveBackground#151A23
titleBar.inactiveForeground#495565
tree.indentGuidesStroke#212834
walkThrough.embeddedEditorBackground#21283479
widget.shadow#21283479

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
storage.modifier.package, storage.modifier.import, variable.parameter, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.cs, variable.other.object.cs, variable.other.object.property.cs, punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array, punctuation.section.method, punctuation.section.class, punctuation.section.inner-class, meta.class.body, meta.method-call, meta.method, meta.separator, meta.tag, none, source.css property-name.support, source.css property-value.support, source.java-properties meta.key-pair > punctuation, customrule, support.type.property-name, source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters, source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block, source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma, meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx, source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor, punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx, punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx , meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx, meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable, meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded, source.python constant.other, punctuation.separator.annotation.python, punctuation.separator.parameters.python, markup.raw.block.markdown, support.constant.property-value.css, meta.property-list.scss punctuation.separator.key-value.scss, markup.heading.setext, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, meta.class.php, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx, meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.js variable.other.readwrite.js	#A9B4C6	—
comment, comment markup.link, punctuation.definition.comment, markup.quote.markdown	#495565	—
variable, string.other.link, entity.name.tag, entity.name.namespace, meta.definition.variable, markup.deleted, markup.heading, source.java-properties meta.key-pair, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string, support.type.property-name.json, support.type.property-name.json punctuation, support.variable.dom.js, support.variable.dom.ts, support.variable.property.dom.js, support.variable.property.dom.ts, support.variable.property.js, support.variable.property.ts, support.variable.property.tsx, keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx, variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx, keyword.other.unsafe.rust, source.js support.variable, source.ts support.variable, source.tsx support.variable, constant.language.import-export-all.js, constant.language.import-export-all.ts, support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx, support.variable.magic.python, entity.name.variable.field.cs, punctuation.definition.variable.shell, punctuation.separator.key-value.scss, entity.name.section.markdown, punctuation.definition.heading.markdown, beginning.punctuation.definition.list.markdown, punctuation.separator.variable.ruby, punctuation.definition.variable.php, meta.template.expression.ts	#F65384	—
keyword, keyword.operator, keyword.control, storage, storage.type.annotation, storage.type.primitive, punctuation.definition.italic, meta.selector, markup.changed, markup.italic, markup.link, source.c keyword.operator, source.cpp keyword.operator, source.cs keyword.operator, source.go storage.type.string, source.java keyword.operator.instanceof, source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void, source.python keyword.operator.logical.python, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx, keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx, keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx, source.ini keyword.other.definition.ini, source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator, source.cs keyword.operator, source.js keyword.operator, source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator, source.ts keyword.operator, source.tsx keyword.operator, punctuation.definition.metadata.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown	#A96AE8	—
constant.character.escape, constant.other.color, constant.other.symbol, string.regexp, support.type, support.function, source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json, punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx, constant.language.import-export-all.jsx, constant.language.import-export-all.tsx, constant.language.json, storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx, entity.name.type, string.regexp source.ruby.embedded, punctuation.definition.bold, support.class, entity.name.class, entity.name.type.class, meta.class, source.java storage.modifier.import, source.java storage.type, meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable, storage.type.cs, storage.type.primitive.array.java	#52DABF	—
keyword.other.special-method, punctuation.definition.heading, punctuation.definition.identity, support.function.any-method, entity.name.function, entity.name.section, entity.other.attribute-name.id, meta.require, markup.heading punctuation.definition.heading, source.gfm link entity, entity.name.variable.property.cs, string.other.link.title.markdown, string.other.link.description.markdown, keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx, meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type, variable.other.property.js, variable.other.property.ts	#3DA5FB	—
constant.variable, keyword.other.unit, constant, constant.numeric, entity.other.attribute-name, meta.link, markup.bold, markup.quote, source.python variable.parameter, support.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx, source.python constant, constant.character.format.placeholder.other.python storage, meta.function.parameters.python, punctuation.definition.constant.css, punctuation.definition.constant.scss, punctuation.definition.bold.markdown, variable.other.constant.ruby, variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx	#E8A872	—
string, entity.other.inherited-class, markup.inserted, markup.raw, source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation, string.quoted.double punctuation, source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor, entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx, meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition, meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template, markup.inline.raw.markdown, keyword.operator.other.ruby	#AED57D	—

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