Verglas

Name: Verglas
Author: zorlix

Publisher: zorlixThemes in package: 1

A dark theme focusing on muted blue colours.

GitHub

VS Code preview

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

Verglas — Verglas

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.background#161922
activityBar.foreground#aec2e0
activityBar.inactiveForeground#8490bb
breadcrumb.activeSelectionForeground#6bd8ff
breadcrumb.focusForeground#dff1fa
breadcrumb.foreground#aec2e0
button.background#4066be
descriptionForeground#6bd8ff
diffEditor.border#ff0000
diffEditor.diagonalFill#ff0000
diffEditor.insertedTextBackground#0efc692d
diffEditor.insertedTextBorder#12151c
diffEditor.removedTextBackground#ff470f67
diffEditor.removedTextBorder#12151c
dropdown.background#393f57
editor.background#12151c
editor.findMatchBackground#4afaf14d
editor.findMatchHighlightBackground#5286b19d
editor.foreground#aec2e0
editor.lineHighlightBackground#1b232c
editor.selectionBackground#3a576e
editor.selectionHighlightBackground#3e66868c
editor.wordHighlightBackground#3a576e
editor.wordHighlightStrongBackground#3a576e
editorCodeLens.foreground#8490bb
editorCursor.foreground#dfebf0
editorGroup.border#8490bb
editorGroup.emptyBackground#292d3e
editorGroup.focusedEmptyBorder#292d3e
editorGroupHeader.border#292d3e
editorGroupHeader.noTabsBackground#292d3e
editorGroupHeader.tabsBackground#292d3e
editorGroupHeader.tabsBorder#292d3e
editorGutter.addedBackground#59ff5996
editorGutter.deletedBackground#ff0000
editorLineNumber.activeForeground#3a576ea1
editorLineNumber.foreground#3a576ea1
editorLink.activeForeground#00aaff
editorWhitespace.foreground#222e3b
editorWidget.background#212432
editorWidget.border#4066bec7
editorWidget.foreground#8490bb
focusBorder#4c99f0
foreground#dff1fa
gitDecoration.addedResourceForeground#59ff59d3
gitDecoration.deletedResourceForeground#ff000093
gitDecoration.ignoredResourceForeground#8490bb88
gitDecoration.modifiedResourceForeground#6bd8ff
gitDecoration.untrackedResourceForeground#80ff59
gitlens.gutterBackgroundColor#ff0000
gitlens.gutterForegroundColor#ff0000
gitlens.gutterUncommittedForegroundColor#ff0000
gitlens.lineHighlightBackgroundColor#ff0000
gitlens.lineHighlightOverviewRulerColor#ff0000
gitlens.trailingLineForegroundColor#8490bb
icon.foreground#8490bb
input.background#393f57
input.border#4066bec7
input.foreground#dff1fa
input.placeholderForeground#525c7c
inputOption.activeBorder#00bbd4
list.activeSelectionBackground#3c425c
list.activeSelectionForeground#dff1fa
list.hoverBackground#2f3449
list.hoverForeground#dff1fa
list.inactiveSelectionBackground#3c425c
list.inactiveSelectionForeground#dff1fa
minimap.background#12151c
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#f700c1
minimap.selectionHighlight#c4dcf7
minimap.warningHighlight#ff9100
minimapSlider.activeBackground#6172b856
minimapSlider.background#6172b833
minimapSlider.hoverBackground#6172b84d
notificationCenterHeader.foreground#dff1fa
panel.border#00bbd4
panelSection.dropBackground#8490bb17
panelSectionHeader.background#292d3e
panelTitle.activeForeground#dff1fa
panelTitle.inactiveForeground#8490bb
peekView.border#00aaff
peekViewEditor.background#ff0000
peekViewResult.matchHighlightBackground#ff0000
peekViewTitle.background#292d3e
peekViewTitleDescription.foreground#aec2e0
peekViewTitleLabel.foreground#dff1fa
scrollbarSlider.activeBackground#6172b8a9
scrollbarSlider.background#6172b86e
scrollbarSlider.hoverBackground#6172b89a
sideBar.background#212432
sideBar.foreground#8490bb
sideBarSectionHeader.background#393f57
sideBarSectionHeader.foreground#dff1fa
sideBarTitle.foreground#dff1fa
statusBar.background#007acc
tab.activeBackground#292d3e
tab.activeForeground#dff1fa
tab.hoverBorder#dff1fa
tab.hoverForeground#dff1fa
tab.inactiveBackground#292d3e
tab.inactiveForeground#8490bb
terminal.foreground#dff1fa
titleBar.activeBackground#212432
titleBar.activeForeground#dff1fa
titleBar.inactiveBackground#212432
titleBar.inactiveForeground#aec2e0
window.activeBorder#12151c30
window.inactiveBorder#12151c30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, variable.other.local, variable.other.global	#aec2e0
string, punctuation.definition.string	#6ee2ff	—
constant.character.escape	#11cfff	bold
constant.numeric	#6ee2ff	—
punctuation	#aec2e0
constant.language	#ec43e4	—
keyword.control	#5cb0f2	—
keyword.other.operator.overload	#6bd8ff	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison	#5cb0f2
keyword.operator.new, keyword.operator.delete	#f700c1	—
storage	#6bd8ff
entity.name.type	#00fcf2	italic
storage.type, entity.name.type.template, entity.name.type.parameter	#00aaff	italic
storage.modifier.async	#00aaff	italic
support.type	#00fcf2	italic
support.class	#00fcf2	italic
storage.modifier.reference, storage.modifier.pointer	#921176	italic
meta.item-access.arguments, meta.bracket.square.access	#aec2e0	—
entity.name.function.definition	#84eeee	italic
entity.name.function.call, meta.function-call.generic, meta.function-call	#dff1fa	italic
variable.parameter	#7f6ade	—
meta.function-call.arguments	#aec2e0
support.function	#267fb5
storage.type.template.argument.typename, storage.type.template.argument.class	#7f6ade	italic
meta.embedded.line, meta.embedded.line variable.other.readwrite	#dfebf0	bold
entity.name.type.class	#0efff3	—
entity.name.type.struct	#0efff3	—
entity.name.namespace	#0efff3	—
entity.name.function.definition.special.constructor	#16a129	bold
entity.name.function.definition.special.member.destructor	#9b0e0e	bold
storage.type.modifier.access.control	#6bd8ff	—
variable.other.object.property, variable.other.property	#aec2e0
keyword.operator.logical	#516de0	—
entity.name.operator	#FF0000	bold
comment, punctuation.definition.comment	#324357	—
keyword.operator.bitwise.shift	#6bd8ff	—
entity.name.scope-resolution, punctuation.separator.scope-resolution, punctuation.separator.namespace.access	#0efff3	italic
keyword.generator.asterisk	#ffffff	—
keyword.control.directive, punctuation.definition.directive	#5CB0F2	—
keyword.other.unit.suffix	#ec43e4	—
entity.name.function.python, meta.definition.function entity.name.function.js	#84eeee	italic
variable.parameter.c, variable.parameter.cpp, variable.parameter.java	#aec2e0
source.json, support.type.property-name.json, string.json	#aec2e0
source.json, string.quoted.double.json, string.quoted.single.json	#6ee2ff

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