Chronotype Themes

Name: Chronotype Themes
Author: Chatman R. Jr

Publisher: Chatman R. JrThemes in package: 4

Custom VSCode themes for pleasant, productive programming around the clock.

GitHub

Color themes

VS Code preview

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

Chronotype Themes — Chronotype: Evening

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#191a28
activityBar.dropBackground#594a54
activityBar.foreground#b1a59f
activityBar.inactiveForeground#b1a59f88
activityBarBadge.background#d1ac34
activityBarBadge.foreground#191a28
badge.background#d1ac34
badge.foreground#191a28
breadcrumb.activeSelectionForeground#d1ac34
breadcrumb.background#39313ea1
breadcrumb.focusForeground#77666b88
breadcrumb.foreground#77666b
breadcrumbPicker.background#191a28
button.background#d1ac34
button.foreground#191a28
button.hoverBackground#d1ac34a8
debugExceptionWidget.background#f95b8833
debugExceptionWidget.border#f95b88
debugToolBar.background#191a28
debugToolBar.border#f95b88
descriptionForeground#cdc6bd
diffEditor.insertedTextBackground#9fc24933
diffEditor.removedTextBackground#f95b8833
dropdown.background#39313ea8
dropdown.border#d1ac34
dropdown.foreground#cdc6bd
dropdown.listBackground#39313ea8
editor.background#191a28
editor.findMatchBackground#d1ac3499
editor.findMatchHighlightBackground#f98f4855
editor.findRangeHighlightBackground#f98f48aa
editor.focusedStackFrameHighlightBackground#cee7ce73
editor.foreground#cdc6bd
editor.lineHighlightBackground#39313ea8
editor.rangeHighlightBackground#d1ac3499
editor.selectionBackground#39313e
editor.selectionHighlightBackground#594a548c
editor.wordHighlightBackground#594a5499
editor.wordHighlightStrongBackground#d1ac3440
editorBracketMatch.background#594a541a
editorBracketMatch.border#d1ac34
editorCodeLens.foreground#d1ac34
editorCursor.foreground#77666bac
editorGroup.border#594a54a8
editorGroup.dropBackground#77666b2e
editorGroupHeader.noTabsBackground#191a28
editorGroupHeader.tabsBackground#191a28
editorGutter.addedBackground#9fc249
editorGutter.background#39313e22
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#f95b88
editorGutter.modifiedBackground#06dcb4
editorIndentGuide.activeBackground#d1ac34
editorIndentGuide.background#d1ac3411
editorLineNumber.activeForeground#d1ac34
editorLineNumber.foreground#594a5466
errorForeground#f95b88
extensionButton.prominentBackground#d1ac34dd
extensionButton.prominentForeground#191a28
extensionButton.prominentHoverBackground#d1ac34
focusBorder#d1ac34
foreground#cdc6bd
gitDecoration.addedResourceForeground#9fc249
gitDecoration.conflictingResourceForeground#d1ac34
gitDecoration.deletedResourceForeground#f95b88
gitDecoration.ignoredResourceForeground#cdc6bd33
gitDecoration.modifiedResourceForeground#06dcb4
gitDecoration.submoduleResourceForeground#06b6e3
gitDecoration.untrackedResourceForeground#d1ac34
input.background#39313e
input.border#d1ac34
input.foreground#cdc6bd
input.placeholderForeground#77666b
inputOption.activeBorder#06dcb4
inputValidation.errorBackground#f95b88
inputValidation.errorBorder#f95b88
inputValidation.errorForeground#191a28
inputValidation.infoBackground#06dcb433
inputValidation.infoBorder#06dcb4
inputValidation.infoForeground#06dcb4
inputValidation.warningBackground#d1ac3433
inputValidation.warningBorder#d1ac34
list.activeSelectionBackground#d1ac34
list.activeSelectionForeground#191a28
list.dropBackground#39313e
list.errorForeground#f95b88
list.focusBackground#d1ac34
list.focusForeground#191a28
list.hoverBackground#39313e
list.inactiveFocusBackground#d1ac34ac
list.inactiveSelectionBackground#39313e88
list.invalidItemForeground#d1ac34
list.warningForeground#f98f48
menu.separatorBackground#888888
menubar.selectionBackground#594a54
menubar.selectionForeground#cdc6bd
notificationCenterHeader.background#39313e
notificationLink.foreground#d1ac34a8
notifications.background#39313e99
notifications.border#77666b
panel.border#77666ba8
progressBar.background#d1ac34
scrollbar.shadow#cdc6bd34
scrollbarSlider.activeBackground#594a5499
scrollbarSlider.background#77666b
scrollbarSlider.hoverBackground#77666bb3
selection.background#d1ac34a8
sideBar.background#191a28
sideBar.dropBackground#39313ea8
sideBarSectionHeader.background#39313e
statusBar.background#39313e88
statusBar.debuggingBackground#f98f4899
statusBar.debuggingForeground#191a28
statusBar.foreground#cdc6bdee
statusBar.noFolderBackground#e9e8df
statusBar.noFolderForeground#191a28
statusBarItem.activeBackground#d1ac34cc
statusBarItem.hoverBackground#d1ac34a8
statusBarItem.prominentBackground#068be2aa
statusBarItem.prominentHoverBackground#068be2
tab.activeBackground#39313e
tab.activeForeground#cdc6bd
tab.activeModifiedBorder#d1ac34cc
tab.border#77666ba8
tab.inactiveBackground#39313e55
tab.inactiveForeground#cdc6bdb3
tab.inactiveModifiedBorder#d1ac3480
tab.unfocusedActiveForeground#cdc6bdb3
tab.unfocusedActiveModifiedBorder#d1ac34b3
tab.unfocusedInactiveForeground#cdc6bd59
tab.unfocusedInactiveModifiedBorder#d1ac3440
terminal.ansiBlack#cdc6bd
terminal.ansiBlue#068be2
terminal.ansiBrightBlack#191a28
terminal.ansiBrightBlue#337abe
terminal.ansiBrightCyan#d1ac34
terminal.ansiBrightGreen#9fc249
terminal.ansiBrightMagenta#06dcb4
terminal.ansiBrightRed#f95b88
terminal.ansiBrightWhite#cdc6bd
terminal.ansiBrightYellow#d1ac34
terminal.ansiCyan#d1ac34
terminal.ansiGreen#9fc249
terminal.ansiMagenta#06dcb4
terminal.ansiRed#f95b88
terminal.ansiWhite#cdc6bd
terminal.ansiYellow#d1ac34
terminal.foreground#cdc6bd
terminal.selectionBackground#39313ecc
textBlockQuote.background#39313e
textBlockQuote.border#d1ac34
textCodeBlock.background#39313e
textLink.activeForeground#d1ac34
textLink.foreground#d1ac3477
textPreformat.foreground#cdc6bd
textSeparator.foreground#b1a59f
titleBar.activeBackground#39313eaa
titleBar.activeForeground#cdc6bd
titleBar.inactiveBackground#39313e66
titleBar.inactiveForeground#cdc6bd99
widget.shadow#39313e34

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, const.character.escape, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#76666b	—
string, string.regexp, constant.other.symbol	#f98f48	—
constant.numeric, constant.character, constant.keyword, support.constant, constant	#d1ac34	bold
comment, punctuation.definition.comment, comment.block.preprocessor, comment.block.documentation, comment.documentation	#f95b88	—
entity.name	#9fc249	—
variable.language, storage.modifier, meta.selector	#068be2	bold
support.type.property-name.json, keyword.operator	#cdc6bd	—

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