C4TBT Theme

Name: C4TBT Theme
Author: C4TBrilliantThoughts

Publisher: C4TBrilliantThoughtsThemes in package: 1

The CodeHouse.C4TBT Color Theme is a gorgeous dark color theme designed for all developers.

GitHub

VS Code preview

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

C4TBT Theme — CodeHouse.C4TBrilliantThoughts

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#002b36
activityBar.foreground#19f9d8
activityBarBadge.background#404954
activityBarBadge.foreground#d3d2d2
button.background#19f9d8
button.foreground#002b36
button.hoverBackground#19f9d7c7
debugToolBar.background#002b36
dropdown.background#002b36
dropdown.border#19f9d8
dropdown.listBackground#002b36
editor.background#002b36
editor.foreground#E6E6E6
editor.lineHighlightBackground#434c57
editor.selectionBackground#46494d87
editorCursor.foreground#F8F8F0
editorGroupHeader.tabsBackground#002b36
editorLineNumber.activeForeground#d4d4d4dc
editorWhitespace.foreground#34383D
editorWidget.background#002b36
extensionButton.prominentBackground#19f9d8
extensionButton.prominentForeground#404954
extensionButton.prominentHoverBackground#19f9d7c7
focusBorder#19f9d759
input.background#002b36
input.border#19f9d8
inputOption.activeBorder#19f9d8
inputValidation.errorBorder#19f9d8
inputValidation.infoBackground#002b36
inputValidation.infoBorder#19f9d8
list.activeSelectionBackground#09698180
list.activeSelectionForeground#d4d4d4
list.focusBackground#09698180
list.focusForeground#d4d4d4
list.highlightForeground#aeb1b0
list.hoverBackground#09698180
list.hoverForeground#d4d4d4
list.inactiveFocusBackground#002b36
list.inactiveSelectionBackground#09698180
list.inactiveSelectionForeground#aeb1b0
notification.background#002b36
notification.buttonBackground#19f9d8
notification.buttonForeground#002b36
notification.buttonHoverBackground#19f9d7d3
notification.infoBackground#002b36
panel.background#002b36
panelTitle.activeBorder#19f9d8
sideBar.background#002b36
sideBar.border#4049549d
sideBar.foreground#aeb1b0
sideBarSectionHeader.foreground#aeb1b1
sideBarTitle.foreground#aeb1b1
statusBar.background#002b36
statusBar.debuggingBackground#002b36
statusBar.foreground#19f9d8
statusBar.noFolderBackground#002b36
statusBarItem.activeBackground#002b36
statusBarItem.prominentBackground#002b36
statusBarItem.prominentHoverBackground#09698180
tab.activeBackground#014b5d
tab.activeBorder#9fc202
tab.activeForeground#d4d4d4
tab.hoverBorder#bcbdbd
tab.inactiveBackground#002b36
tab.inactiveForeground#717272
textLink.activeForeground#b3b8b6e5
textLink.foreground#00abc1de
titleBar.activeBackground#002b36
titleBar.activeForeground#aeb1b0
titleBar.inactiveBackground#002b36
titleBar.inactiveForeground#aeb1b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8a8787	italic
storage.type, keyword.control.import.js, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.tsx, support.class.error.js, support.class.error.tsx	#fff12ca9	—
string.quoted.double, string.template	#00abc1da	—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end	#00acc1	—
meta.brace.round.js, meta.brace.round.tsx, punctuation.terminator.statement.js, punctuation.terminator.statement.tsx	#c5c5c5f1	—
punctuation.separator.comma.js, punctuation.separator.comma.tsx, punctuation.definition.block.js, punctuation.definition.block.tsx, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.js, punctuation.definition.parameters.end.tsx	#c5c5c5f1	—
keyword.control.loop	#ddc809	—
keyword.control.flow, keyword.operator.new	#00e5ffcc	—
punctuation.accessor, meta.brace.square.js, meta.brace.square.tsx, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.relational, keyword.operator, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, constant.language.import-export-all.js, constant.language.import-export-all.tsx, entity.other.attribute-name.js, entity.other.attribute-name.tsx	#FFCC95	—
keyword.control.switch	#079ba8	—
string.quoted.single	#00abc1de	—
variable.language.this, constant.language.boolean.true, constant.language.boolean.false, constant.language.undefined, constant.language.null	#f48fb1dc	—
variable.other.object.property, variable.other.property, meta.template.expression, support.variable.property, variable.language.super, support.class.component.js, entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.style.html	#2cff5aa4	—
meta.jsx.children.js, meta.jsx.children.tsx	#c0babaec	—
meta.embedded.line, variable.other.object, variable.other.readwrite, entity.name.type.class, entity.name.type, entity.other.inherited-class, variable.parameter, variable.object.property.js, variable.object.property.tsx, support.function, storage.modifier.async.js, storage.modifier.async.tsx	#a1d7da	—
constant.numeric.decimal	#22b9ffaf	—
support.class.console, support.function.console, meta.object-literal.key	#ffcc95e7	—
support.variable.dom, storage.modifier	#079ba8	—
entity.name.function	#ddc809	—
storage.type.function	#f48fb1	—
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#FFCC95	—
keyword.control.conditional, keyword.control.trycatch.js, keyword.control.trycatch.tsx	#ddc809	—
support.function.dom	#ffcc95e3	—
constant.language.json	#00acc1	—
constant.language.json, constant.numeric.json	#c7ee47	—
entity.name.tag.script.html, entity.name.tag.structure.any.html, entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, entity.name.tag.other.html, meta.tag.sgml.doctype.html	#fffb2cf1	—
entity.other.attribute-name.html, entity.other.attribute-name.id.html	#ffcc95ee	—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.js, punctuation.definition.tag.end.tsx	#c5c5c5f1	—
meta.tag.structure.any.html, meta.tag.inline.any.html	#c5c5c5f1	—
text.html.basic	#bdbdbd	—
meta.toc-list.id.html	#64ffdbda	—
entity.name.tag.xml, entity.name.tag.localname.xml, entity.name.tag.namespace.xml	#ff2c6bc2	—
punctuation.definition.tag.xml, meta.tag.preprocessor.xml, punctuation.separator.namespace.xml	#c5c5c5f1	—
string.quoted.double.xml	#728e9e	—
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml	#33fae9ad	—
text.xml	#8bdbe9e3	—
entity.name.tag.yaml	#e4e0bd	—
source.yaml	#00ffffcc	—
string.unquoted.plain.out.yaml	#00ABC1DA	—
meta.flow-sequence.yaml	#ee475e	—
string.unquoted.plain.in.yaml	#00ffffcc	—
keyword.other.definition.ini, meta.rule.indent_style.editorconfig, keyword.other.definition.root.editorconfig, meta.section.editorconfig	#ffcc95e7	—
source.ini constant.language.tab.editorconfig, punctuation.separator.key-value.editorconfig	#00abc1de	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, variable.argument.css	#ffcc95de	—
support.type.property-name.css, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css	#a0b9c4c0	—
entity.name.tag.css	#ffea2ce0	—
constant.numeric.css	#ffcc95c4	—
keyword.other.unit, keyword.control.at-rule.include.scss, meta.definition.variable.scss, keyword.control.at-rule.import.scss, keyword.control.return.scss, entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, keyword.control.at-rule.mixin.scss	#ffea2ce0	—
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.separator.list.comma.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css	#b9b8b8	—
punctuation.terminator.rule.css, punctuation.separator.key-value.css	#a7a2a2	—
punctuation.definition.constant.css	#a0b9c4c0	—
constant.other.color.rgb-value.hex.css, entity.name.tag.reference.scss	#dd8aa3	—
support.type.vendored.property-name.css	#a7a2a2	—
keyword.control.at-rule.keyframes.css, entity.other.attribute-name.placeholder.css, keyword.control.at-rule.media.css, support.type.property-name.media.css, support.constant.media.css, support.constant.font-name.css, keyword.other.important.scss, keyword.control.at-rule.media.scss, keyword.control.operator.css.scss, entity.other.keyframe-offset.css, entity.other.attribute-name.css, keyword.control.at-rule.import.css, keyword.control.for.scss, keyword.control.if.scss, meta.at-rule.include.scss	#dd8aa3	—
variable.parameter.keyframe-list.css, meta.property-value.css	#7cc0d1	—
support.constant.property-value.css	#7cc0d1	—
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css	#a0b9c4fa	—
entity.other.keyframe-offset.percentage.css, meta.property-list.scss	#34eeeed7	—
variable.scss, support.function.url.css, entity.other.attribute-name.attribute.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss	#88f1ffc2	—
markup.heading.markdown, punctuation.definition.metadata.markdown, punctuation.definition.list.begin.markdown, meta.separator.markdown, punctuation.definition.quote.begin.markdown	#ffcc95e7	—
meta.paragraph.markdown	#93A8AC	—
beginning.punctuation.definition.list.markdown	#64ffdbda	—
entity.name.tag.template.html, keyword.control.export.js, keyword.control.export.tsx	#6fff2cb0	—
text.html.vue-html	#bdbdbd	—
keyword.control.default.js, keyword.control.default.tsx, support.class.builtin.js, support.class.builtin.tsx, meta.function-call.js, meta.function-call.tsx, keyword.control.as.js, keyword.control.as.tsx	#64ffdbda	—
support.type.object.module.js, support.type.object.module.tsx, string.regexp.js, string.regexp.tsx, support.variable.object.node.js, support.variable.object.node.tsx	#64ffdbda	—
support.variable.object.process.js, support.variable.object.process.tsx, variable.other.constant.property.js, variable.other.constant.property.tsx, variable.other.constant.js, variable.other.constant.tsx	#a1d7da	—
punctuation.definition.variable.php	#ffcc95e7	—
variable.other.php, variable.other.global.php, variable.other.global.safer.php	#26e0d7f3	—
constant.language.php, constant.other.php	#6fff2cb0	—
keyword.control.return.php	#ddc809	—
keyword.other.new.php, keyword.other.use.php, keyword.other.namespace.php, keyword.other.use-as.php, keyword.other.function.use.php, keyword.other.clone.php, keyword.control.yield.php, keyword.control.break.php, keyword.control.die.php	#f48fb1	—
support.class.builtin.php, entity.name.function.php, entity.other.alias.php, support.constant.std.php, constant.other.class.php	#64f5ffda	—
support.class.php, support.other.namespace.php, variable.other.class.php, variable.other.property.php, support.constant.core.php, support.constant.ext.php, support.class.exception.php	#a0e3e7	—
storage.modifier.php	#ddc809	—
keyword.control.case.php, keyword.control.switch.php, keyword.control.default.php, keyword.control.if.php, keyword.control.foreach.php, keyword.control.continue.php, keyword.other.class.php, keyword.control.elseif.php, keyword.control.else.php, keyword.control.while.php, keyword.control.for.php, keyword.control.do.php	#a7deec	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#a7deec	—
keyword.control.exception.php, keyword.control.exception.catch.php, keyword.control.import.include.php	#eb9485	—
string.regexp.single-quoted.php	#eb9485	—
keyword.other.phpdoc.php, keyword.other.type.php	#53a5b9	—

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