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 - Day

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#469CC21D
activityBar.activeBorder#48A2C9
activityBar.background#F8FAFC
activityBar.border#CBD3D9
activityBar.foreground#48A2C9
activityBar.inactiveForeground#909FAD
activityBarBadge.background#48A2C9
activityBarBadge.foreground#CCF0FF
badge.background#469CC21D
badge.foreground#48A2C9
banner.background#869FB819
banner.foreground#6B7682
banner.iconForeground#6B7682
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#F8FAFC
breadcrumb.focusForeground#6B7682
breadcrumb.foreground#909FAD
breadcrumbPicker.background#FAFBFC
button.background#48A2C9
button.foreground#000000E0
button.hoverBackground#3D87A8
button.secondaryBackground#DADEE3
button.secondaryForeground#000000A0
button.secondaryHoverBackground#C7CCD1
checkbox.background#E6EBF0
checkbox.border#00000000
checkbox.foreground#48A2C9
commandCenter.activeBackground#00000010
commandCenter.activeForeground#000000
debugExceptionWidget.background#EFEAED
debugExceptionWidget.border#CF3465
debugIcon.breakpointCurrentStackframeForeground#B31B4F85
debugIcon.breakpointDisabledForeground#6B7682
debugIcon.breakpointForeground#D9628A
debugIcon.breakpointStackframeForeground#1BB367
debugIcon.breakpointUnverifiedForeground#6B7682
debugTokenExpression.boolean#994D8C
debugTokenExpression.error#ff3333
debugTokenExpression.name#325394
debugTokenExpression.number#994D8C
debugTokenExpression.string#744682
debugTokenExpression.value#687685
debugToolBar.background#F8FAFC
debugToolBar.border#F8FAFC
debugView.exceptionLabelBackground#CF3465
debugView.exceptionLabelForeground#FFE6EA
debugView.stateLabelBackground#00000009
debugView.stateLabelForeground#6B7682
debugView.valueChangedHighlight#D14F9380
descriptionForeground#909FAD
diffEditor.diagonalFill#6B768218
diffEditor.insertedLineBackground#1A9C8B17
diffEditor.insertedTextBackground#1A9C8B17
diffEditor.removedLineBackground#C22B4217
diffEditor.removedTextBackground#C22B4217
dropdown.background#E6EBF0
dropdown.border#00000000
dropdown.foreground#6B7682
dropdown.listBackground#E6EBF0
editor.background#F0F4F7
editor.findMatchBackground#76849320
editor.findMatchHighlightBackground#6C809414
editor.findRangeHighlightBackground#6C809409
editor.focusedStackFrameHighlightBackground#0ACC6C11
editor.foreground#6B7682
editor.hoverHighlightBackground#4D6D8C12
editor.inactiveSelectionBackground#48A2C91E
editor.lineHighlightBackground#00000007
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#00000007
editor.selectionBackground#48A2C93E
editor.selectionHighlightBackground#00000008
editor.snippetTabstopHighlightBackground#626E7A10
editor.stackFrameHighlightBackground#CC0A4C16
editor.wordHighlightBackground#6C809414
editor.wordHighlightStrongBackground#6C809416
editorBracketHighlight.foreground1#1EA6B8F1
editorBracketHighlight.foreground2#355594F1
editorBracketHighlight.foreground3#0075ABF1
editorBracketHighlight.foreground4#7D4FABF1
editorBracketHighlight.unexpectedBracket.foreground#B52D43
editorBracketMatch.background#6C809422
editorBracketMatch.border#00000000
editorBracketPairGuide.activeBackground1#1EA6B8F1
editorBracketPairGuide.activeBackground2#355594F1
editorBracketPairGuide.activeBackground3#0075ABF1
editorBracketPairGuide.activeBackground4#7D4FABF1
editorCodeLens.foreground#6B768266
editorCursor.foreground#48A2C9
editorError.foreground#CF3465
editorGhostText.foreground#6B768250
editorGroup.border#CBD3D9
editorGroup.dropBackground#6B768231
editorGroupHeader.border#E5E9ED
editorGroupHeader.noTabsBackground#F3F4F5
editorGroupHeader.tabsBackground#F8FAFC
editorGroupHeader.tabsBorder#E5E9ED
editorGutter.addedBackground#1A9C8BB3
editorGutter.background#F0F4F7
editorGutter.deletedBackground#C24F61B3
editorGutter.modifiedBackground#1A5F94B3
editorHint.foreground#6B7682
editorHoverWidget.background#FAFBFC
editorHoverWidget.border#00000009
editorHoverWidget.foreground#6B7682
editorHoverWidget.statusBarBackground#FAFBFC
editorIndentGuide.activeBackground#909FAD30
editorIndentGuide.background#6B768209
editorInfo.foreground#2D88B5
editorInlayHint.background#7D4FAB1A
editorInlayHint.foreground#7D4FABC1
editorLightBulb.foreground#CF6A34
editorLightBulbAutoFix.foreground#2D88B5
editorLineNumber.activeForeground#6B7682B4
editorLineNumber.foreground#6B768255
editorLink.activeForeground#3fa6d9
editorMarkerNavigation.background#F3F4F5
editorMarkerNavigationError.background#CF3465
editorMarkerNavigationError.headerBackground#EEDBE4
editorMarkerNavigationInfo.background#2D88B5
editorMarkerNavigationInfo.headerBackground#D9E5EF
editorMarkerNavigationWarning.background#CF6A34
editorMarkerNavigationWarning.headerBackground#EDE2DF
editorOverviewRuler.addedForeground#1A9C8BD3
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#C24F61D3
editorOverviewRuler.errorForeground#CF3465D3
editorOverviewRuler.findMatchForeground#76849380
editorOverviewRuler.incomingContentForeground#84CF9D7a
editorOverviewRuler.infoForeground#2D88B5D3
editorOverviewRuler.modifiedForeground#1A5F94D3
editorOverviewRuler.rangeHighlightForeground#00000016
editorOverviewRuler.selectionHighlightForeground#0000004F
editorOverviewRuler.unicodeForeground#CF8634D3
editorOverviewRuler.warningForeground#CF6A34D3
editorRuler.foreground#6B768209
editorStickyScrollHover.background#EEF0F1
editorSuggestWidget.background#FAFBFC
editorSuggestWidget.border#00000009
editorSuggestWidget.foreground#909FAD
editorSuggestWidget.highlightForeground#48A2C9
editorSuggestWidget.selectedBackground#909FAD30
editorSuggestWidgetStatus.foreground#909FAD
editorUnicodeHighlight.border#CF863466
editorUnnecessaryCode.opacity#00000070
editorWarning.foreground#CF6A34
editorWhitespace.foreground#6B768216
editorWidget.background#F8FAFC
editorWidget.border#F8FAFC
editorWidget.foreground#6B7682
editorWidget.resizeBorder#48A2C9
errorForeground#CF3465
extensionButton.prominentBackground#DADEE3
extensionButton.prominentForeground#000000A0
extensionButton.prominentHoverBackground#C7CCD1
focusBorder#6A86BD32
foreground#6B7682
gitDecoration.addedResourceForeground#1A9C8B90
gitDecoration.conflictingResourceForeground#9C251A
gitDecoration.deletedResourceForeground#C24F61
gitDecoration.ignoredResourceForeground#6B7682A4
gitDecoration.modifiedResourceForeground#1A5F94
gitDecoration.renamedResourceForeground#2D941B
gitDecoration.stageDeletedResourceForeground#C24F6190
gitDecoration.stageModifiedResourceForeground#1A5F9490
gitDecoration.untrackedResourceForeground#1A9C8B
gitlens.gutterBackgroundColor#F0F4F7
gitlens.gutterForegroundColor#909FAD
gitlens.gutterUncommittedForegroundColor#6B7682
gitlens.lineHighlightBackgroundColor#2775C415
gitlens.lineHighlightOverviewRulerColor#2775C4C3
gitlens.trailingLineForegroundColor#6B768240
icon.foreground#6B7682
input.background#E6EBF0
input.border#0000000D
input.foreground#6B7682
input.placeholderForeground#909FAD
inputOption.activeBackground#00000018
inputOption.hoverBackground#00000010
inputValidation.errorBackground#EEDBE4
inputValidation.errorBorder#CF3465
inputValidation.errorForeground#6B7682
inputValidation.infoBackground#D9E5EF
inputValidation.infoBorder#2D88B5
inputValidation.infoForeground#6B7682
inputValidation.warningBackground#EDE2DF
inputValidation.warningBorder#CF6A34
inputValidation.warningForeground#6B7682
keybindingLabel.background#00000008
keybindingLabel.border#00000009
keybindingLabel.bottomBorder#00000020
list.activeSelectionBackground#6B768219
list.activeSelectionForeground#000000
list.dropBackground#6B768231
list.errorForeground#CF3465
list.filterMatchBackground#76849320
list.focusBackground#6B768223
list.focusForeground#000000
list.focusOutline#00000000
list.highlightForeground#48A2C9
list.hoverBackground#6B768208
list.hoverForeground#000000
list.inactiveFocusBackground#ffffff60
list.inactiveSelectionBackground#6B768211
list.inactiveSelectionForeground#000000
list.invalidItemForeground#CF3465
list.warningForeground#CF6A34
listFilterWidget.background#F8FAFC
listFilterWidget.noMatchesOutline#F57A8E
listFilterWidget.outline#0000000A
menu.background#FAFBFC
menu.border#6B768215
menu.foreground#6B7682C0
menu.selectionBackground#909FAD30
menu.selectionForeground#000000
menu.separatorBackground#6B768215
menubar.selectionBackground#909FAD20
menubar.selectionForeground#FFFFFF
merge.currentContentBackground#82C7C71a
merge.currentHeaderBackground#82C7C72a
merge.incomingContentBackground#84CF9D1a
merge.incomingHeaderBackground#84CF9D2a
mergeEditor.change.background#17C1E31a
mergeEditor.change.word.background#17C1E32a
mergeEditor.conflict.handled.minimapOverViewRuler#1A5F94
mergeEditor.conflict.handledFocused.border#1A5F94
mergeEditor.conflict.handledUnfocused.border#1A5F943a
mergeEditor.conflict.unhandled.minimapOverViewRuler#E32817
mergeEditor.conflict.unhandledFocused.border#E32817
mergeEditor.conflict.unhandledUnfocused.border#E328173a
minimap.background#F0F4F7
minimap.errorHighlight#CF3465B3
minimap.findMatchHighlight#768493E6
minimap.selectionHighlight#596D804D
minimap.unicodeHighlight#CF8634B3
minimap.warningHighlight#CF6A34B3
minimapSlider.activeBackground#6B76824d
minimapSlider.background#6B76821a
minimapSlider.hoverBackground#6B768233
notificationCenter.border#00000000
notificationCenterHeader.background#FAFBFC
notificationCenterHeader.foreground#6B7682
notificationLink.foreground#3fa6d9
notifications.background#FAFBFC
notifications.border#6B768230
notifications.foreground#6B7682
notificationToast.border#C1C8CF
panel.background#EBF0F5
panel.border#CBD3D9
panel.dropBorder#48A2C9
panelSection.dropBackground#6B768231
panelTitle.activeBorder#48A2C9
panelTitle.activeForeground#6B7682
panelTitle.inactiveForeground#909FAD
peekView.border#909FAD
peekViewEditor.background#E8EFF5
peekViewEditor.matchHighlightBackground#76849322
peekViewEditorGutter.background#E8EFF5
peekViewResult.background#EBF0F5
peekViewResult.fileForeground#6B7682
peekViewResult.lineForeground#6B7682
peekViewResult.matchHighlightBackground#76849330
peekViewResult.selectionBackground#6B768212
peekViewResult.selectionForeground#000000
peekViewTitle.background#F8FAFC
peekViewTitleDescription.foreground#6B7682A7
peekViewTitleLabel.foreground#6B7682
pickerGroup.border#6B768215
pickerGroup.foreground#909FAD
problemsErrorIcon.foreground#CF3465
problemsInfoIcon.foreground#2D88B5
problemsWarningIcon.foreground#CF6A34
progressBar.background#994D8C
quickInput.background#FAFBFC
quickInput.foreground#6B7682
quickInputTitle.background#FAFBFC
sash.hoverBorder#6B768235
scrollbar.shadow#909FAD60
scrollbarSlider.activeBackground#6B76828d
scrollbarSlider.background#6B76824d
scrollbarSlider.hoverBackground#6B76826d
selection.background#4D6D8C22
settings.focusedRowBackground#6B768209
settings.focusedRowBorder#6B768215
settings.headerForeground#6B7682
settings.modifiedItemIndicator#1A5F94
settings.rowHoverBackground#6B768204
sideBar.background#EBF0F5
sideBar.border#CBD3D9
sideBar.dropBackground#6B768231
sideBar.foreground#6B7682
sideBarSectionHeader.background#EBF0F5
sideBarSectionHeader.border#CBD3D96f
sideBarSectionHeader.foreground#6B7682
sideBarTitle.foreground#6B7682
snippetFinalTabstopHighlightBackground#626E7A1D
statusBar.background#48A2C9
statusBar.border#00000016
statusBar.debuggingBackground#955AB3
statusBar.debuggingBorder#00000016
statusBar.debuggingForeground#ffffffC0
statusBar.foreground#000000E0
statusBar.noFolderBackground#E6ECF2
statusBar.noFolderBorder#00000010
statusBar.noFolderForeground#6B7682
statusBarItem.activeBackground#00000020
statusBarItem.hoverBackground#00000010
statusBarItem.prominentBackground#0000002B
statusBarItem.prominentForeground#ffffff
statusBarItem.remoteBackground#325394
statusBarItem.remoteBorder#00000016
statusBarItem.remoteForeground#ffffffC0
statusBarItem.warningBackground#CF6A34
statusBarItem.warningBorder#00000016
statusBarItem.warningForeground#ffffffC0
tab.activeBackground#E5F1F6
tab.activeBorder#48A2C9
tab.activeForeground#48A2C9
tab.border#00000000
tab.hoverBackground#00000000
tab.hoverForeground#48A2C9
tab.inactiveBackground#F8FAFC
tab.inactiveForeground#909FAD
tab.unfocusedActiveBackground#ECF2F5
tab.unfocusedActiveBorder#909FAD
tab.unfocusedActiveForeground#909FAD
tab.unfocusedHoverForeground#909FAD
tab.unfocusedInactiveForeground#B1BFCC
terminal.ansiBlack#000000
terminal.ansiBlue#2EA0D1
terminal.ansiBrightBlack#94A2B0
terminal.ansiBrightBlue#36A6D6
terminal.ansiBrightCyan#4CB2BF
terminal.ansiBrightGreen#00B342
terminal.ansiBrightMagenta#B87ACC
terminal.ansiBrightRed#F07186
terminal.ansiBrightWhite#DDE7F0
terminal.ansiBrightYellow#F2C549
terminal.ansiCyan#46ACBA
terminal.ansiGreen#00B342
terminal.ansiMagenta#B375C7
terminal.ansiRed#EB6C81
terminal.ansiWhite#C7D4E0
terminal.ansiYellow#EDC045
terminal.background#F0F4F7
terminal.dropBackground#6B768231
terminal.foreground#687685
terminal.selectionBackground#596D801a
textLink.activeForeground#3D87A8
textLink.foreground#48A2C9
titleBar.activeBackground#F0F5FA
titleBar.activeForeground#6B7682
titleBar.border#909FAD
titleBar.inactiveBackground#F8FAFC
titleBar.inactiveForeground#909FAD
toolbar.activeBackground#00000018
toolbar.hoverBackground#00000010
tree.indentGuidesStroke#6B768225
walkThrough.embeddedEditorBackground#EDEDED
welcomePage.buttonBackground#00000010
welcomePage.buttonHoverBackground#0000001A
welcomePage.tileBackground#00000010
welcomePage.tileHoverBackground#4CA7C224
widget.shadow#909FAD60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#687685	—
source	#687685	—
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	#48A2C9	—
meta.block meta.jsx.children	#687685	—
comment	#9FB3C7	italic
string, constant.other.symbol, constant.character.format.placeholder	#744682	—
punctuation.definition.string, punctuation.support.type.property-name, punctuation.definition.string string.quoted.single	#48A2C9	bold
string.regexp	#744682	—
constant.character, constant.other, punctuation.definition.group.regexp	#00A890	—
constant.character.escape.backslash.regexp	#994D8C	—
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	#994D8C	—
variable	#687685	—
variable.member	#48A2C9	—
storage	#48A2C9	—
keyword	#48A2C9	—
keyword.operator, text.xml meta.tag.xml, text.html.derivative punctuation.separator, text.html.dust punctuation.separator	#48A2C9	—
punctuation.separator, punctuation.terminator, meta.delimiter.comma	#48A2C9	—
punctuation.accessor	#48A2C9	—
source.java storage.type, source.haskell storage.type, source.c storage.type, meta.type.parameters	#48A2C9	—
entity.other.inherited-class	#1AAABD	—
storage.type.function	#48A2C9	bold
source.java storage.type.primitive	#1AAABD	—
meta.function entity.name.function, entity.name.function.member, meta.function-call entity.name.function, entity.name.function	#0070A1	—
variable.parameter, meta.parameter, meta.parameters punctuation.definition.binding-pattern	#7B4BAB	italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#0070A1	—
support.function, support.macro	#0070A1	italic
entity.name.import, entity.name.package	#744682	—
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	#325394	—
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs	#325394	—
entity.name.type, storage.type.cs	#1AAABD	—
support	#1AAABD	—
entity.name.tag, meta.tag.sgml	#21AD54	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#48A2C9
entity.other.attribute-name	#0070A1	—
support.constant	#1AAABD	italic
support.type, support.class, source.go storage.type	#1AAABD	—
support.type.primitive, support.type.builtin	#21AD54	—
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	#AD8E34	italic
invalid	#CF3465	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#0070A1	—
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	#48A2C9	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#9FB3C7	—
support.type.property-name	#1AAABD	normal
constant.numeric.line-number.find-in-files - match	#9FB3C7	—
constant.numeric.line-number.match	#48A2C9	—
entity.name.filename.find-in-files	#744682	—
message.error	#ff3333	—
variable.language	#1AAABD	italic
markup.heading, markup.heading entity.name	#744682	bold
markup.underline.link, string.other.link	#1AAABD	—
markup.italic	#48A2C9	italic
markup.bold	#48A2C9	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#9FB3C7	bold
markup.quote	#9E3C78	italic
markup.list punctuation.definition.list.begin	#0070A1	—
markup.inserted	#1A9C8B	—
markup.changed	#77a8d9	—
markup.deleted	#C24F61	—
markup.strike	#D1B170	—
markup.table	#1AAABD	—
text.html.markdown markup.inline.raw	#48A2C9	—
text.html.markdown meta.dummy.line-break	#9FB3C7	—
punctuation.definition.markdown	#9FB3C7	—
constant.language, keyword.control, keyword.operator.expression, keyword.other, keyword.operator.new, storage, storage.type, keyword.generator.asterisk, meta.function keyword.operator, punctuation.accessor, keyword.operator	—	bold
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	—	bold
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}!`;
}