Calm Days, Sober Nights

Name: Calm Days, Sober Nights
Author: Giovani Cascaes

Publisher: Giovani CascaesThemes in package: 8

A Visual Studio Code theme for the day light and night darkness coders

Open in VS Code GitHub

Color themes

VS Code preview

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

Calm Days, Sober Nights — Calm Days, Sober Nights - Night (Sky) (no bold style)

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.activeBackground#52C9FF1D
activityBar.activeBorder#4DC7FF
activityBar.background#1D2435
activityBar.border#111520
activityBar.foreground#4DC7FF
activityBar.inactiveForeground#8F9EB8
activityBarBadge.background#4DC7FF
activityBarBadge.foreground#2C434D
badge.background#52C9FF1D
badge.foreground#4DC7FF
banner.background#8F9EB8
banner.foreground#D3DAE8
banner.iconForeground#D3DAE8
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.background#1D2435
breadcrumb.focusForeground#D3DAE8
breadcrumb.foreground#8F9EB8
breadcrumbPicker.background#21293B
button.background#4DC7FF
button.foreground#000000A0
button.hoverBackground#4AB5E6
button.secondaryBackground#313A52
button.secondaryForeground#ffffffA0
button.secondaryHoverBackground#414D63
checkbox.background#262D40
checkbox.border#00000000
checkbox.foreground#4DC7FF
commandCenter.activeBackground#ffffff10
commandCenter.activeForeground#ffffff
debugExceptionWidget.background#302A34
debugExceptionWidget.border#FF6696
debugIcon.breakpointCurrentStackframeForeground#E6457A85
debugIcon.breakpointDisabledForeground#D3DAE8
debugIcon.breakpointForeground#FF6699
debugIcon.breakpointStackframeForeground#45E696
debugIcon.breakpointUnverifiedForeground#D3DAE8
debugTokenExpression.boolean#FF8FEC
debugTokenExpression.error#ff3333
debugTokenExpression.name#5991FF
debugTokenExpression.number#FF8FEC
debugTokenExpression.string#E8A3FE
debugTokenExpression.value#EDEFFC
debugToolBar.background#1D2435
debugToolBar.border#1D2435
debugView.exceptionLabelBackground#FF6696
debugView.exceptionLabelForeground#4D1F23
debugView.stateLabelBackground#D3DAE820
debugView.stateLabelForeground#D3DAE8
debugView.valueChangedHighlight#FC92B780
descriptionForeground#8F9EB8
diffEditor.diagonalFill#D3DAE818
diffEditor.insertedLineBackground#2DD4BF17
diffEditor.insertedTextBackground#2DD4BF17
diffEditor.removedLineBackground#F5405A17
diffEditor.removedTextBackground#F5405A17
dropdown.background#262D40
dropdown.border#00000000
dropdown.foreground#D3DAE8
dropdown.listBackground#262D40
editor.background#192030
editor.findMatchBackground#586A9368
editor.findMatchHighlightBackground#4E639448
editor.findRangeHighlightBackground#4E639419
editor.focusedStackFrameHighlightBackground#4DFFA611
editor.foreground#D3DAE8
editor.hoverHighlightBackground#618CF228
editor.inactiveSelectionBackground#4DC7FF0E
editor.lineHighlightBackground#ffffff07
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff08
editor.selectionBackground#4DC7FF2E
editor.selectionHighlightBackground#ffffff14
editor.snippetFinalTabstopHighlightBackground#49587A1D
editor.snippetTabstopHighlightBackground#49587A10
editor.stackFrameHighlightBackground#FF4D8816
editor.wordHighlightBackground#4E639448
editor.wordHighlightStrongBackground#4E639468
editorBracketHighlight.foreground1#67E8F9F1
editorBracketHighlight.foreground2#578FFFF1
editorBracketHighlight.foreground3#38BDF8F1
editorBracketHighlight.foreground4#C084FCF1
editorBracketHighlight.unexpectedBracket.foreground#E65C6A
editorBracketMatch.background#D3DAE822
editorBracketMatch.border#00000000
editorBracketPairGuide.activeBackground1#67E8F9F1
editorBracketPairGuide.activeBackground2#578FFFF1
editorBracketPairGuide.activeBackground3#38BDF8F1
editorBracketPairGuide.activeBackground4#C084FCF1
editorCodeLens.foreground#D3DAE866
editorCursor.foreground#40C0FF
editorError.foreground#FF6696
editorGhostText.foreground#D3DAE835
editorGroup.border#111520
editorGroup.dropBackground#D3DAE820
editorGroupHeader.border#293246
editorGroupHeader.noTabsBackground#191F2E
editorGroupHeader.tabsBackground#1D2435
editorGroupHeader.tabsBorder#293246
editorGutter.addedBackground#2DD4BFB3
editorGutter.background#192030
editorGutter.deletedBackground#FB7185B3
editorGutter.modifiedBackground#68B1E8B3
editorHint.foreground#D3DAE8
editorHoverWidget.background#21293B
editorHoverWidget.border#ffffff09
editorHoverWidget.foreground#D3DAE8
editorHoverWidget.statusBarBackground#21293B
editorIndentGuide.activeBackground#8F9EB830
editorIndentGuide.background#D3DAE809
editorInfo.foreground#66CCFF
editorInlayHint.background#C084FC1C
editorInlayHint.foreground#C084FCC1
editorLightBulb.foreground#FAB38E
editorLightBulbAutoFix.foreground#66CCFF
editorLineNumber.activeForeground#D3DAE8B4
editorLineNumber.foreground#646D8255
editorLink.activeForeground#40C0FF
editorMarkerNavigation.background#191F2E
editorMarkerNavigationError.background#FF6696
editorMarkerNavigationError.headerBackground#38293D
editorMarkerNavigationInfo.background#66CCFF
editorMarkerNavigationInfo.headerBackground#25364B
editorMarkerNavigationWarning.background#FAB38E
editorMarkerNavigationWarning.headerBackground#37343D
editorOverviewRuler.addedForeground#2DD4BFD3
editorOverviewRuler.border#ffffff00
editorOverviewRuler.currentContentForeground#4266668a
editorOverviewRuler.deletedForeground#FB7185D3
editorOverviewRuler.errorForeground#FF6696D3
editorOverviewRuler.findMatchForeground#586A933c
editorOverviewRuler.incomingContentForeground#4266548a
editorOverviewRuler.infoForeground#66CCFFD3
editorOverviewRuler.modifiedForeground#68B1E8D3
editorOverviewRuler.rangeHighlightForeground#ffffff16
editorOverviewRuler.selectionHighlightForeground#ffffff4F
editorOverviewRuler.unicodeForeground#FFCC91D3
editorOverviewRuler.warningForeground#FAB38ED3
editorRuler.foreground#D3DAE809
editorStickyScrollHover.background#212838
editorSuggestWidget.background#21293B
editorSuggestWidget.border#ffffff09
editorSuggestWidget.foreground#8F9EB8
editorSuggestWidget.highlightForeground#4DC7FF
editorSuggestWidget.selectedBackground#8F9EB830
editorSuggestWidgetStatus.foreground#8F9EB8
editorUnicodeHighlight.border#FFCC9166
editorUnnecessaryCode.opacity#ffffffA8
editorWarning.foreground#FAB38E
editorWhitespace.foreground#D3DAE816
editorWidget.background#1D2435
editorWidget.border#1D2435
editorWidget.foreground#D3DAE8
editorWidget.resizeBorder#4DC7FF
errorForeground#FF6696
extensionButton.prominentBackground#313A52
extensionButton.prominentForeground#ffffffA0
extensionButton.prominentHoverBackground#414D63
focusBorder#85A2E632
foreground#D3DAE8
gitDecoration.addedResourceForeground#2DD4BF95
gitDecoration.conflictingResourceForeground#E8938B
gitDecoration.deletedResourceForeground#FB7185
gitDecoration.ignoredResourceForeground#D3DAE8A4
gitDecoration.modifiedResourceForeground#68B1E8
gitDecoration.renamedResourceForeground#5CBD4B
gitDecoration.stageDeletedResourceForeground#FB718595
gitDecoration.stageModifiedResourceForeground#68B1E895
gitDecoration.untrackedResourceForeground#2DD4BF
gitlens.gutterBackgroundColor#192030
gitlens.gutterForegroundColor#8F9EB8
gitlens.gutterUncommittedForegroundColor#D3DAE8
gitlens.lineHighlightBackgroundColor#3297FA15
gitlens.lineHighlightOverviewRulerColor#3297FAC3
gitlens.trailingLineForegroundColor#D3DAE840
icon.foreground#D3DAE8
input.background#262D40
input.border#ffffff12
input.foreground#D3DAE8
input.placeholderForeground#8F9EB8
inputOption.activeBackground#ffffff44
inputOption.hoverBackground#ffffff18
inputValidation.errorBackground#38293D
inputValidation.errorBorder#FF6696
inputValidation.errorForeground#D3DAE8
inputValidation.infoBackground#25364B
inputValidation.infoBorder#66CCFF
inputValidation.infoForeground#D3DAE8
inputValidation.warningBackground#37343D
inputValidation.warningBorder#FAB38E
inputValidation.warningForeground#D3DAE8
keybindingLabel.background#ffffff10
keybindingLabel.border#ffffff09
keybindingLabel.bottomBorder#00000010
list.activeSelectionBackground#D3DAE818
list.activeSelectionForeground#FFFFFF
list.dropBackground#D3DAE820
list.errorForeground#FF6696
list.filterMatchBackground#586A9368
list.focusBackground#D3DAE822
list.focusForeground#FFFFFF
list.focusOutline#ffffff00
list.highlightForeground#4DC7FF
list.hoverBackground#D3DAE807
list.hoverForeground#FFFFFF
list.inactiveFocusBackground#00000030
list.inactiveSelectionBackground#D3DAE810
list.inactiveSelectionForeground#FFFFFF
list.invalidItemForeground#FF6696
list.warningForeground#FAB38E
listFilterWidget.background#1D2435
listFilterWidget.noMatchesOutline#D1545F
listFilterWidget.outline#ffffff0A
menu.background#21293B
menu.border#D3DAE815
menu.foreground#D3DAE8C0
menu.selectionBackground#8F9EB825
menu.selectionForeground#FFFFFF
menu.separatorBackground#D3DAE815
menubar.selectionBackground#8F9EB820
menubar.selectionForeground#FFFFFF
merge.currentContentBackground#4266662a
merge.currentHeaderBackground#4266663a
merge.incomingContentBackground#4266542a
merge.incomingHeaderBackground#4266543a
mergeEditor.change.word.background#4DBBD13a
mergeEditor.conflict.handled.minimapOverViewRuler#68B1E8
mergeEditor.conflict.handledFocused.border#68B1E8
mergeEditor.conflict.handledUnfocused.border#68B1E84a
mergeEditor.conflict.unhandled.minimapOverViewRuler#D1584D
mergeEditor.conflict.unhandledFocused.border#D1584D
mergeEditor.conflict.unhandledUnfocused.border#4DBBD14a
minimap.background#192030
minimap.errorHighlight#FF6696B3
minimap.findMatchHighlight#586A93B3
minimap.selectionHighlight#80A6FF3D
minimap.unicodeHighlight#FFCC91B3
minimap.warningHighlight#FAB38EB3
minimapSlider.activeBackground#D3DAE84d
minimapSlider.background#D3DAE81a
minimapSlider.hoverBackground#D3DAE833
notificationCenter.border#ffffff00
notificationCenterHeader.background#21293B
notificationCenterHeader.foreground#D3DAE8
notificationLink.foreground#40C0FF
notifications.background#21293B
notifications.border#D3DAE810
notifications.foreground#D3DAE8
notificationToast.border#1E2840
panel.background#161D2B
panel.border#111520
panel.dropBorder#4DC7FF
panelSection.dropBackground#D3DAE820
panelTitle.activeBorder#4DC7FF
panelTitle.activeForeground#D3DAE8
panelTitle.inactiveForeground#8F9EB8
peekView.border#8F9EB8
peekViewEditor.background#232A3D
peekViewEditor.matchHighlightBackground#586A9322
peekViewEditorGutter.background#232A3D
peekViewResult.background#161D2B
peekViewResult.fileForeground#D3DAE8
peekViewResult.lineForeground#D3DAE8
peekViewResult.matchHighlightBackground#586A9330
peekViewResult.selectionBackground#D3DAE813
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1D2435
peekViewTitleDescription.foreground#D3DAE8A7
peekViewTitleLabel.foreground#D3DAE8
pickerGroup.border#D3DAE815
pickerGroup.foreground#8F9EB8
problemsErrorIcon.foreground#FF6696
problemsInfoIcon.foreground#66CCFF
problemsWarningIcon.foreground#FAB38E
progressBar.background#FF8FEC
quickInput.background#21293B
quickInput.foreground#D3DAE8
quickInputTitle.background#21293B
sash.hoverBorder#D3DAE835
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#D3DAE89d
scrollbarSlider.background#D3DAE85d
scrollbarSlider.hoverBackground#D3DAE87d
selection.background#618CF232
settings.focusedRowBackground#D3DAE809
settings.focusedRowBorder#D3DAE815
settings.headerForeground#D3DAE8
settings.modifiedItemIndicator#68B1E8
settings.rowHoverBackground#D3DAE804
sideBar.background#161D2B
sideBar.border#111520
sideBar.dropBackground#D3DAE820
sideBar.foreground#D3DAE8
sideBarSectionHeader.background#161D2B
sideBarSectionHeader.border#D3DAE81a
sideBarSectionHeader.foreground#D3DAE8
sideBarTitle.foreground#D3DAE8
statusBar.background#4DC7FF
statusBar.border#ffffff16
statusBar.debuggingBackground#E4AFFE
statusBar.debuggingBorder#ffffff16
statusBar.debuggingForeground#000000A0
statusBar.foreground#0000009E
statusBar.noFolderBackground#141A29
statusBar.noFolderBorder#ffffff16
statusBar.noFolderForeground#D3DAE8
statusBarItem.activeBackground#00000020
statusBarItem.hoverBackground#00000010
statusBarItem.prominentBackground#0000002B
statusBarItem.prominentForeground#000000
statusBarItem.remoteBackground#5991FF
statusBarItem.remoteBorder#ffffff16
statusBarItem.remoteForeground#000000A0
statusBarItem.warningBackground#FAB38E
statusBarItem.warningBorder#ffffff16
statusBarItem.warningForeground#000000A0
tab.activeBackground#273447
tab.activeBorder#4DC7FF
tab.activeForeground#4DC7FF
tab.border#00000000
tab.hoverBackground#00000000
tab.hoverForeground#4DC7FF
tab.inactiveBackground#1D2435
tab.inactiveForeground#8F9EB8
tab.unfocusedActiveBackground#21293D
tab.unfocusedActiveBorder#8F9EB8
tab.unfocusedActiveForeground#8F9EB8
tab.unfocusedHoverForeground#8F9EB8
tab.unfocusedInactiveForeground#515B73
terminal.ansiBlack#000000
terminal.ansiBlue#6ED0FA
terminal.ansiBrightBlack#63708C
terminal.ansiBrightBlue#73D5FF
terminal.ansiBrightCyan#95DDE6
terminal.ansiBrightGreen#70CC92
terminal.ansiBrightMagenta#EFBFFF
terminal.ansiBrightRed#F27985
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#F7DD8D
terminal.ansiCyan#90D7E0
terminal.ansiGreen#70CC92
terminal.ansiMagenta#EAB9FA
terminal.ansiRed#ED7480
terminal.ansiWhite#D2DDFA
terminal.ansiYellow#F2D988
terminal.background#161D2B
terminal.dropBackground#D3DAE820
terminal.foreground#EDEFFC
terminal.selectionBackground#80A6FF1D
textLink.activeForeground#4AB5E6
textLink.foreground#4DC7FF
titleBar.activeBackground#192030
titleBar.activeForeground#D3DAE8
titleBar.border#070B14
titleBar.inactiveBackground#1D2435
titleBar.inactiveForeground#8F9EB8
toolbar.activeBackground#ffffff24
toolbar.hoverBackground#ffffff14
tree.indentGuidesStroke#D3DAE825
walkThrough.embeddedEditorBackground#422B3A
welcomePage.buttonBackground#00000024
welcomePage.buttonHoverBackground#ffffff1A
welcomePage.tileBackground#00000024
welcomePage.tileHoverBackground#7ACDE628
widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#EDEFFC	—
source	#EDEFFC	—
meta.brace.curly, meta.brace.round, meta.brace.square, meta.block, meta.structure.dictionary, punctuation.section, punctuation.definition.block, punctuation.definition.parameters, meta.var.expr punctuation.definition.binding-pattern, meta.var.expr meta.object-binding-pattern-variable, meta.var.expr meta.object-binding-pattern-variable, punctuation.definition.arguments, punctuation.definition.inheritance, punctuation.definition.list, punctuation.parenthesis, punctuation.definition.dict, meta.function.decorator meta.function-call punctuation.definition.arguments	#4DC7FF	—
meta.block meta.jsx.children	#EDEFFC	—
comment	#63708C	italic
string, constant.other.symbol, constant.character.format.placeholder	#E8A3FE	—
punctuation.definition.string, punctuation.support.type.property-name, punctuation.definition.string string.quoted.single	#4DC7FF	—
string.regexp	#E8A3FE	—
constant.character, constant.other, punctuation.definition.group.regexp	#84F5E5	—
constant.character.escape.backslash.regexp	#FF8FEC	—
keyword.control.anchor.regexp	—	—
punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.language.null, constant.language.undefined, constant.language.go, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan	#FF8FEC	—
variable	#EDEFFC	—
variable.member	#4DC7FF	—
variable.language	#5FE8FA	italic
storage	#4DC7FF	—
keyword	#4DC7FF	—
keyword.operator, text.xml meta.tag.xml, text.html.derivative punctuation.separator, text.html.dust punctuation.separator	#4DC7FF	—
punctuation.separator, punctuation.terminator, meta.delimiter.comma	#4DC7FF	—
punctuation.accessor	#4DC7FF	—
source.java storage.type, source.haskell storage.type, source.c storage.type, meta.type.parameters	#4DC7FF	—
entity.other.inherited-class	#5FE8FA	—
storage.type.function	#4DC7FF	—
source.java storage.type.primitive	#5FE8FA	—
meta.function entity.name.function, entity.name.function.member, meta.function-call entity.name.function, entity.name.function	#37B9F2	—
variable.parameter, meta.parameter, meta.parameters punctuation.definition.binding-pattern	#BF81FC	italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#37B9F2	—
support.function, support.macro	#37B9F2	italic
entity.name.import, entity.name.package	#E8A3FE	—
entity.name.type, storage.type.cs	#5FE8FA	—
support	#5FE8FA	—
entity.name.tag, meta.tag.sgml	#8FFFB8	—
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property	#5991FF	—
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs	#5991FF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#4DC7FF
entity.other.attribute-name	#37B9F2	—
support.constant	#5FE8FA	italic
support.type, support.class, source.go storage.type	#5FE8FA	—
support.type.primitive, support.type.builtin	#8FFFB8	—
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.function.decorator punctuation.definition.arguments, meta.function.decorator support.type, meta.function.decorator entity.name.function.decorator, meta.function.decorator entity.name.function.decorator punctuation.separator, storage.type.annotation, entity.name.class.decorator, keyword.operator.decorator, punctuation.definition.decorator	#FAE3A5	italic
invalid	#FF6696	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#38BDF8E6	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#4DC7FF	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#63708C	—
support.type.property-name	#5FE8FA	normal
constant.numeric.line-number.find-in-files - match	#63708C	—
constant.numeric.line-number.match	#4DC7FF	—
entity.name.filename.find-in-files	#E8A3FE	—
message.error	#ff3333	—
markup.heading, markup.heading entity.name	#E8A3FE	bold
markup.underline.link, string.other.link	#5FE8FA	—
markup.italic	#4DC7FF	italic
markup.bold	#4DC7FF	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#63708C	—
markup.quote	#FF80C4	italic
markup.list punctuation.definition.list.begin	#38BDF8E6	—
markup.inserted	#2DD4BF	—
markup.changed	#5798D9	—
markup.deleted	#FB7185	—
markup.strike	#ffe6b3	—
markup.table	#5FE8FA	—
text.html.markdown markup.inline.raw	#4DC7FF	—
text.html.markdown meta.dummy.line-break	#63708C	—
punctuation.definition.markdown	#63708C	—
constant.language, keyword.control, keyword.operator.expression, keyword.other, keyword.operator.new, entity.other.attribute-name, storage, storage.type, keyword.generator.asterisk, meta.function keyword.operator, punctuation.accessor, keyword.operator	—	—
entity.other.attribute-name	—	italic
entity.name.function, variable.parameter, markup.quote, source.elixir .punctuation.binary.elixir, comment, variable.language, punctuation.definition.tag	—	italic
variable.language	—	—
meta.function keyword.operator.quantifier.regexp, meta.function.decorator punctuation.definition.arguments, meta.decorator variable.other	—

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