Constatic Theme

Name: Constatic Theme
Author: rinckodev

Publisher: rinckodevThemes in package: 1

A sleek and focused dark theme for night owls and developers who love deep contrasts.

Open in VS Code GitHub

VS Code preview

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

Constatic Theme — Constatic

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.activeBorder#244994
activityBar.background#17181C
activityBar.border#26272C
activityBarBadge.background#244994
badge.background#244994
button.background#244994
button.hoverBackground#345EB1
debugToolBar.background#1e2026de
debugToolBar.border#26272C
dropdown.background#17181C
editor.background#1B1D22
editor.selectionBackground#2449943e
editorGroupHeader.tabsBackground#17181C
editorHoverWidget.background#191a1ff2
editorHoverWidget.border#26272C
editorHoverWidget.statusBarBackground#191A1Fde
editorLineNumber.activeForeground#7f8592
editorLineNumber.foreground#7f85925e
editorStickyScroll.shadow#00000000
editorUnnecessaryCode.opacity#ffffff65
editorWidget.background#1e2026de
editorWidget.resizeBorder#345EB1
extensionButton.background#244994
focusBorder#1e45925b
input.background#202228
list.activeSelectionBackground#2449945b
list.hoverBackground#24272D
menu.background#1e2026de
menu.selectionBackground#244994
menubar.selectionBackground#244994
panel.background#191A1F
panel.border#26272C
panelTitle.activeBorder#345EB1
quickInput.background#1e2026a0
scrollbar.shadow#00000060
scrollbarSlider.background#3d414d75
selection.background#244994
settings.checkboxBackground#17181C
settings.dropdownBackground#17181C
settings.focusedRowBackground#1B1D22
settings.modifiedItemIndicator#545E7A
settings.numberInputBackground#17181C
settings.rowHoverBackground#1B1D22
settings.textInputBackground#17181C
sideBar.background#17181C
sideBar.border#26272C
sideBarSectionHeader.background#17181C
sideBarSectionHeader.border#26272C
statusBar.background#17181C
statusBar.border#26272C
statusBar.debuggingBackground#208442
statusBar.focusBorder#00000000
statusBarItem.hoverBackground#26272ccb
statusBarItem.prominentBackground#00000000
statusBarItem.prominentHoverBackground#26272C
statusBarItem.remoteBackground#2449943e
tab.activeBorderTop#345EB1
tab.inactiveBackground#00000000
terminal.tab.activeBorder#345EB1
titleBar.activeBackground#17181C
titleBar.inactiveBackground#17181C
toolbar.hoverBackground#26272C
widget.border#26272C
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid, invalid.illegal	#FF5370	—
meta.paragraph, string.other.link.description, string.other.link.title	#BDBDBD	—
keyword.operator.arithmetic, keyword.operator.arrow, keyword.operator.assignment, keyword.operator.assignment.ts, keyword.operator.bitwise.ts, keyword.operator.comparison, keyword.operator.optional, keyword.operator.relational, keyword.operator.rest, keyword.operator.type, keyword.operator.spread, keyword.operator.increment-decrement, meta.brace, meta.class, meta.class.java, meta.separator, markup.table, punctuation, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.section.class.end, punctuation.section.class.end.bracket.curly.java, punctuation.separator.key-value, punctuation.terminator.statement, punctuation.definition.list, punctuation.definition.table.markdown, punctuation.separator.table.markdown, source.ignore, storage.type.function.arrow	#7F8592	—
comment, punctuation.definition.comment	#445176	—
entity.name.type.class, entity.name.class, entity.name.function.mdx, entity.name.type, entity.name.type.enum, entity.name.type.instance.jsdoc, entity.name.type.interface, entity.name.type.module.ts, entity.other.inherited-class, punctuation.definition.annotation.java, meta.import.ts, source.ts, storage.type.annotation, storage.type.annotation.java, storage.type.java, support.class, support.type, support.type.builtin, support.type.primitive.ts, variable.other.object.java	#4EC9B0	—
entity.name.function, keyword.control.anchor.regexp, keyword.operator.or.regexp, punctuation.decorator.ts, support.function	#DCDCAA	—
constant.character.escape, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.keyframe-offset.css, keyword.operator.quantifier.regexp, meta.at-rule.header.css, meta.selector.css	#D7BA7D	—
keyword.control, keyword.control.as.ts, keyword.control.catch.java, keyword.control.conditional, keyword.control.default, keyword.control.export, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.java, keyword.control.loop, keyword.control.satisfies, keyword.control.switch, keyword.control.ternary, keyword.control.throw, keyword.control.try.java, keyword.control.trycatch, keyword.control.type, keyword.operator.logical, keyword.operator.ternary, keyword.operator.throw, keyword.other.import, keyword.other.package, meta.import, meta.import.java, support.variable.property.importmeta, punctuation.definition.keyword.css	#C586C0	—
constant.other.placeholder, entity.name.label.ts, entity.name.tag.yaml, entity.other.attribute-name, entity.other.attribute-name.localname.xml, meta.embedded, meta.method, meta.object-literal.key, punctuation.support.type.property-name, support.type.property-name, support.type.property-name.json, variable, variable.object.property, variable.other	#9cdcfe	—
variable.other.constant, variable.other.enummember, entity.name.label.ts	#4FC1FF	—
punctuation.definition.link, string.other.begin.link.mdx, string.other.begin.mdx, string.other.end.mdx, punctuation.definition.metadata, markup.underline.link, string.other.link.destination.mdx, variable.key.dotenv, meta.link.email.lt-gt.markdown	#4C89D4	—
constant.language, constant.language.boolean, constant.language.import-export-all, constant.language.java, constant.language.json, constant.language.null, constant.other.enum, entity.name.section, entity.name.tag, entity.name.tag.html, entity.name.tag.localname, entity.name.tag.yaml, keyword.other, keyword.control.new, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, keyword.other.definition.ini, punctuation.definition.block.tag, punctuation.definition.heading, punctuation.definition.inline.tag, punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, storage, storage.modifier, storage.type, variable.language, variable.other.assignment.shell	#569CD6	—
punctuation.definition.character-class.regexp, punctuation.definition.group.regexp, punctuation.definition.string, string, string.tag, string.value, string.quoted.double, support.constant.property-value.css, property.value.dotenv	#CE9178	—
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, meta.group.regexp, string.regexp	#D16969	—
constant.numeric, constant.numeric, entity.other.keyframe-offset.percentage.css	#B5CEA8	—
constant.language.null, constant.language.undefined, punctuation.definition.annotation.java, storage.type.annotation.java, markup.italic.markdown	—	italic
constant.language.import-export-all, markup.heading.atx, markup.heading.markdown, markup.bold.markdown, punctuation.definition.heading.markdown	—	bold
link, uri, url	—	underline
markup.strikethrough.markdown	—	strikethrough

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