Snowflake Theme

Name: Snowflake Theme
Author: breberaf

Publisher: breberafThemes in package: 3

Modern color theme in the colors of winter.

GitHub

Color themes

VS Code preview

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

Snowflake Theme — Snowflake Contrast

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#86c3dd
activityBar.background#1e242e
activityBar.border#2a2f36
activityBar.foreground#91a6bbef
activityBarBadge.background#86c3dd
activityBarBadge.foreground#1e242e
badge.background#1e242e
badge.foreground#86c3dd
breadcrumb.background#171c24
breadcrumb.foreground#738699dd
button.background#86c3dd
button.foreground#1e242e
button.hoverBackground#7cb4cc
contrastBorder#30353d
debugExceptionWidget.background#151b22
debugExceptionWidget.border#192029
debugIcon.startForeground#00fff2
debugToolBar.background#1c252e
debugToolBar.border#192029
descriptionForeground#e4e4e4
dropdown.background#151b22
dropdown.border#192029
dropdown.foreground#bebebe
dropdown.listBackground#151b22
editor.background#1e242e
editor.findMatchBackground#017d8d
editor.findMatchBorder#c0e1e4
editor.findMatchHighlightBackground#017d8d
editor.findMatchHighlightBorder#017d8d
editor.findRangeHighlightBackground#017d8d
editor.foreground#e4e4e4
editor.hoverHighlightBackground#272b312a
editor.lineHighlightBackground#272b312a
editor.lineHighlightBorder#33333307
editor.rangeHighlightBackground#272b312a
editor.rangeHighlightBorder#272b312a
editor.selectionBackground#214a57a8
editor.selectionHighlightBackground#214a57a8
editor.selectionHighlightBorder#bebebe
editor.wordHighlightBackground#214a57a8
editor.wordHighlightBorder#bebebe
editorBracketMatch.background#017d8d
editorBracketMatch.border#bebebe
editorCodeLens.foreground#bebebe
editorCursor.foreground#738699dd
editorError.foreground#f18a8a
editorGroup.border#192029
editorGroupHeader.noTabsBackground#1e242e
editorGroupHeader.tabsBackground#1e242e
editorGroupHeader.tabsBorder#30353d
editorHint.foreground#5188ff
editorHoverWidget.background#151b22
editorHoverWidget.border#192029
editorIndentGuide.activeBackground#186a83
editorIndentGuide.background#273138
editorInfo.foreground#5188ff
editorLineNumber.activeForeground#738699dd
editorLineNumber.foreground#3c4b55
editorLink.activeForeground#27a0c5
editorOverviewRuler.border#738699dd
editorRuler.foreground#bebebe
editorSuggestWidget.background#151b22
editorSuggestWidget.border#151b22
editorSuggestWidget.foreground#bebebe
editorSuggestWidget.highlightForeground#bebebe
editorSuggestWidget.selectedBackground#214a57a8
editorWarning.foreground#f1c88a
editorWhitespace.foreground#272b312a
editorWidget.background#151b22
editorWidget.border#192029
errorForeground#f18a8a
extensionButton.prominentBackground#86c3dd
extensionButton.prominentForeground#1b2029
extensionButton.prominentHoverBackground#7cb4cc
focusBorder#1e242e
foreground#e4e4e4
gitDecoration.addedResourceForeground#7fdd83
gitDecoration.conflictingResourceForeground#ec6e6e
gitDecoration.deletedResourceForeground#d38680
gitDecoration.ignoredResourceForeground#3e4955dd
gitDecoration.modifiedResourceForeground#80d3d3
gitDecoration.untrackedResourceForeground#4f5c6bdd
gitlens.gutterBackgroundColor#20252b
input.background#151b22
input.border#192029
input.foreground#bebebe
input.placeholderForeground#bebebe
inputOption.activeBorder#192029
inputValidation.errorBackground#151b22
inputValidation.errorBorder#f18a8a
inputValidation.infoBackground#151b22
inputValidation.infoBorder#5188ff
inputValidation.warningBackground#151b22
inputValidation.warningBorder#f1c88a
list.activeSelectionBackground#212d38
list.activeSelectionForeground#c0e1e4
list.dropBackground#171c24
list.errorForeground#f18a8a
list.focusBackground#212d38
list.focusForeground#c0e1e4
list.highlightForeground#c0e1e4
list.hoverBackground#212d38
list.hoverForeground#c0e1e4
list.inactiveFocusBackground#212d38
list.inactiveSelectionBackground#212d38
list.inactiveSelectionForeground#c0e1e4
list.invalidItemForeground#f18a8a
list.warningForeground#f1c88a
menu.background#151b22
menu.selectionBackground#214a57a8
menu.selectionForeground#c0e1e4
notificationCenter.border#192029
notificationCenterHeader.background#151b22
notificationCenterHeader.foreground#bebebe
notificationLink.foreground#27a0c5
notifications.background#151b22
notifications.foreground#bebebe
notificationToast.border#192029
panel.background#171c24
panel.border#30353d
panelInput.border#192029
panelTitle.activeBorder#171c24
panelTitle.activeForeground#bebebe
panelTitle.inactiveForeground#738699dd
peekView.border#192029
peekViewEditor.background#151b22
peekViewEditor.matchHighlightBackground#017d8d
peekViewEditorGutter.background#151b22
peekViewResult.background#151b22
peekViewResult.fileForeground#bebebe
peekViewResult.lineForeground#bebebe
peekViewResult.matchHighlightBackground#017d8d
peekViewResult.selectionBackground#214a57a8
peekViewResult.selectionForeground#bebebe
peekViewTitle.background#151b22
peekViewTitleDescription.foreground#e4e4e4
peekViewTitleLabel.foreground#c0e1e4
progressBar.background#27a0c5
scrollbar.shadow#07090a23
scrollbarSlider.activeBackground#a8a8a817
scrollbarSlider.background#ffffff0a
scrollbarSlider.hoverBackground#a8a8a817
selection.background#214a57a8
sideBar.background#171c24
sideBar.border#30353d
sideBar.foreground#738699dd
sideBarSectionHeader.background#1e242e
sideBarSectionHeader.foreground#738699dd
sideBarTitle.foreground#c0e1e4
statusBar.background#1e242e
statusBar.border#30353d
statusBar.debuggingBackground#5dabb1cc
statusBar.debuggingBorder#274a4dcc
statusBar.debuggingForeground#d3d3d3
statusBar.foreground#738699dd
statusBar.noFolderBackground#1e242e
statusBar.noFolderBorder#30353d
statusBar.noFolderForeground#738699dd
statusBarItem.activeBackground#1e242e
statusBarItem.hoverBackground#3037426e
statusBarItem.prominentBackground#232a36
tab.activeBackground#171c24
tab.activeBorder#171c24
tab.activeBorderTop#86c3dd
tab.activeForeground#bebebe
tab.border#30353d
tab.hoverBackground#171c24
tab.inactiveBackground#1e242e
tab.inactiveForeground#738699dd
tab.unfocusedActiveBorder#1e242e
tab.unfocusedActiveForeground#bebebe
tab.unfocusedHoverBackground#1e242e
tab.unfocusedInactiveForeground#738699dd
terminal.ansiBlack#1d232c
terminal.ansiBlue#89a5e2
terminal.ansiBrightBlack#6d6d6d
terminal.ansiBrightBlue#319cbd
terminal.ansiBrightCyan#80b1d3
terminal.ansiBrightGreen#a5e289
terminal.ansiBrightMagenta#cd89e2
terminal.ansiBrightRed#fa6363
terminal.ansiBrightWhite#a4f3fa
terminal.ansiBrightYellow#dcb560
terminal.ansiCyan#80d3d3
terminal.ansiGreen#89e290
terminal.ansiMagenta#af89e2
terminal.ansiRed#e28989
terminal.ansiWhite#89dbe2
terminal.ansiYellow#e2e089
terminal.background#171c24
terminal.foreground#b3e0e4
textBlockQuote.background#1e242e
textBlockQuote.border#192029
textCodeBlock.background#1e242e
textLink.activeForeground#27a0c5
textLink.foreground#27a0c5
textPreformat.foreground#bebebe
textSeparator.foreground#bebebe
titleBar.activeBackground#1e242e
titleBar.activeForeground#738699dd
titleBar.border#30353d
titleBar.inactiveBackground#1e242e
titleBar.inactiveForeground#738699dd
tree.indentGuidesStroke#737879
welcomePage.background#1b2029
welcomePage.buttonBackground#1c212b
welcomePage.buttonHoverBackground#1d222c
widget.shadow#0d1014b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#46464bcb	italic
variable, string constant.other.placeholder	#6af7fc	—
constant.other.color	#aaaaaa	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#b8a4ff	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#afe8ff	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#42f1f7	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#88aeff	—
meta.block variable.other	#6af7fc	—
support.other.variable, string.other.link	#ec71f0	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#88aeff	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#21c4e0fa	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#21c4e0fa	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#93acff	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#7e61ff	italic
entity.other.attribute-name.class	#82AAFF	—
source.sass keyword.control	#d494ff	—
markup.inserted	#C3E88D	—
string.regexp	#89ffeb	—
constant.character.escape	#acacac	—
url, link, uri	—	underline
entity.name.variable, variable	#5fdce0	—
support.type.property-name, meta.object-literal.key	#5fdce0	—
support.type.property-name.css	#cccccc	—
variable.language	#a09afae6	italic
variable.parameter	—	italic

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