Caracal Dark

Name: Caracal Dark
Author: Caracal Theme

Publisher: Caracal ThemeThemes in package: 1

A dark Visual Studio Theme inspired by the great Horizon One theme but adding some personal taste customizations

GitHub

VS Code preview

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

Caracal Dark — Caracal Dark

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#1C1E26
activityBar.dropBackground#6C6F9380
activityBar.foreground#D5D8DAB3
activityBarBadge.background#E95378
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#D5D8DA
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#1C1E26
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#232530
dropdown.listBackground#2E303E
editor.background#1C1E26
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#2E303E4D
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#2E303EB3
editor.selectionHighlightBackground#6C6F934D
editor.wordHighlightBackground#6C6F9380
editor.wordHighlightStrongBackground#6C6F9380
editorBracketHighlight.foreground1#c8c8c8
editorBracketHighlight.foreground2#c8c8c8
editorBracketHighlight.foreground3#c8c8c8
editorBracketHighlight.unexpectedBracket.foreground#c8c8c8
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#1C1E26
editorCursor.foreground#E95378
editorError.foreground#F43E5C
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#1C1E26
editorGutter.addedBackground#09F7A0B3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#2E303E
editorIndentGuide.background#2E303E80
editorLineNumber.activeForeground#D5D8DA80
editorLineNumber.foreground#D5D8DA1A
editorOverviewRuler.addedForeground#09F7A080
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#D5D8DA80
editorOverviewRuler.deletedForeground#F43E5C80
editorOverviewRuler.errorForeground#F43E5CE6
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#21BFC280
editorOverviewRuler.warningForeground#27D79780
editorRuler.foreground#6C6F934D
editorSuggestWidget.highlightForeground#E95378
editorWarning.foreground#27D797B3
editorWidget.background#232530
editorWidget.border#232530
errorForeground#F43E5C
extensionButton.prominentBackground#E95378
extensionButton.prominentHoverBackground#E9436D
focusBorder#1A1C23
foreground#D5D8DA
gitDecoration.addedResourceForeground#ff6b6b
gitDecoration.deletedResourceForeground#F43E5C
gitDecoration.ignoredResourceForeground#D5D8DA4D
gitDecoration.modifiedResourceForeground#FAB38E
gitDecoration.untrackedResourceForeground#ff6b6b
input.background#2E303E
inputOption.activeBorder#E9436D80
inputValidation.errorBackground#F43E5C80
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#2E303E80
list.activeSelectionForeground#D5D8DA
list.dropBackground#6C6F9380
list.errorForeground#F43E5CE6
list.focusBackground#2E303E80
list.focusForeground#D5D8DA
list.highlightForeground#E95378
list.hoverBackground#2E303E80
list.hoverForeground#D5D8DA
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#D5D8DA
list.warningForeground#27D797B3
panelTitle.activeBorder#E95378
peekView.border#1A1C23
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#6C6F9380
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#6C6F9380
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#232530
pickerGroup.foreground#E95378E6
progressBar.background#E95378
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#6C6F9380
scrollbarSlider.background#6C6F931A
scrollbarSlider.hoverBackground#6C6F934D
selection.background#6C6F9380
sideBar.background#1d1f26
sideBar.dropBackground#6C6F934D
sideBar.foreground#D5D8DA80
sideBarSectionHeader.background#1C1E26
sideBarSectionHeader.foreground#D5D8DAB3
statusBar.background#1C1E26
statusBar.debuggingBackground#FAB38E
statusBar.debuggingForeground#06060C
statusBar.foreground#D5D8DA80
statusBar.noFolderBackground#1C1E26
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#E95378
tab.border#1C1E2600
tab.inactiveBackground#1C1E26
terminal.ansiBlue#26BBD9
terminal.ansiBrightBlue#3FC4DE
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#3FDAA4
terminal.ansiBrightMagenta#F075B5
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#FBC3A7
terminal.ansiCyan#59E1E3
terminal.ansiGreen#29D398
terminal.ansiMagenta#EE64AC
terminal.ansiRed#E95678
terminal.ansiYellow#FAB795
terminal.foreground#D5D8DA
terminal.selectionBackground#6C6F934D
terminalCursor.background#D5D8DA
terminalCursor.foreground#6C6F9380
textLink.activeForeground#E9436D
textLink.foreground#E95378
titleBar.activeBackground#1C1E26
titleBar.inactiveBackground#1C1E26
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#BBBBBB4D	italic
constant	#F09483E6	—
constant.character.escape	#25B0BCE6	—
entity.name	#FAC29AE6	—
entity.name.function	#efc364	—
meta.class.body	#dfff5e	—
entity.name.tag	#E95678E6	normal
entity.name.type, storage.type.cs	#ffe7e2e6	—
entity.other.attribute-name	#F09483E6	normal
entity.other.inherited-class	#FAB795E6	—
entity.other.attribute-name.id	#25B0BCE6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
meta.function.parameters	#8ce9e3	—
entity.name.variable	#f1c1c1	—
keyword	#ff9c4a	normal
keyword.operator	#de9a76	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#e2634f	—
keyword.other.unit	#F09483E6	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#E95678E6	—
markup.bold	#B877DBE6	bold
markup.italic	#25B0BCE6	italic
markup.inline.raw, markup.fenced_code.block	#F09483E6	—
markup.underline.link	#FAB795E6	—
storage	#df9042	normal
string.quoted, string.template	#d4716f	—
support.function.constructor	#fda7d5	—
string.regexp	#F09483E6	—
string.other.link	#F09483E6	—
support, meta.function.parameters, variable.parameter.function.language.special.self	#FAC29AE6	—
support.function	#9cc29be6	—
support.variable	#E95678E6	—
support.type.property-name, meta.object-literal.key	#E95678E6	—
support.type.property-name.css	#BBBBBB	—
variable.other	#d1d2cd	—
variable.language	#FAC29AE6	italic
variable.parameter	#d1d2cd	italic
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag	#E95678B3	normal
punctuation.separator	#BBBBBB	—
punctuation.definition.template-expression	#B877DBE6	—
punctuation.section.embedded	#db7777e6	—
meta.function-call.arguments	#c8a6a1	—
punctuation.terminator.expression	#F09483E6	—
source	#e8e1e1e6	—
source.sql	#ffffffe6	—
support.other.namespace	#ffe6d5e6	—
meta.function-call.generic	#ffd768e6	—

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