Gist Color Theme

Name: Gist Color Theme
Author: Gist

Publisher: GistThemes in package: 1

Editor & Syntax

GitHub

VS Code preview

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

Gist Color Theme — Gist Color Theme

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.activeBorder#444444
activityBar.background#0d0d0d
activityBar.border#1a1a1a
activityBar.foreground#aaaaaa
activityBar.inactiveForeground#333333
activityBarBadge.background#4d8cb6
activityBarBadge.foreground#eeeeee
breadcrumb.background#0d0d0d
breadcrumbPicker.background#0e0e0e
contrastBorder#1a1a1a
editor.background#090909
editor.findMatchBackground#00000000
editor.findMatchBorder#aaff00
editor.findMatchHighlightBackground#cc000055
editor.findMatchHighlightBorder#cc3300
editor.foldBackground#00000000
editor.foreground#eeffff
editor.inactiveSelectionBackground#3a3d4180
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#00000000
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#b34f16dd
editorBracketMatch.background#ffff0011
editorBracketMatch.border#ffff0066
editorGroup.border#1a1a1a
editorGroupHeader.noTabsBackground#0d0d0d
editorGroupHeader.tabsBackground#0d0d0d
editorGroupHeader.tabsBorder#1a1a1a
editorIndentGuide.activeBackground1#606060
editorRuler.foreground#090909
editorStickyScroll.background#1d1d1d
editorStickyScrollHover.background#282828
editorSuggestWidget.background#0d0d0df5
editorSuggestWidget.border#222222
editorSuggestWidget.selectedBackground#00a2ff33
focusBorder#00000000
input.background#00000000
input.border#222222
input.placeholderForeground#444444
list.activeSelectionBackground#26678d
list.activeSelectionForeground#ffffff
list.dropBackground#383b3d
list.focusBackground#26678d66
list.focusForeground#ffffff
list.hoverBackground#26678d33
list.hoverForeground#ffffff
list.inactiveSelectionBackground#252525
list.inactiveSelectionForeground#ffffff
menu.background#222222
menu.border#303030
menu.foreground#cccccc
menu.separatorBackground#303030
panel.background#0c0c0c
panel.border#1a1a1a
panelTitle.activeBorder#333333
panelTitle.activeForeground#bbbbbb
panelTitle.inactiveForeground#777777
quickInput.background#000000
scrollbar.shadow#0d0d0d
scrollbarSlider.activeBackground#77777799
scrollbarSlider.background#77777733
scrollbarSlider.hoverBackground#77777766
sideBar.background#0d0d0d
sideBar.border#1a1a1a
sideBar.foreground#aaaaaa
sideBarSectionHeader.background#171717
sideBarTitle.foreground#bbbbbb
statusBar.background#0d0d0d
statusBar.border#1a1a1a
statusBar.debuggingBackground#0d0d0d
statusBar.debuggingBorder#ff6600
statusBar.debuggingForeground#444444
statusBar.foreground#444444
statusBar.noFolderBackground#0d0d0d
statusBar.noFolderBorder#1a1a1a
statusBar.noFolderForeground#444444
statusBarItem.hoverBackground#222222
tab.activeBackground#252525
tab.activeForeground#eeeeee
tab.border#1a1a1a
tab.hoverBackground#1d1d1d
tab.inactiveBackground#0d0d0d
tab.inactiveForeground#888888
tab.unfocusedActiveBackground#151515
tab.unfocusedActiveBorder#1a1a1a
terminal.inactiveSelectionBackground#3a3d4180
titleBar.activeBackground#1d1d1d
titleBar.activeForeground#999999
titleBar.border#1d1d1d
titleBar.inactiveBackground#1d1d1d
titleBar.inactiveForeground#555555
window.activeBorder#151515
window.inactiveBorder#111111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#6A9955	—
constant.language	#569cd6	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#b5cea8	—
constant.regexp	#646695	—
entity.name.tag	#569cd6	—
entity.name.tag.css, entity.name.tag.less	#d7ba7d	—
entity.other.attribute-name	#9cdcfe	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#d7ba7d	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold	#569cd6	bold
markup.heading	#569cd6	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#b5cea8	—
markup.deleted	#ce9178	—
markup.changed	#569cd6	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796e6	—
markup.inline.raw	#ce9178	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor	#569cd6	—
meta.preprocessor.string	#ce9178	—
meta.preprocessor.numeric	#b5cea8	—
meta.structure.dictionary.key.python	#9cdcfe	—
meta.diff.header	#569cd6	—
storage	#569cd6	—
storage.type	#569cd6	—
storage.modifier, keyword.operator.noexcept	#569cd6	—
string, meta.embedded.assembly	#ce9178	—
string.tag	#ce9178	—
string.value	#ce9178	—
string.regexp	#d16969	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#569cd6	—
meta.template.expression	#d4d4d4	—
support.type.vendored.property-name, support.type.property-name, support.type.property-list, source.css variable, source.coffee.embedded	#9cdcfe	—
keyword	#569cd6	—
keyword.control	#569cd6	—
keyword.operator	#bbbbbb	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#569cd6	—
keyword.other.unit	#b5cea8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#569cd6	—
support.function.git-rebase	#9cdcfe	—
constant.sha.git-rebase	#b5cea8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#d4d4d4	—
variable.language	#569cd6	—
entity.name.label	#bbbbbb	—
keyword.operator, punctuation.accessor	#999999	—
punctuation, keyword.operator.type.annotation, keyword.operator.rest, keyword.operator.type, meta.brace, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.tag, entity.name.tag.reference	#777777	—
meta.property-list, meta.property-name	#89a9bb	—
punctuation.definition.block.tag.jsdoc, punctuation.definition.bracket.curly, punctuation.section.embedded	#555555	—
keyword.control	#c586c0	—
entity.other.attribute-name.tsx	#e9dab9	—
variable, support.variable	#b8e6ff	—
variable.other.constant	#70cdff	—
variable.parameter	#ffd000	—
entity.name.function, support.function	#e95d00	—
entity.name.type, support.type, support.class	#4ec9b0	—
comment, punctuation.definition.comment	#61705c	—
storage.type.class.jsdoc	#5584aa	—
variable.other.jsdoc	#6e93a7	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#ce9178	—
entity.name.tag.tsx	#6cb4f0	—

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