Freya Theme

Name: Freya Theme
Author: bivrost

Publisher: bivrostThemes in package: 2

A blue calm theme, made for fun and with love.

GitHub

Color themes

VS Code preview

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

Freya Theme — Freya Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#048e94
activityBar.background#00abb4
activityBar.border#308282
activityBar.foreground#d0fffb
activityBar.inactiveForeground#004b4b66
activityBarBadge.background#357580
activityBarBadge.foreground#d0fffb
badge.background#00abb4
badge.foreground#ecfeff
breadcrumb.activeSelectionForeground#357580
breadcrumb.background#f9ffff
breadcrumb.focusForeground#357580
breadcrumb.foreground#00baba
button.background#357580
button.foreground#c5fffa
button.hoverBackground#285b64
button.secondaryBackground#c5fffa
button.secondaryForeground#285b64
button.secondaryHoverBackground#285b64
checkbox.background#ffffff
checkbox.border#00000000
checkbox.foreground#003b49
debugExceptionWidget.background#357580
debugExceptionWidget.border#3b6971
debugToolBar.background#f3fffe
debugToolBar.border#3b6971
diffEditor.border#357580
diffEditor.insertedTextBackground#e5fbff
diffEditor.removedTextBackground#ffc9e733
dropdown.background#ffffff
dropdown.border#00000000
dropdown.foreground#003b49
editor.background#f1f8f8
editor.findMatchBackground#eaeaea
editor.findMatchBorder#f5fffe
editor.findMatchHighlightBackground#eaeaea
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#ecf5f4
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#add6ff4d
editor.foreground#000c11
editor.hoverHighlightBackground#7f9ebc26
editor.inactiveSelectionBackground#dde1e6
editor.lineHighlightBackground#ffffff0A
editor.lineHighlightBorder#eeeeee
editor.rangeHighlightBackground#d0e0de
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#d0d4da
editor.selectionHighlightBackground#add6ff80
editor.selectionHighlightBorder#495F77
editor.wordHighlightBackground#57575740
editor.wordHighlightStrongBackground#f5fffe46
editorBracketMatch.background#0064001a
editorBracketMatch.border#b9b9b9
editorCodeLens.foreground#1a4f58
editorCursor.background#f5fffe
editorCursor.foreground#357580
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#ff0083
editorGroup.border#1a4f58
editorGroup.emptyBackground#f5fffe
editorGroupHeader.border#00baba
editorGroupHeader.tabsBackground#f9ffff
editorGroupHeader.tabsBorder#ffffff
editorGutter.addedBackground#5bf076
editorGutter.background#eef1f1
editorGutter.commentRangeForeground#1a4f58
editorGutter.deletedBackground#ff0083
editorGutter.foldingControlForeground#1a4f58
editorGutter.modifiedBackground#29cdff
editorHoverWidget.background#ffffff
editorHoverWidget.border#c8c8c8
editorHoverWidget.foreground#357580
editorIndentGuide.activeBackground#939393
editorIndentGuide.background#d3d3d3
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#36c7ff
editorLineNumber.activeForeground#00665c
editorLineNumber.foreground#00abb4
editorLink.activeForeground#1a4f58
editorMarkerNavigation.background#ffffff
editorMarkerNavigationError.background#e51400
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#e9a700
editorOverviewRuler.background#e9fdfc
editorOverviewRuler.border#00abb4
editorRuler.foreground#d3d3d3
editorSuggestWidget.background#f7f7f7
editorSuggestWidget.border#357580
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#357580
editorSuggestWidget.selectedBackground#e9fdfc
editorSuggestWidget.selectedForeground#00abb4
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#ffb700
editorWhitespace.foreground#33333333
editorWidget.background#f3f3f3
editorWidget.foreground#357580
editorWidget.resizeBorder#357580
focusBorder#b7e2ff
foreground#bababa
gitDecoration.addedResourceForeground#006f3b
gitDecoration.conflictingResourceForeground#0081b4
gitDecoration.deletedResourceForeground#8c002e
gitDecoration.ignoredResourceForeground#97b2af
gitDecoration.modifiedResourceForeground#895503
gitDecoration.stageDeletedResourceForeground#de0049
gitDecoration.stageModifiedResourceForeground#a56500
gitDecoration.submoduleResourceForeground#008bc2
gitDecoration.untrackedResourceForeground#009d55
icon.foreground#bababa
input.background#ffffff
input.border#00000000
input.foreground#003b49
input.placeholderForeground#58c3c9
inputOption.activeBackground#0090f133
inputOption.activeBorder#007acc00
inputOption.activeForeground#003b49
list.activeSelectionBackground#006a71
list.activeSelectionForeground#ffffff
list.dropBackground#cde8ea
list.focusBackground#00abb4
list.focusForeground#ffffff
list.highlightForeground#004145
list.hoverBackground#00abb4
list.hoverForeground#d0fffb
list.inactiveSelectionBackground#a3dde0
list.inactiveSelectionForeground#004145
listFilterWidget.background#b7edf0
listFilterWidget.noMatchesOutline#ff0054
listFilterWidget.outline#00000000
menu.background#f8fffe
menu.border#00000085
menu.foreground#357580
menu.selectionBackground#357580
menu.selectionBorder#00000000
menu.selectionForeground#c5fffa
menu.separatorBackground#c5fffa
menubar.selectionBackground#357580
menubar.selectionBorder#357580
menubar.selectionForeground#c5fffa
merge.commonContentBackground#E5E5E5
merge.commonHeaderBackground#BFBFBF
merge.currentContentBackground#DBF4EF
merge.currentHeaderBackground#A4E3D6
merge.incomingContentBackground#DBECFF
merge.incomingHeaderBackground#A6CFFF
minimap.background#e2f1f1
minimap.errorHighlight#c40000
minimap.findMatchHighlight#0026ff
minimap.selectionHighlight#e9b79a
minimap.warningHighlight#ffb700
minimapGutter.addedBackground#5bf076
minimapGutter.deletedBackground#ff0083
minimapGutter.modifiedBackground#29cdff
minimapSlider.background#0059be25
notificationCenter.border#eafffd
notificationCenterHeader.background#eafffd
notificationCenterHeader.foreground#357580
notifications.background#357580
notifications.border#eafffd
notifications.foreground#eafffd
notificationsErrorIcon.foreground#ff0054
notificationsInfoIcon.foreground#00dbff
notificationsWarningIcon.foreground#ffd700
notificationToast.border#eafffd
panel.background#357580
panel.border#0093ff59
panelSection.border#80808059
panelTitle.activeBorder#ffb700
panelTitle.activeForeground#ffb700
panelTitle.inactiveForeground#cefbff
peekView.border#357580
peekViewEditor.background#ebe4de
peekViewEditor.matchHighlightBackground#883f0041
peekViewEditorGutter.background#ebe4de
peekViewResult.background#cee6e6
peekViewResult.fileForeground#1e1e1e
peekViewResult.lineForeground#357580
peekViewResult.matchHighlightBackground#29616b48
peekViewResult.selectionBackground#c9f7ff
peekViewResult.selectionForeground#357580
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#0d4b56
peekViewTitleLabel.foreground#0e3036
pickerGroup.border#cccedb
pickerGroup.foreground#357580
progressBar.background#ff003c
scrollbar.shadow#ade8ff
scrollbarSlider.activeBackground#357580
scrollbarSlider.background#35758022
scrollbarSlider.hoverBackground#3575803c
selection.background#c5efff
settings.focusedRowBackground#ffffff07
settings.headerForeground#bababa
sideBar.background#f3fffe
sideBar.border#00abb4
sideBar.dropBackground#cde8ea
sideBar.foreground#048e94
sideBarSectionHeader.background#00abb4
sideBarSectionHeader.border#28cdde5a
sideBarSectionHeader.foreground#f1feff
sideBarTitle.foreground#00abb4
statusBar.background#048e94
statusBar.border#048e94
statusBar.debuggingBackground#ff0054
statusBar.debuggingBorder#ff0054
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#10ab76
statusBar.noFolderBorder#10ab76
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#005e622c
statusBarItem.remoteBackground#16825d
statusBarItem.remoteForeground#ffffff
tab.activeBackground#f9ffff
tab.activeBorder#f9ffff
tab.activeBorderTop#00baba
tab.activeForeground#357580
tab.border#00baba
tab.hoverBackground#d7ecec
tab.inactiveBackground#e4ecec
tab.inactiveForeground#333333b3
terminal.ansiBlack#00181d
terminal.ansiBlue#0056b4
terminal.ansiBrightBlack#004a5a
terminal.ansiBrightBlue#0072ee
terminal.ansiBrightCyan#00c9fb
terminal.ansiBrightGreen#00d900
terminal.ansiBrightMagenta#d900d9
terminal.ansiBrightRed#ff0054
terminal.ansiBrightWhite#a5a5a5
terminal.ansiBrightYellow#e2d300
terminal.ansiCyan#0598bc
terminal.ansiGreen#007300
terminal.ansiMagenta#9d009d
terminal.ansiRed#ba003d
terminal.ansiWhite#555555
terminal.ansiYellow#8c8300
terminal.background#333333
terminal.border#80808059
terminal.foreground#d5d5d5
terminal.selectionBackground#ff00ae49
terminalCursor.background#ffffff
terminalCursor.foreground#357580
textLink.foreground#ff78a4
titleBar.activeBackground#f3fffe
titleBar.activeForeground#00353b
titleBar.border#00000000
titleBar.inactiveBackground#f3fffe
titleBar.inactiveForeground#00353b
tree.indentGuidesStroke#004145
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000029

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.class, support.class	#ff8a15	bold
entity.name.class.support, support.type	#3061bb	bold
comment	#76b7c5	italic
keyword.operator.class, constant.other, source.php.embed.line	#148589	bold
constant.other.color	#ff4800	bold
entity.name.function	#148589	bold
variable	#148589	—
variable.constant	#04ABB4	italic
support.other.variable	#1F271B	—
entity.name.tag	#399fff	bold
entity.other.attribute-name, support.other.variable	#41afd1	italic
string.other.link, string.regexp, meta.tag, declaration.tag, markup.deleted.git_gutter	#30548a	—
string, constant.other.symbol, entity.other.inherited-class, entity.name.filename, markup.heading, markup.inserted.git_gutter	#1f72be	underline
string.template	#1f72be	underline
storage.type	#f77700	—
keyword.control.import, keyword.control.from	#1f72be	bold
keyword, storage.type, storage.modifier	#1f72be	bold
storage.modifier.ts	#1f72be	italic
keyword.operator.comparison, keyword.operator.comparison.ts	#f77700
punctuation.terminator.statement, punctuation.terminator.statement.ts	#bbbbbb
keyword.operator.assignment, keyword.operator.assignment.ts	#f77700	bold
entity.name.type, entity.name.type.ts, meta.type.annotation.ts	#d000a6	bold
variable.other.property, variable.other.property.ts	#148589
meta.object-literal.key, meta.object-literal.key.ts	#6700ce
meta.object.member.ts	#148589
constant.language.null	#f77700	italic
keyword.control.conditional	#1f72be	bold
keyword.control.flow	#1f72be	bold
keyword.control.export	#1f72be	bold
keyword.control.default	#1f72be	—
constant.language.boolean.true	#c500bb	italic
constant.language.boolean.false	#c500bb	italic
keyword.operator	#6d2200	—
constant.numeric.decimal	#c57600	—
support.type.property-name.json	#d10057	bold
constant.numeric.json	#da8300	—
constant.language.json	#da00ab	italic
string.quoted.double.json	#01a783	normal
punctuation.definition.dictionary, punctuation.separator	#bbbbbb	bold
markup.heading.markdown	#ff3985	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw	#ff3985	bold
string.other.link.description, string.other.link.title	#ff3985	normal
punctuation.definition.list	#ff3985	bold
markup.list	#494949	normal
string.other.link.url	#ffa339	underline
markup.quote	#b60046	italic
meta.embedded.block	#4e2e47	—
meta.structure.dictionary.value	#858585	—
support.type.property-name.org, keyword.control.block.org	#7e005e	—

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