Chiper

Name: Chiper
Author: Daniel Bedrich

Publisher: Daniel BedrichThemes in package: 8

Flat and minimal themes!

GitHub

Color themes

VS Code preview

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

Chiper — Chiper - MacOS Red Accent

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

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#303136
activityBar.background#303136
activityBar.border#303136
activityBar.foreground#d64a4a
activityBar.inactiveForeground#ffffff8f
activityBarBadge.background#d64a4a
activityBarBadge.foreground#000000
badge.background#d64a4a
badge.foreground#000000
button.background#d64a4a
button.foreground#000000
button.hoverBackground#d64a4a
descriptionForeground#ffffff
dropdown.background#303136
dropdown.border#303136
dropdown.foreground#ffffff
dropdown.listBackground#303136
editor.background#242529
editor.findMatchBackground#636f8380
editor.findMatchHighlightBackground#636f8380
editor.foldBackground#30313690
editor.foreground#ffffff
editor.inactiveSelectionBackground#d64a4a25
editor.lineHighlightBackground#303239
editor.selectionBackground#d64a4a25
editor.selectionHighlightBackground#636f8380
editor.wordHighlightBackground#d64a4a35
editor.wordHighlightStrongBackground#d64a4a50
editorError.border#ff000000
editorError.foreground#e21515
editorGroup.border#393a3c
editorGroup.dropBackground#555555
editorGroup.emptyBackground#303136
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.border#303136
editorGroupHeader.noTabsBackground#303136
editorGroupHeader.tabsBackground#303136
editorGroupHeader.tabsBorder#303136
editorGutter.addedBackground#6ed16d
editorGutter.background#242529
editorGutter.deletedBackground#ff6767
editorGutter.modifiedBackground#4ba9fc
editorHint.border#ff000000
editorHint.foreground#ffc400
editorHoverWidget.background#303136
editorHoverWidget.border#303136
editorIndentGuide.activeBackground1#ffffff25
editorIndentGuide.background1#ffffff0e
editorInfo.border#ff000000
editorInfo.foreground#6ed16d
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#747478
editorOverviewRuler.addedForeground#6ed16d
editorOverviewRuler.border#ff000000
editorOverviewRuler.bracketMatchForeground#636f8380
editorOverviewRuler.deletedForeground#ff6767
editorOverviewRuler.errorForeground#ff6767
editorOverviewRuler.findMatchForeground#636f8380
editorOverviewRuler.infoForeground#ffc400
editorOverviewRuler.modifiedForeground#4ba9fc
editorOverviewRuler.rangeHighlightForeground#636f8380
editorOverviewRuler.selectionHighlightForeground#636f8380
editorOverviewRuler.warningForeground#ffc501
editorOverviewRuler.wordHighlightForeground#636f8380
editorOverviewRuler.wordHighlightStrongForeground#636f8380
editorPane.background#1e1e1e
editorSuggestWidget.background#303136
editorSuggestWidget.border#303136
editorSuggestWidget.focusHighlightForeground#FFFFFF
editorSuggestWidget.foreground#ffffff90
editorSuggestWidget.highlightForeground#ffffffc4
editorSuggestWidget.selectedBackground#d64a4a50
editorSuggestWidget.selectedForeground#ffffff90
editorUnnecessaryCode.opacity#000000c0
editorWarning.border#ff000000
editorWarning.foreground#ffc501
editorWidget.background#303136
editorWidget.border#303136
editorWidget.resizeBorder#414045
errorForeground#ffffff
extensionBadge.remoteBackground#d64a4a
extensionBadge.remoteForeground#000000
extensionButton.prominentBackground#d64a4a
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#d64a4a
extensionIcon.preReleaseForeground#d64a4a
extensionIcon.starForeground#d64a4a
extensionIcon.verifiedForeground#d64a4a
focusBorder#303136
foreground#ffffff
gitDecoration.addedResourceForeground#ffffff
gitDecoration.conflictingResourceForeground#9946aa
gitDecoration.deletedResourceForeground#ffffff
gitDecoration.ignoredResourceForeground#ffffff80
gitDecoration.modifiedResourceForeground#ffffff
gitDecoration.renamedResourceForeground#ffffff
gitDecoration.stageDeletedResourceForeground#ffffff
gitDecoration.stageModifiedResourceForeground#ffffff
gitDecoration.submoduleResourceForeground#ffc400
gitDecoration.untrackedResourceForeground#ffffff
icon.foreground#ffffff
input.background#414045
input.border#414045
input.foreground#ffffff
inputOption.activeBackground#d64a4a
list.activeSelectionBackground#d64a4a50
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.errorForeground#ffffff
list.focusBackground#d64a4a25
list.focusForeground#ffffff
list.focusHighlightForeground#303136
list.focusOutline#d64a4a25
list.highlightForeground#d64a4a
list.hoverBackground#d64a4a25
list.hoverForeground#ffffff
list.inactiveFocusBackground#d64a4a25
list.inactiveSelectionBackground#d64a4a50
list.inactiveSelectionForeground#ffffff
list.warningForeground#ffffff
panel.background#242529
panel.border#303136
panelTitle.activeBorder#242529
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#ffffff8f
peekView.border#d64a4a
peekViewEditor.background#242529
peekViewEditor.matchHighlightBackground#d64a4a25
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#d64a4a25
peekViewResult.selectionBackground#d64a4a
peekViewResult.selectionForeground#ffffff
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#ffffff
progressBar.background#d64a4a
scrollbar.shadow#303136
scrollbarSlider.activeBackground#ffffff8f
scrollbarSlider.background#ffffff1c
scrollbarSlider.hoverBackground#ffffff8f
selection.background#d64a4a50
sideBar.background#303136
sideBar.dropBackground#555555
sideBar.foreground#ffffff
sideBarSectionHeader.background#303136
sideBarSectionHeader.border#303136
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#303136
statusBar.debuggingBackground#303136
statusBar.debuggingBorder#303136
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#303136
statusBar.foreground#ffffff
statusBar.noFolderBackground#303136
statusBar.noFolderBorder#303136
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#303136
statusBarItem.hoverBackground#303136
tab.activeBackground#303136
tab.activeBorderTop#d64a4a
tab.activeForeground#ffffff
tab.activeModifiedBorder#3399cc
tab.border#303136
tab.inactiveBackground#303136
tab.inactiveForeground#b7b7b7
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveForeground#ffffff
tab.unfocusedInactiveForeground#b7b7b7
textBlockQuote.background#ff000000
textBlockQuote.border#ff000000
textCodeBlock.background#ff000000
textLink.activeForeground#6699fe
textLink.foreground#6699fe
textPreformat.foreground#ffffff
textSeparator.foreground#ffffff
titleBar.activeBackground#414045
titleBar.activeForeground#ffffff
titleBar.border#414045
titleBar.inactiveBackground#414045
titleBar.inactiveForeground#b8b7bc
tree.indentGuidesStroke#ffffff25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f8c98	—
string	#fe8170	—
storage.type.function.arrow	#ffffff	—
storage.type, storage.modifier, keyword, variable.language.this, variable.language.super, keyword.other.typedef, constant.language	#fe7ab2	—
entity.name.type.class	#6bdfff	—
entity.name.type.interface	#6bdfff	—
variable.other.property, variable.other.object.property, variable.object.property	#b181ec	—
entity.name.function, entity.name.function.method	#4db1cb	—
entity.name.type.module, entity.other.inherited-class, entity.name.class	#d9baff	—
markup.bold, markdown.bold	#6bdfff
markup.heading, markdown.heading	#6bdfff
markup.italic, markdown.italic	#d9baff
markup.quote, markdown.quote	#d9baff
meta.type.annotation	#d9baff	—
punctuation.definition.tag, entity.name.tag, punctuation.separator.key-value	#fe7ab2	—
punctuation.separator.key-value.js	#ffffffd9	—
meta.attribute, entity.other.attribute-name	#65b5a2	—
constant.numeric	#d8c87c	—
keyword.operator	#ffffffd9	—
variable.parameter	#ffffffd9	—
support.type	#d9baff	—
keyword.operator.assignment	#ffffffd9	—
entity.name.fragment.graphql, variable.fragment.graphql	#6bdfff	—
punctuation.quasi.element	#ffffffd9	—
variable.other.readwrite, variable.other.constant, variable.other.object	#ffffffd9	—
meta.brace	#ffffffd9	—
keyword.operator.arithmetic	#b281eb	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
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}!`;
}