Colorful Code

Name: Colorful Code
Author: Md Usman Ansari

Publisher: Md Usman AnsariThemes in package: 2

A dark Visual Studio Code theme. who love to vibrant and colorful coding environment.

Open in VS Code GitHub

Color themes

VS Code preview

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

Colorful Code — Colorful 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.activeBackground#4755697c
activityBar.background#111827
activityBar.border#4755697c
activityBarBadge.background#007acc
breadcrumb.activeSelectionForeground#cbd5e1
breadcrumb.background#111827
breadcrumb.focusForeground#cbd5e1
breadcrumb.foreground#94a3b8
breadcrumbPicker.background#111827
contrastBorder#4755697c
dropdown.background#111827
dropdown.border#4755697c
dropdown.foreground#94a3b8
editor.background#111827
editor.foldBackground#4755697c
editor.foreground#cbd5e1
editor.selectionBackground#4755697c
editorBracketMatch.background#4755697c
editorBracketMatch.border#4755697c
editorCursor.foreground#db2777
editorGroupHeader.tabsBackground#111827
editorHoverWidget.background#1e293b
editorHoverWidget.border#4755697c
editorLineNumber.activeForeground#ec4899
editorLineNumber.foreground#475569
editorWidget.background#111827
editorWidget.border#4755697c
extensionButton.background#db2777
extensionButton.hoverBackground#ec4899
focusBorder#4755697c
foreground#cbd5e1
input.background#1e293b
input.border#4755697c
input.foreground#94a3b8
input.placeholderForeground#94a3b8
inputOption.activeBorder#ffffffcc
inputValidation.errorBackground#b91c1c
inputValidation.errorBorder#f87171
inputValidation.infoBackground#1d4ed8
inputValidation.infoBorder#60a5fa
inputValidation.warningBackground#a16207
inputValidation.warningBorder#facc15
list.activeSelectionBackground#234d708c
list.activeSelectionForeground#cbd5e1
list.dropBackground#1e293b
list.focusBackground#010d18
list.focusForeground#cbd5e1
list.highlightForeground#cbd5e1
list.hoverBackground#1e293b
list.hoverForeground#cbd5e1
list.inactiveSelectionBackground#1e293b
list.inactiveSelectionForeground#cbd5e1
list.invalidItemForeground#975f94
minimap.errorHighlight#dc2626
minimap.selectionHighlight#db2777
notifications.background#111827
notifications.border#4755697c
scrollbar.shadow#010b14
scrollbarSlider.activeBackground#1e293b
scrollbarSlider.background#1e293b
scrollbarSlider.hoverBackground#1e293b
sideBar.background#111827
sideBar.border#4755697c
sideBarSectionHeader.background#111827
sideBarSectionHeader.border#4755697c
sideBarTitle.foreground#bbbbbb
statusBar.background#111827
statusBar.border#4755697c
statusBar.debuggingBackground#1e293b
statusBar.debuggingBorder#1F2330
statusBar.foreground#5f7e97
statusBar.noFolderBackground#111827
statusBar.noFolderBorder#25293A
statusBarItem.activeBackground#1e293b
statusBarItem.hoverBackground#1e293b
statusBarItem.prominentBackground#1e293b
statusBarItem.prominentHoverBackground#1e293b
tab.activeBackground#1e293b
tab.activeBorder#4755697c
tab.activeBorderTop#ec4899
tab.activeForeground#d2dee7
tab.border#4755697c
tab.inactiveBackground#111827
tab.inactiveForeground#5f7e97
tab.unfocusedActiveBorder#4755697c
tab.unfocusedActiveForeground#5f7e97
tab.unfocusedInactiveForeground#5f7e97
titleBar.activeBackground#111827
titleBar.activeForeground#94a3b8
titleBar.border#4755697c
titleBar.inactiveBackground#111827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#475569	italic
variable, string constant.other.placeholder	#cbd5e1	italic
constant.other.color	#cbd5e1	—
invalid, invalid.illegal	#f87171	—
keyword, storage.type, storage.modifier	#60a5fa	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#89DDFF	—
meta.tag	#cbd5e1	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#2dd4bf	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#2dd4bf	italic
meta.block variable.other	#f472b6	—
support.other.variable, string.other.link	#f472b6	—
variable.parameter	#f472b6	—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx	#cbd5e1	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#c4b5fd	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#c084fc	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#2dd4bf	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#f87171	—
variable.language	#f87171	italic
entity.name.method.js	#f472b6	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#f472b6	—
entity.other.attribute-name	#60a5fa	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#2dd4bf	italic
entity.other.attribute-name.class	#2dd4bf	—
source.sass keyword.control	#f472b6	—
markup.inserted	#c084fc	—
markup.deleted	#f87171	—
markup.changed	#60a5fa	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#f472b6	italic
source.js constant.other.object.key.js string.unquoted.label.js	#f87171	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#60a5fa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2dd4bf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f87171	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f472b6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f472b6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#60a5fa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c084fc	—
text.html.markdown, punctuation.definition.list_item.markdown	#cbd5e1	—
text.html.markdown markup.inline.raw.markdown	#60a5fa	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#c084fc	—
markup.italic	#f472b6	italic
markup.bold, markup.bold string	#f472b6	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f472b6	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#f472b6	—
string.other.link.description.title.markdown	#60a5fa	—
constant.other.reference.link.markdown	#2dd4bf	—
markup.raw.block	#60a5fa	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#cbd5e1	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#cbd5e1	—
string, string.quoted, variable.other.readwrite.js	#c084fc	—
variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts	#f472b6	—
meta.object-literal.key.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.var.expr.tsx, source.tsx	#f472b6	—

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