24 Hours Dark Theme

Name: 24 Hours Dark Theme
Author: Eka Restu D. Putra

Publisher: Eka Restu D. PutraThemes in package: 1

24 Hours is a Dark Theme for Visual Studio Code

Open in VS Code

VS Code preview

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

24 Hours Dark Theme — 24 Hours Dark Theme

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#1B1E1E
activityBar.foreground#d4d4d4
activityBarBadge.background#0063C7
button.background#0063C7
button.foreground#d4d4d4
button.hoverBackground#004AAE
dropdown.background#232B2B
dropdown.border#1B1E1E
dropdown.foreground#d4d4d4
editor.background#1B1E1E
editor.foreground#d4d4d4
editor.selectionBackground#0063c754
editorGroupHeader.tabsBackground#1B1E1E
input.background#1B1E1E
input.foreground#6D7072
progressBar.background#0063C7
sideBar.background#1B1E1E
sideBar.border#232B2B
sideBar.foreground#d4d4d4
sideBarTitle.foreground#d4d4d4
statusBar.background#0063C7
statusBar.debuggingBackground#2e7d32
statusBar.debuggingForeground#eceff1
statusBar.foreground#eceff1
statusBar.noFolderBackground#0063C7
statusBar.noFolderBorder#eceff1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag.html, entity.name.tag.css, entity.other.attribute-name.class.css, keyword.other.unit.percentage.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.deg.css, entity.other.attribute-name.css, meta.selector.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.name.function.js, support.function.js, variable.other.property.js	#ED3B8A	—
keyword.control.at-rule.include.scss, keyword.control.at-rule.extend.scss, keyword.other.important.css, keyword.other.important.scss, keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss, keyword.control.at-rule.import.css, keyword.control.at-rule.import.scss, variable.language.this.js, variable.other.object.property.js, markup.fenced_code.block.markdown, keyword.control.at-rule.function.scss, keyword.control.return.scss	#ED3B8A	italic
keyword.control.conditional.js, entity.name.section.markdown, heading.1.markdown, heading.2.markdown, heading.3.markdown	#ED3B8A	bold
entity.name.tag.reference.scss, meta.link.reference.def.markdown	#DCDE8C	—
support.type.property-name.css, support.type.vendored.property-name.css	#DCDE8C	italic
variable.other.object.js, entity.other.attribute-name.html, punctuation.separator.key-value.html, variable.other.readwrite.js, support.type.property-name.json.comments, support.type.property-name.json	#DCDE8C	bold
string.quoted.double.html, support.constant.property-value.css, meta.property-value.css, constant.numeric.css, variable.scss, constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.scss, string.quoted.single.js, string.quoted.double.js, constant.numeric.decimal.js, string.quoted.double.json.comments, string.quoted.double.json	#34CAA6	—
string.quoted.double.css, string.quoted.single.css, string.quoted.single.scss, string.quoted.double.scss, entity.other.attribute-name.placeholder.css, meta.at-rule.include.scss, markup.list.numbered.markdown, markup.list.unnumbered.markdown, markup.quote.markdown	#34CAA6	italic
entity.name.function.scss, support.function.misc.scss, punctuation.section.function.scss, punctuation.definition.parameters.begin.bracket.round.scss, punctuation.definition.parameters.end.bracket.round.scss, support.type.property-name.media.css, support.type.property-name.media.css, meta.image.inline.markdown, meta.link.inline.markdown, meta.at-rule.function.scss	#0063C7	—
storage.type.function.js, storage.type.js	#0063C7	italic
comment.block.html, comment.line.scss, comment.block.scss, comment.line.double-slash.js, comment.block.js	#6e6e6e	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}!`;
}