Liqube Dark Code

Name: Liqube Dark Code
Author: Liqube

Publisher: LiqubeThemes in package: 1

Fresh dark theme for night coding

GitHub

VS Code preview

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

Liqube Dark Code — Liqube Dark Code

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#21252b
activityBar.dropBackground#21252b
activityBar.foreground#ffffff
activityBarBadge.background#317fbf
activityBarBadge.foreground#ffffff
breadcrumb.background#2C3139
button.background#12609b
dropdown.background#0d1016
dropdown.border#545b69
editor.background#151920
editor.findMatchBackground#4F6591
editor.findMatchHighlightBackground#314365
editor.foreground#abb2bf
editor.lineHighlightBackground#1a1f27
editor.lineHighlightBorder#1a1f27
editor.rangeHighlightBackground#2B3241
editor.selectionBackground#3e4451
editor.wordHighlightBackground#ccccff20
editorBracketHighlight.foreground1#abb2be
editorBracketHighlight.foreground2#737c8c
editorBracketHighlight.foreground3#a0dcef
editorBracketHighlight.foreground4#dcefa0
editorBracketHighlight.foreground5#efa0dc
editorBracketHighlight.foreground6#d294ff
editorBracketHighlight.unexpectedBracket.foreground#ff0000
editorBracketMatch.background#000000
editorBracketMatch.border#000000
editorBracketPairGuide.activeBackground1#9090a0
editorBracketPairGuide.activeBackground2#9090a0
editorBracketPairGuide.activeBackground3#9090a0
editorBracketPairGuide.activeBackground4#9090a0
editorBracketPairGuide.activeBackground5#9090a0
editorBracketPairGuide.activeBackground6#9090a0
editorBracketPairGuide.background1#22263d
editorBracketPairGuide.background2#22263d
editorBracketPairGuide.background3#22263d
editorBracketPairGuide.background4#22263d
editorBracketPairGuide.background5#22263d
editorBracketPairGuide.background6#22263d
editorCursor.foreground#abb2bf
editorError.foreground#c62d42
editorGroup.background#1c1f24
editorGroup.border#080a0f
editorGroupHeader.tabsBackground#1c1f24
editorHint.border#ff0000
editorHoverWidget.background#181a1f
editorHoverWidget.border#545b69
editorIndentGuide.background#3e4451
editorInfo.border#ff0000
editorLineNumber.foreground#3e4451
editorOverviewRuler.border#191b20
editorRuler.foreground#3e4451
editorStickyScroll.background#16191f
editorStickyScroll.border#465266
editorStickyScroll.shadow#1d2026
editorSuggestWidget.background#0d1016
editorSuggestWidget.border#545b69
editorSuggestWidget.selectedBackground#2c313a
editorWarning.foreground#98c379
editorWhitespace.foreground#3e4451
editorWidget.background#21252b
editorWidget.border#ff0000
focusBorder#7f8a9f40
input.background#080a0f
input.border#545b69
inputOption.activeBorder#61afef
inputValidation.errorBackground#c62d42
inputValidation.errorBorder#c62d42
inputValidation.infoBackground#1b659d
inputValidation.infoBorder#1b659d
inputValidation.warningBackground#a86515
inputValidation.warningBorder#a86515
list.activeSelectionBackground#2c3139
list.activeSelectionForeground#d7dae0
list.focusBackground#2c313a
list.hoverBackground#21252B
list.inactiveSelectionBackground#2c3139
menu.border#545b69
menu.separatorBackground#444B59
menubar.selectionBackground#16191F
menubar.selectionBorder#16191F
minimap.background#12161d
notification.background#21252b
notification.errorBackground#c62d42
notification.infoBackground#1b659d
notification.warningBackground#a86515
panel.background#11141a
panel.border#545b69
panel.dropBorder#ff0000
panelStickyScroll.border#8692a6
panelStickyScroll.shadow#1d2026
peekView.border#ff0000
pickerGroup.border#545b69
scrollbarSlider.background#2C3139
sideBar.background#1d2026
sideBarSectionHeader.background#2c3139
sideBarSectionHeader.foreground#ffffffcc
sideBarStickyScroll.background#16191f
sideBarStickyScroll.border#465266
sideBarStickyScroll.shadow#1d2026
statusBar.background#21252b
statusBar.debuggingBackground#21252b
statusBar.foreground#9da5b4
statusBar.noFolderBackground#21252b
statusBarItem.hoverBackground#2c313a
tab.activeBackground#30353f
tab.activeForeground#9da5b4
tab.border#30353f
tab.inactiveBackground#16191F
tab.inactiveForeground#737c8c
textLink.foreground#4eb0f6
titleBar.activeBackground#262a31
titleBar.activeForeground#9da5b4
titleBar.inactiveBackground#21252B
titleBar.inactiveForeground#6b717d
widget.border#545b69
widget.shadow#080a0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#abb2bfff	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#a045e4	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#a045e4	—
entity.name.tag	#b564ea	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#cdb6de	italic
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator	#878d97	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#848A94	italic
support.type.property-name, support.variable, variable	#71a9d7	—
markup.inline.raw, support.constant, support.class	#d2d6db	—
storage.type, support.type, variable.language.this	#abb2bf	italic
constant, keyword.other.unit	#8C929E	—
comment	#5c6370	—
string, constant.character.escape, constant.character, markup.quote, markup.bold, markup.italic	#ea5964	—
string source, text source	—	—
constant.numeric	#ffffff	—
entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, support.function	#ffffff	—
entity.name.class	#ffffff	—
entity.name.tag, storage	—	italic
variable.language	—	italic
entity.name.section, keyword.control, constant.language, punctuation.definition.heading, punctuation.definition.keyword	#98c875	—
punctuation.separator.delimiter, punctuation.terminator.expression, punctuation.section.array.begin, punctuation.section.array.end, keyword.operator, storage.modifier	#657085	—
keyword.operator.logical	#ffffff	—
punctuation.definition.array.begin.bracket.round, punctuation.definition.array.end.bracket.round, punctuation.definition.arguments.begin.bracket.round, punctuation.definition.arguments.end.bracket.round	#ffffff	—
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
comment, markup.italic.markdown, punctuation.definition.italic.markdown	—	italic
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator	#737c8c	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
keyword.control.exception	#E4B227	bold italic
keyword.other.new	#ffffff	italic
entity.name.function.preprocessor.c, variable.parameter.preprocessor.c, meta.preprocessor.macro.c, meta.preprocessor.diagnostic.c, meta.preprocessor.include.c, meta.preprocessor.c, meta.preprocessor.pragma.c, entity.other.attribute-name.pragma.preprocessor.c	#98c379	—
comment.block.preprocessor.if-branch.c, comment.block.preprocessor.if-branch.in-block.c, comment.block.preprocessor.elif-branch.c, comment.block.preprocessor.elif-branch.in-block.c, comment.block.preprocessor.else-branch.c, comment.block.preprocessor.else-branch.in-block.c	#5c6370	—

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