Berba

Name: Berba
Author: hanenbro

Publisher: hanenbroThemes in package: 1

A light colour theme for Visual Studio Code with a warm, bright palette

Open in VS Code GitHub

VS Code preview

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

Berba — Berba

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.background#554a55
activityBar.dropBackground#221f22bf
activityBar.foreground#ffd9b7
activityBar.inactiveForeground#caa786
activityBarBadge.background#f88214
activityBarBadge.foreground#ffffff
badge.background#97b901
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#00b8ae
breadcrumb.focusForeground#00b8ae
breadcrumb.foreground#C2A89088
button.background#ff2b59
button.foreground#f9f1e9
button.hoverBackground#f52350
descriptionForeground#C2A89088
diffEditor.insertedTextBackground#97b90119
diffEditor.removedTextBackground#ff2b5919
dropdown.background#eee1d4
dropdown.foreground#775067
editor.background#f9f1e9
editor.findMatchBackground#00b8ae26
editor.findMatchBorder#97b901
editor.findMatchHighlightBackground#00b8ae26
editor.findRangeHighlightBackground#00b8ae0c
editor.foreground#775067
editor.hoverHighlightBackground#00b8ae0c
editor.inactiveSelectionBackground#00b8ae2c
editor.lineHighlightBackground#00b8ae10
editor.lineHighlightBorder#00b8ae10
editor.selectionBackground#00b8ae4A
editor.selectionForeground#f9f1e9
editor.selectionHighlightBackground#007fc01a
editor.wordHighlightBackground#b1365b10
editor.wordHighlightStrongBackground#b1365b1a
editorBracketMatch.border#C2A890
editorCodeLens.foreground#C2A890
editorCursor.foreground#00b8ae
editorError.foreground#ff2b59
editorGroup.border#775067c7
editorGroup.dropBackground#007fc033
editorGroupHeader.tabsBackground#9b4a2433
editorGutter.addedBackground#97b901
editorGutter.deletedBackground#ff2b59
editorGutter.modifiedBackground#f88214
editorHint.foreground#b1365b
editorIndentGuide.activeBackground#c2a890
editorInfo.foreground#144d79
editorLineNumber.activeForeground#00b8ae
editorLink.activeForeground#144d79
editorMarkerNavigation.background#f3ece5AA
editorMarkerNavigationError.background#ff2b59
editorMarkerNavigationInfo.background#144d79
editorMarkerNavigationWarning.background#f88214
editorOverviewRuler.addedForeground#97b901
editorOverviewRuler.deletedForeground#ff2b59
editorOverviewRuler.errorForeground#ff2b59
editorOverviewRuler.findMatchForeground#00b8ae26
editorOverviewRuler.infoForeground#144d79
editorOverviewRuler.modifiedForeground#f88214
editorOverviewRuler.rangeHighlightForeground#00b8ae26
editorOverviewRuler.selectionHighlightForeground#00b8ae26
editorOverviewRuler.warningForeground#f88214
editorOverviewRuler.wordHighlightForeground#00b8ae26
editorOverviewRuler.wordHighlightStrongForeground#00b8ae26
editorSuggestWidget.background#f7ebe0
editorSuggestWidget.foreground#775067
editorSuggestWidget.highlightForeground#ff2b59
editorSuggestWidget.selectedBackground#f88214AF
editorWarning.foreground#f88214
errorForeground#ff2b59
extensionButton.prominentBackground#97b901
extensionButton.prominentForeground#ffffff
focusBorder#C2A890
foreground#00b8ae
gitDecoration.conflictingResourceForeground#f88214
gitDecoration.deletedResourceForeground#ff2b59
gitDecoration.modifiedResourceForeground#007fc0
gitDecoration.untrackedResourceForeground#f88214
input.background#ffffff44
input.foreground#007fc0
input.placeholderForeground#C2A890
inputValidation.errorBorder#ff2b59
inputValidation.errorForeground#ff2b59
inputValidation.infoBorder#144d79
inputValidation.infoForeground#144d79
inputValidation.warningBorder#f88214
inputValidation.warningForeground#f88214
list.activeSelectionBackground#86d0cadd
list.activeSelectionForeground#ffffff
list.dropBackground#221f22bf
list.errorForeground#ff2b59
list.focusBackground#f88214AF
list.focusForeground#f9f1e9
list.highlightForeground#ff2b59
list.hoverBackground#ffffff44
list.hoverForeground#144d79
list.inactiveSelectionBackground#86d0caA0
list.inactiveSelectionForeground#ffffff
list.invalidItemForeground#ff2b59
list.warningForeground#f88214
menu.background#554a55
merge.commonContentBackground#00b8ae19
merge.commonHeaderBackground#00b8ae26
merge.currentContentBackground#ff2b5919
merge.currentHeaderBackground#ff2b5926
merge.incomingContentBackground#007fc019
merge.incomingHeaderBackground#007fc026
notificationCenterHeader.foreground#C2A89088
notificationLink.foreground#97b901
notifications.foreground#00b8ae
panel.background#f1e9e2
panel.dropBackground#221f22bf
panelTitle.activeBorder#f88214
panelTitle.activeForeground#f88214
panelTitle.inactiveForeground#f88214cc
peekViewEditor.background#C2A8901A
peekViewResult.background#C2A89033
peekViewResult.fileForeground#C2A89088
peekViewResult.lineForeground#C2A89088
peekViewResult.selectionForeground#00b8ae
peekViewTitle.background#C2A8900A
peekViewTitleDescription.foreground#775067
peekViewTitleLabel.foreground#00b8ae
scrollbarSlider.activeBackground#775067cc
scrollbarSlider.background#77506788
scrollbarSlider.hoverBackground#775067aa
selection.background#00b8ae26
settings.checkboxForeground#00b8ae
settings.dropdownForeground#00b8ae
settings.dropdownListBorder#C2A89088
settings.headerForeground#97b901
settings.modifiedItemIndicator#97b901
settings.numberInputForeground#00b8ae
settings.textInputForeground#00b8ae
sideBar.background#f3e6da
sideBar.dropBackground#221f22bf
sideBar.foreground#221f22bf
sideBarSectionHeader.foreground#ad9077
statusBar.background#b1365b
statusBar.debuggingBackground#ff2b59
statusBar.debuggingForeground#ffffff
statusBar.foreground#d0bca9
statusBar.noFolderBackground#4d4349
statusBar.noFolderForeground#C2A890
statusBarItem.remoteBackground#f88214
statusBarItem.remoteForeground#ffffff
tab.activeBackground#f9f1e9ec
tab.activeBorder#f88214
tab.activeForeground#673057
tab.border#77506720
tab.inactiveBackground#f9f1e94A
tab.inactiveForeground#775067BB
tab.unfocusedActiveBackground#f9f1e9ad
tab.unfocusedInactiveForeground#7750679f
terminal.ansiBlue#f88214
terminal.ansiBrightBlack#C2A890
terminal.ansiBrightBlue#f88214
terminal.ansiBrightCyan#144d79
terminal.ansiBrightGreen#007fc0
terminal.ansiBrightMagenta#b1365b
terminal.ansiBrightRed#ff2b59
terminal.ansiBrightWhite#00b8ae
terminal.ansiBrightYellow#97b901
terminal.ansiCyan#144d79
terminal.ansiGreen#007fc0
terminal.ansiMagenta#b1365b
terminal.ansiRed#ff2b59
terminal.ansiWhite#00b8ae
terminal.ansiYellow#97b901
terminal.foreground#00b8ae
terminal.selectionBackground#00b8ae46
terminalCursor.foreground#00b8ae
textLink.activeForeground#00b8ae
textLink.foreground#97b901
textPreformat.foreground#00b8ae
textSeparator.foreground#C2A890
titleBar.activeBackground#333038
titleBar.activeForeground#d6cabc
titleBar.inactiveBackground#4d4349

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#C2A890	italic
comment.block.preprocessor	#C2A890
comment.documentation, comment.block.documentation	#505977	—
invalid.deprecated	#007fc080	—
invalid.illegal	#ff2b5980	—
keyword.operator	#ff2b59	—
keyword, storage	#ff2b59	—
storage.type, support.type	#ff2b59	—
constant.language, support.constant, variable.language	#00b8ae	—
entity.name.function, support.function	#007fc0
variable.parameter	#f88214	italic
entity.name.class, 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	#144d79	—
entity.other.inherited-class	#007fc0	italic
entity.name.exception	#660000	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#b1365b	—
string	#97b901	—
constant.character.escape	#00b8ae	—
string.regexp	#007fc0	—
constant.other.symbol	#00b8ae	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#C2A890	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#00b8ae
entity.name.tag	#ff2b59
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#f88214	italic
constant.character.entity, punctuation.definition.entity	#144d79	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#ff2b59
meta.property-name, support.type.property-name	#00b8ae
meta.property-value, meta.property-value constant.other, support.constant.property-value	#007fc0	—
keyword.other.important	—	bold
markup.changed	#144d79	—
markup.italic	—	italic
meta.link	#144d79	—
markup.output, markup.raw	#ff2b59	—
markup.prompt	#144d79	—
markup.heading	#ff2b59	—
markup.bold	—	bold
markup.traceback	#f88214	—
markup.underline	—	underline
markup.quote	#97b901	—
markup.list	#00b8ae	—
markup.bold, markup.italic	#007fc0	—
markup.inline.raw	#b1365b

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