Daybreak Theme

Name: Daybreak Theme
Author: Y-Ysss

Publisher: Y-YsssThemes in package: 1

Daybreak Theme, the simple dark theme for Visual Studio Code.

Open in VS Code GitHub

VS Code preview

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

Daybreak Theme — Daybreak

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.background#1f292e
activityBar.foreground#D4D4D4
activityBarBadge.background#455c67
button.background#455c67
button.hoverBackground#263238
dropdown.border#182329
editor.background#182125
editor.foreground#b2ccd6
editor.hoverHighlightBackground#202d35
editor.lineHighlightBackground#202d35
editor.lineHighlightBorder#182329
editor.selectionBackground#455c67
editor.wordHighlightBackground#455c67
editor.wordHighlightStrongBackground#455c67
editorCursor.foreground#b2ccd6
editorGroup.border#182329
editorGroupHeader.noTabsBackground#263238
editorGroupHeader.tabsBackground#0b1214
editorLineNumber.foreground#455c67
editorSuggestWidget.background#263238
editorSuggestWidget.border#455c67
editorSuggestWidget.selectedBackground#0f2e42
editorWidget.background#182329
focusBorder#455c67
input.background#202d35
input.border#182329
list.activeSelectionBackground#0f2e42
list.focusBackground#0f2e42
list.hoverBackground#202d35
list.inactiveSelectionBackground#1f292e
menu.background#1f292e
menu.selectionBackground#182125
minimapSlider.activeBackground#455c677f
minimapSlider.hoverBackground#455c677f
panel.border#263238
panelTitle.activeBorder#263238
panelTitle.inactiveForeground#455c67
scrollbar.shadow#0b1214
scrollbarSlider.activeBackground#455c67
scrollbarSlider.background#0f171d
scrollbarSlider.hoverBackground#455c67
settings.numberInputBackground#202d35
settings.numberInputBorder#182329
settings.textInputBackground#202d35
settings.textInputBorder#182329
sideBar.background#263238
sideBar.foreground#ececec
statusBar.background#295f9c
statusBar.debuggingBackground#295f9c
statusBar.foreground#ececec
statusBar.noFolderBackground#295f9c
tab.border#263238
tab.inactiveBackground#0b1214
terminal.ansiBlack#263238
terminal.ansiBlue#82aaff
terminal.ansiBrightBlack#65737e
terminal.ansiBrightBlue#82aaff
terminal.ansiBrightCyan#7fcac3
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#f77669
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#b2ccd6
terminal.ansiBrightYellow#ffcc00
terminal.ansiCyan#7fcac3
terminal.ansiGreen#c3e88d
terminal.ansiMagenta#f77669
terminal.ansiRed#fa6981
terminal.ansiWhite#b2ccd6
terminal.ansiYellow#ffcc00
titleBar.activeBackground#1f292e
titleBar.inactiveBackground#263238

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7F7F7F	italic
variable	#D4D4D4	—
keyword, storage.type, storage.modifier	#C594C5	—
keyword.operator, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#5FB3B3	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#EB606B	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level	#6699CC	—
support.other.variable, string.other.link	#FAC863	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#F99157	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#99C794	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#ECC575	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#e15ae1	—
variable.language	#E15A60	italic
entity.name.method.js	#D8DEE9	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#D8DEE9	—
entity.other.attribute-name	#BB80B3	—
markup.inserted	#99C794	—
markup.deleted	#E15A60	—
markup.changed	#BB80B3	—
string.regexp	#5FB3B3	—
constant.character.escape	#5FB3B3	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#AB7967	—
entity.name.filename.find-in-files	#99C794	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#6699CC	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E15A60	italic
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
source.js entity.other.attribute-name.js	—	italic
text.html.basic entity.other.attribute-name.html	—	italic

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