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 Light

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#cae6e9
activityBar.background#cae6e9
activityBar.border#70d5e0
activityBar.foreground#003747
activityBarBadge.background#5fb0d3
activityBarBadge.foreground#013646
badge.background#afe5eb
badge.foreground#013646
breadcrumb.background#bae6eb
breadcrumb.foreground#545e75
button.background#5fb0d3
button.foreground#bae6eb
button.hoverBackground#7cb4cc
debugExceptionWidget.background#afe5ebea
debugExceptionWidget.border#55cbd8
debugIcon.startForeground#00fff2
debugToolBar.background#afe5ebea
debugToolBar.border#55cbd8
descriptionForeground#014357
dropdown.background#afe5ebea
dropdown.border#55cbd8
dropdown.foreground#353535
dropdown.listBackground#afe5ebea
editor.background#bae6eb
editor.findMatchBackground#4ec2e64d
editor.findMatchBorder#00a8db7e
editor.findMatchHighlightBackground#4ec2e64d
editor.findMatchHighlightBorder#00a8db7e
editor.findRangeHighlightBackground#4ec2e64d
editor.foreground#014357
editor.hoverHighlightBackground#5acac41f
editor.lineHighlightBackground#5acac450
editor.lineHighlightBorder#5acac450
editor.rangeHighlightBackground#5acac450
editor.rangeHighlightBorder#5acac450
editor.selectionBackground#49acca4d
editor.selectionHighlightBackground#49acca4d
editor.selectionHighlightBorder#92d6eb
editor.wordHighlightBackground#4bb1cf4d
editor.wordHighlightBorder#92d6eb
editorBracketMatch.background#6fd4cc9c
editorBracketMatch.border#b6b6b69c
editorCodeLens.foreground#92d6eb
editorCursor.foreground#014357
editorError.foreground#b80000
editorGroup.border#afe5eb
editorGroupHeader.noTabsBackground#cae6e9
editorGroupHeader.tabsBackground#cae6e9
editorGroupHeader.tabsBorder#70d5e0
editorHint.foreground#0053c0
editorHoverWidget.background#afe5ebea
editorHoverWidget.border#55cbd8
editorIndentGuide.activeBackground#baf8f8
editorIndentGuide.background#a3e4e0
editorInfo.foreground#0053c0
editorLineNumber.activeForeground#85b8c0
editorLineNumber.foreground#8fc6ce
editorLink.activeForeground#27a0c5
editorOverviewRuler.border#014357
editorRuler.foreground#92d6eb
editorSuggestWidget.background#afe5ebea
editorSuggestWidget.border#afe5ebea
editorSuggestWidget.foreground#353535
editorSuggestWidget.highlightForeground#353535
editorSuggestWidget.selectedBackground#49acca4d
editorWarning.foreground#c46f00
editorWhitespace.foreground#5acac450
editorWidget.background#afe5ebea
editorWidget.border#55cbd8
errorForeground#b80000
extensionButton.prominentBackground#014b58b2
extensionButton.prominentForeground#86c3dd
extensionButton.prominentHoverBackground#72bddd
focusBorder#afe5eb
foreground#014357
gitDecoration.addedResourceForeground#008106
gitDecoration.conflictingResourceForeground#6d005b
gitDecoration.deletedResourceForeground#6d0000
gitDecoration.ignoredResourceForeground#3f3f3f
gitDecoration.modifiedResourceForeground#004781
gitDecoration.untrackedResourceForeground#252525
gitlens.gutterBackgroundColor#20252b
input.background#afe5ebea
input.border#55cbd8
input.foreground#353535
input.placeholderForeground#353535
inputOption.activeBorder#55cbd8
inputValidation.errorBackground#afe5ebea
inputValidation.errorBorder#b80000
inputValidation.infoBackground#afe5ebea
inputValidation.infoBorder#0053c0
inputValidation.warningBackground#afe5ebea
inputValidation.warningBorder#c46f00
list.activeSelectionBackground#b1f6ffcb
list.activeSelectionForeground#003747
list.dropBackground#cff5fa
list.errorForeground#b80000
list.focusBackground#c6f6fc
list.focusForeground#003747
list.highlightForeground#003747
list.hoverBackground#b1f6ffcb
list.hoverForeground#003747
list.inactiveFocusBackground#c6f6fc
list.inactiveSelectionBackground#c6f6fc
list.inactiveSelectionForeground#003747
list.invalidItemForeground#b80000
list.warningForeground#c46f00
menu.background#afe5ebea
menu.selectionBackground#49acca4d
menu.selectionForeground#007ca1
notificationCenter.border#55cbd8
notificationCenterHeader.background#afe5ebea
notificationCenterHeader.foreground#353535
notificationLink.foreground#27a0c5
notifications.background#afe5ebea
notifications.foreground#353535
notificationToast.border#55cbd8
panel.background#cae6e9
panel.border#70d5e0
panelInput.border#55cbd8
panelTitle.activeBorder#cae6e9
panelTitle.activeForeground#013646
panelTitle.inactiveForeground#014357
peekView.border#55cbd8
peekViewEditor.background#afe5ebea
peekViewEditor.matchHighlightBackground#5acac41f
peekViewEditorGutter.background#afe5ebea
peekViewResult.background#afe5ebea
peekViewResult.fileForeground#353535
peekViewResult.lineForeground#353535
peekViewResult.matchHighlightBackground#5acac41f
peekViewResult.selectionBackground#49acca4d
peekViewResult.selectionForeground#353535
peekViewTitle.background#afe5ebea
peekViewTitleDescription.foreground#014357
peekViewTitleLabel.foreground#007ca1
progressBar.background#27a0c5
scrollbar.shadow#07090a23
scrollbarSlider.activeBackground#589c9e46
scrollbarSlider.background#74c6c946
scrollbarSlider.hoverBackground#589c9e46
selection.background#49acca4d
sideBar.background#afe5eb
sideBar.border#70d5e0
sideBar.foreground#014357
sideBarSectionHeader.background#afe5eb
sideBarSectionHeader.border#afe5eb
sideBarSectionHeader.foreground#014357
sideBarTitle.foreground#012d3a
statusBar.background#afe5eb
statusBar.border#70d5e0
statusBar.debuggingBackground#5dabb1cc
statusBar.debuggingBorder#274a4dcc
statusBar.debuggingForeground#d3d3d3
statusBar.foreground#013646
statusBar.noFolderBackground#bae6eb
statusBar.noFolderBorder#afe5eb
statusBar.noFolderForeground#014357
statusBarItem.activeBackground#c4f5fa
statusBarItem.hoverBackground#c4f5fa
statusBarItem.prominentBackground#c4f5fa
tab.activeBackground#bae6eb
tab.activeBorder#bae6eb
tab.activeBorderTop#0f828f
tab.activeForeground#014357
tab.border#70d5e0
tab.hoverBackground#bae6ebb2
tab.inactiveBackground#cae6e9
tab.inactiveForeground#013646
tab.unfocusedActiveBorder#cae6e9
tab.unfocusedActiveForeground#013646
tab.unfocusedHoverBackground#cae6e9
tab.unfocusedInactiveForeground#013646
terminal.ansiBlack#0b0d0e
terminal.ansiBlue#5546db
terminal.ansiBrightBlack#1b1b1b
terminal.ansiBrightBlue#6092ff
terminal.ansiBrightCyan#23b5c5
terminal.ansiBrightGreen#60ff82
terminal.ansiBrightMagenta#b260ff
terminal.ansiBrightRed#ff6060
terminal.ansiBrightWhite#effdff
terminal.ansiBrightYellow#fff460
terminal.ansiCyan#60c5ff
terminal.ansiGreen#60ff82
terminal.ansiMagenta#b260ff
terminal.ansiRed#ff6060
terminal.ansiWhite#effdff
terminal.ansiYellow#fff460
terminal.background#cae6e9
terminal.foreground#00292e
textBlockQuote.background#bae6eb
textBlockQuote.border#55cbd8
textCodeBlock.background#bae6eb
textLink.activeForeground#27a0c5
textLink.foreground#27a0c5
textPreformat.foreground#353535
textSeparator.foreground#353535
titleBar.activeBackground#bae6eb
titleBar.activeForeground#014357
titleBar.border#bae6eb
titleBar.inactiveBackground#bae6eb
titleBar.inactiveForeground#014357
tree.indentGuidesStroke#737879
welcomePage.background#afe5eb
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	#a5a5a5cb	italic
variable, string constant.other.placeholder	#663bff	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#7e61ff	—
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	#4a95f8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#4400ff	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#2c6fff	—
meta.block variable.other	#0072cf	—
support.other.variable, string.other.link	#ec71f0	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#3371f8	—
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	#927fe9	—
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	#0043fc	—
support.type	#00a396	—
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	#4a95f8	—
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	#4769ff	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#7e61ff	italic
entity.other.attribute-name.class	#5b85df	—
source.sass keyword.control	#d494ff	—
string.regexp	#00947b	—
constant.character.escape	#acacac	—
url, link, uri	—	underline
entity.name.variable, variable	#0072cf	—
support.type.property-name, meta.object-literal.key	#0072cf	—
support.type.property-name.css	#5890e4	—
variable.language	#796fff	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}!`;
}