CurlyBraces Dark

Name: CurlyBraces Dark
Author: Nikhar Savaliya

Publisher: Nikhar SavaliyaThemes in package: 1

Dark theme for VS code.

GitHub

VS Code preview

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

CurlyBraces Dark — Curly Braces 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.activeBackground#ffffff15
activityBar.activeBorder#333
activityBar.activeFocusBorder#333
activityBar.background#1b1b1b
activityBar.foreground#AE81FFea
activityBar.inactiveForeground#ffffff
activityBarBadge.background#202020
activityBarBadge.foreground#AE81FF
badge.background#333
badge.foreground#6AA092
breadcrumb.activeSelectionForeground#AE81FF
breadcrumb.background#202020
breadcrumb.focusForeground#AE81FFea
breadcrumbPicker.background#202020
button.background#333
editor.background#202020
editor.findMatchBackground#404040c2
editor.findMatchHighlightBackground#404040c2
editor.foldBackground#1b1b1b
editor.foreground#eeffff
editor.lineHighlightBackground#40404035
editor.selectionBackground#404040c2
editor.selectionHighlightBackground#404040c2
editorBracketHighlight.foreground1#eee
editorBracketHighlight.foreground2#AE81FF
editorBracketHighlight.foreground3#f5f506
editorBracketHighlight.foreground4#30d802
editorBracketHighlight.foreground5#ff7e7e
editorBracketHighlight.foreground6#eee
editorGutter.background#20202088
editorSuggestWidget.background#202020
editorSuggestWidget.focusHighlightForeground#6AA092
editorSuggestWidget.foreground#fff
editorSuggestWidget.highlightForeground#6AA092
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#AE81FF
extensionButton.background#333333d9
extensionButton.hoverBackground#5454549e
extensionButton.separator#5454549e
focusBorder#ad81ff35
input.background#333
input.border#00000000
input.foreground#ffffff
list.activeSelectionBackground#202020
list.activeSelectionForeground#AE81FF
list.hoverBackground#333
list.inactiveSelectionBackground#333
menu.background#202020
menu.selectionBackground#333
panel.background#202020
scrollbarSlider.activeBackground#6AA092
scrollbarSlider.hoverBackground#6aa09275
settings.checkboxBackground#333
settings.dropdownBackground#333
settings.focusedRowBackground#33333362
settings.focusedRowBorder#ad81ff57
settings.numberInputBackground#333
settings.settingsHeaderHoverForeground#6AA092
settings.textInputBackground#333
sideBar.background#202020
sideBarTitle.foreground#ffffff
statusBar.background#333
tab.activeBackground#202020
tab.activeBorder#AE81FF
tab.inactiveBackground#222
terminal.foreground#dbe3e7
titleBar.activeBackground#202020
toolbar.activeBackground#ad81ff35
toolbar.hoverBackground#ad81ff29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#676f7d	—
string, string.template	#6AA092	—
constant.numeric	#FC3E83C0	—
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded	#c678dd	—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace	#abb2bf	—
constant.language	#FC3E83C0	—
constant.character, constant.other	#FC3E83C0	—
variable.language	#FC3E83C0	—
keyword, keyword.operator.logical, keyword.operator.constructor	#FC3E83C0	—
keyword.operator	#CFCFC2A1	—
storage	#AE81FF	—
storage.type	#AE81FF	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#FFCB6B	—
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block	#CFCFCF	—
variable.other, variable.other.property, variable.other.block	#CFCFCF	—
entity.other.inherited-class	#CFCFCF	—
storage.modifier.import, storage.modifier.package	#61afef	—
entity.name.function, support.function	#FFCB6B	—
variable.parameter, entity.name.variable.parameter, parameter.variable	#FC3E83C0	italic
entity.name.function-call	#abb2bf	—
function.support.builtin, function.support.core	#98c379	—
entity.name.tag, entity.name.tag.class.js	#FC3E83C0	—
entity.name.tag.class, entity.name.tag.id, entity.other.attribute-name.class.css	#FFCB6B	—
entity.other.attribute-name	#AE81FF	—
support.constant	#56b6c2	—
support.type, support.variable	#56b6c2	—
support.dictionary.json	#FFCB6B	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#AE81FF	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass	#FFCB6B	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#98c379	—
variable.css, variable.scss, variable.less, variable.sass	#FFCB6B	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#e5c07b	—
unit.css, unit.scss, unit.less, unit.sass	#6AA092	—
function.css, function.scss, function.less, function.sass	#56b6c2	—
support.other.variable	—
invalid	#F8F8F0	—
invalid.deprecated	#F8F8F0	—
support.type.property-name.json	#F8F8F0	—
string.detected-link	#61afef	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#e06c75	—
markup.inserted	#98c379	—
markup.changed	#e5c07b	—
constant.numeric.line-number.find-in-files - match	#56b6c2A0	—
entity.name.filename.find-in-files	#e5c07b	—
markup.italic, markup.italic.markdown	—	italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown	#676f7d	—
punctuation.definition.italic.markdown	—	italic
markup.underline.link.markdown	#61afef	—
markup.bold.markdown	—	bold
markup.heading.markdown	#e06c75	bold
markup.quote.markdown	#98c379	—
meta.separator.markdown	#c678dd	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#56b6c2	—
punctuation.definition.list_item.markdown	#ffffff	bold

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