Serika Theme

Name: Serika Theme
Author: hugocxl

Publisher: hugocxlThemes in package: 1

Serika theme by @hugocxl 🚀

GitHub

VS Code preview

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

Serika Theme — Serika

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.activeBorder#FFCB00
activityBar.background#323437
activityBar.border#323437
activityBar.foreground#FFCB00
activityBar.inactiveForeground#6a737d
activityBarBadge.background#FFCB00
activityBarBadge.foreground#000000
badge.background#FFCB00
badge.foreground#000000
breadcrumb.activeSelectionForeground#d1d5da
breadcrumb.focusForeground#e1e4e8
breadcrumb.foreground#959da5
breadcrumbPicker.background#2c2e31
button.background#FFCB00
button.foreground#dcffe4
button.hoverBackground#a9870f
button.secondaryBackground#2c2e31
button.secondaryForeground#ffffff
button.secondaryHoverBackground#586069
checkbox.background#2c2e31
checkbox.border#1b1f23
debugToolBar.background#2c2e31
descriptionForeground#959da5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#323437
dropdown.border#FFCB00
dropdown.foreground#e1e4e8
dropdown.listBackground#323437
editor.background#323437
editor.findMatchBackground#67769660
editor.findMatchBorder#FFCB00f0
editor.findMatchHighlightBackground#67769660
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#58606915
editor.foreground#e1e4e8
editor.inactiveSelectionBackground#ffffff1f
editor.lineHighlightBackground#2c2e31
editor.linkedEditingBackground#3392ff22
editor.selectionBackground#ffffff1f
editor.selectionHighlightBackground#ffffff0f
editor.selectionHighlightBorder#FFCB0000
editor.stackFrameHighlightBackground#c6902625
editor.wordHighlightBackground#17e5e600
editor.wordHighlightBorder#626d7779
editor.wordHighlightStrongBackground#17e5e600
editor.wordHighlightStrongBorder#626d77e0
editorBracketMatch.background#ffffff1f
editorBracketMatch.border#FFCB0000
editorCursor.foreground#FFCB00
editorGroup.border#323437
editorGroup.dropBackground#323437
editorGroupHeader.tabsBackground#323437
editorGroupHeader.tabsBorder#323437
editorGutter.addedBackground#FFCB00
editorGutter.deletedBackground#d0679d
editorGutter.modifiedBackground#ca4754
editorIndentGuide.activeBackground1#2c2e31
editorIndentGuide.background1#323437
editorLineNumber.activeForeground#FFCB00
editorLineNumber.foreground#626d77
editorOverviewRuler.border#323437
editorWhitespace.foreground#2c2e31
editorWidget.background#323437
errorForeground#f97583
focusBorder#FFCB00
foreground#d1d5da
gitDecoration.addedResourceForeground#FFCB00
gitDecoration.conflictingResourceForeground#d0679d
gitDecoration.deletedResourceForeground#d0679d
gitDecoration.ignoredResourceForeground#767c9d70
gitDecoration.modifiedResourceForeground#ca4754
gitDecoration.renamedResourceForeground#FFCB00
gitDecoration.stageDeletedResourceForeground#d0679d
gitDecoration.stageModifiedResourceForeground#ca4754
gitDecoration.submoduleResourceForeground#89ddff
gitDecoration.untrackedResourceForeground#FFCB00
icon.foreground#FFCB00
input.background#323437
input.border#1b1f23
input.foreground#e1e4e8
input.placeholderForeground#959da5
inputOption.activeBackground#FFCB0000
inputOption.activeBorder#FFCB00
list.activeSelectionBackground#2c2e31
list.activeSelectionForeground#FFCB00
list.focusBackground#454d55
list.hoverBackground#323437
list.hoverForeground#e1e4e8
list.inactiveFocusBackground#33393f
list.inactiveSelectionBackground#2c2e31
list.inactiveSelectionForeground#FFCB00
menu.selectionBackground#323437
menu.selectionForeground#FFCB00
menubar.selectionBackground#323437
menubar.selectionForeground#FFCB00
notificationCenterHeader.background#323437
notificationCenterHeader.foreground#959da5
notifications.background#323437
notifications.border#1b1f23
notifications.foreground#e1e4e8
notificationsErrorIcon.foreground#ea4a5a
notificationsInfoIcon.foreground#79b8ff
notificationsWarningIcon.foreground#ffab70
panel.background#323437
panel.border#323437
panelInput.border#323437
panelTitle.activeBorder#FFCB00
panelTitle.activeForeground#e1e4e8
panelTitle.inactiveForeground#959da5
peekViewEditor.background#32343788
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#323437
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#2c2e31
pickerGroup.foreground#FFCB00
progressBar.background#FFCB00
quickInput.background#323437
quickInput.foreground#e1e4e8
scrollbar.shadow#493a072d
scrollbarSlider.activeBackground#6a737d66
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#e1e4e8
settings.modifiedItemIndicator#0366d6
sideBar.background#323437
sideBar.border#323437
sideBar.foreground#d1d5da
sideBarSectionHeader.background#323437
sideBarSectionHeader.border#323437
sideBarSectionHeader.foreground#e1e4e8
sideBarTitle.foreground#e1e4e8
statusBar.background#323437
statusBar.border#323437
statusBar.debuggingBackground#d0679d
statusBar.debuggingForeground#e1e4e8
statusBar.foreground#e1e4e8
statusBar.noFolderBackground#323437
statusBar.noFolderForeground#959da5
statusBarItem.prominentBackground#FFCB00
tab.activeBackground#323437
tab.activeBorder#323437
tab.activeForeground#FFCB00
tab.border#323437
tab.hoverBackground#323437
tab.inactiveBackground#323437
tab.inactiveForeground#959da5
tab.unfocusedActiveBorder#323437
tab.unfocusedHoverBackground#323437
terminal.ansiBlack#3f4451
terminal.ansiBlue#89ddff
terminal.ansiBrightBlack#4f5666
terminal.ansiBrightBlue#89ddff
terminal.ansiBrightCyan#FFCB00
terminal.ansiBrightGreen#a5e075
terminal.ansiBrightMagenta#de73ff
terminal.ansiBrightRed#ff616e
terminal.ansiBrightWhite#d7dae0
terminal.ansiBrightYellow#f0a45d
terminal.ansiCyan#82aaff
terminal.ansiGreen#98c379
terminal.ansiMagenta#c792ea
terminal.ansiRed#d0679d
terminal.ansiWhite#e6e6e6
terminal.ansiYellow#f69d50
terminal.foreground#d1d5da
textBlockQuote.background#323437
textBlockQuote.border#2c2e31
textCodeBlock.background#323437
textLink.activeForeground#a9870f
textLink.foreground#FFCB00
textPreformat.foreground#d1d5da
textSeparator.foreground#586069
titleBar.activeBackground#323437
titleBar.activeForeground#e1e4e8
titleBar.border#323437
titleBar.inactiveBackground#323437
titleBar.inactiveForeground#959da5
tree.indentGuidesStroke#323437
welcomePage.progress.foreground#FFCB00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable	#d1d0c5	—
keyword.operator.assignment, brace, bracket, delimiter, meta, paren, tag	#737579	—
storage	#737579	—
string	#d1d0c5	—
comment	#737579	—
constant, entity.name	#FFCB00	—
constant	#ea4a5a
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#ea4a5a	—
token.debug-token	#B267E6	—

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