Colourfull

Name: Colourfull
Author: Ammar-Khan

Publisher: Ammar-KhanThemes in package: 9

This theme has a feel of Monokai and your favorite Colours like Red Green Blue Pink Purple Orange Black

Open in VS Code GitHub

Color themes

VS Code preview

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

Colourfull — Colourfull - Orange

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#020202
activityBar.border#202020
activityBar.foreground#ff802b
activityBar.inactiveForeground#505050
activityBarBadge.background#ee4b00
activityBarBadge.foreground#ffffff
badge.background#8d1515
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ee4b00a1
breadcrumb.background#000000
breadcrumb.focusForeground#ee4b00d5
breadcrumb.foreground#a8a8a8
breadcrumbPicker.background#111111
button.background#12122c
button.hoverBackground#2b2b5a
debugToolBar.background#191936
debugToolBar.border#191936
diffEditor.insertedTextBackground#1eff0013
diffEditor.removedTextBackground#ff027822
dropdown.background#000000
dropdown.border#999999
editor.background#000000
editor.findMatchBackground#ff802bcc
editor.findMatchBorder#ff802b
editor.findMatchHighlightBackground#ff2b7c8e
editor.findMatchHighlightBorder#ff4444aa
editor.findRangeHighlightBackground#3a3a3a
editor.foreground#ffffff
editor.lineHighlightBackground#2b2b2b50
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#3a3a3a
editor.selectionBackground#00c3ff3a
editor.selectionForeground#eff8ff
editor.selectionHighlightBackground#6241a450
editor.selectionHighlightBorder#e18cc9
editor.wordHighlightBackground#575757
editorBracketMatch.background#ffffff13
editorCursor.background#5f3b23
editorCursor.foreground#ffffff
editorGroup.border#666666
editorGroup.dropBackground#2b2b5acc
editorGroupHeader.tabsBackground#000
editorGutter.addedBackground#ee4b00
editorGutter.background#050505
editorGutter.commentRangeForeground#f1ff28
editorGutter.deletedBackground#ff0055
editorGutter.modifiedBackground#9765c9
editorOverviewRuler.bracketMatchForeground#985bd143
editorWhitespace.foreground#ffffff40
editorWidget.background#000000
editorWidget.border#ffffff
focusBorder#223344
gitDecoration.addedResourceForeground#ee4b00
gitDecoration.conflictingResourceForeground#ff62b1
gitDecoration.ignoredResourceForeground#31cfff
gitDecoration.modifiedResourceForeground#ba66ff
gitDecoration.untrackedResourceForeground#4bf53c
icon.foreground#ffffff
input.background#151515
input.border#ee4b00
input.foreground#ffffff
input.placeholderForeground#7d7d7dd0
list.activeSelectionBackground#ee4b00
list.activeSelectionForeground#5efffc
list.dropBackground#a183d333
list.errorForeground#ca0d36
list.hoverBackground#2c145f7a
menu.background#000000
menu.foreground#fff
panel.background#000000
panel.border#ff4747
panelSection.dropBackground#310303
panelTitle.activeBorder#ff4747
panelTitle.activeForeground#ffffff
peekView.border#0000ff
peekViewEditor.background#000033
peekViewEditorGutter.background#00074b
peekViewResult.background#090b13
peekViewResult.fileForeground#7998fd
peekViewTitle.background#1a1a58
progressBar.background#ff5500
sideBar.background#000
sideBar.border#525252
sideBar.foreground#b4b4b4
sideBarSectionHeader.background#ee4b00
sideBarSectionHeader.border#888888
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#ee4b00
statusBar.border#080808
statusBar.debuggingBackground#292949
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#ee4b00
statusBarItem.activeBackground#2c2c62
statusBarItem.remoteBackground#312915
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0f0f0f
tab.activeBorder#ee4b00
tab.activeForeground#e0e0e0
tab.border#070707
tab.hoverBackground#303030
tab.hoverForeground#ffffff
tab.inactiveBackground#000
tab.inactiveForeground#969696
tab.inactiveModifiedBorder#ffcc00
terminal.background#000000
terminal.border#ee4b00
textLink.activeForeground#fffee6
textLink.foreground#ee4b00
titleBar.activeBackground#ee4b00
titleBar.activeForeground#fff
titleBar.border#000000
titleBar.inactiveBackground#ee4b00
titleBar.inactiveForeground#fff
tree.indentGuidesStroke#808080
welcomePage.background#000000
welcomePage.buttonBackground#424242
welcomePage.buttonHoverBackground#1b1b35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—
strong	—	bold
header	#CBFFAD	—
source	#F3FCEE	—
meta.diff, meta.diff.header	#EEC200	—
markup.inserted	#3DEB1E	—
markup.deleted	#F72343	—
markup.changed	#FFE69B	—
invalid	#F72343	underline
invalid.deprecated	#F3FCEE	underline
entity.name.filename	#FFA770	—
markup.error	#F72343	—
markup.underline	—	underline
markup.bold	#FFE69B	bold
markup.heading	#CBFFAD	bold
markup.	#FFA770
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#17D9FF	—
markup.inline.raw, markup.raw.restructuredtext	#3DEB1E	—
markup.underline.link, markup.underline.link.image	#17D9FF	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#FD7623	—
entity.name.directive.restructuredtext, markup.quote	#FFA770
meta.separator.markdown	#EEC200	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#3DEB1E	—
punctuation.definition.constant.restructuredtext	#CBFFAD	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#CBFFAD	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#F3FCEE	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FFA770	—
entity.name.type.class, entity.name.class	#17D9FF	normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	#CBFFAD
entity.other.inherited-class	#17D9FF
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#a0a0a0	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#FD7623	—
comment.block.documentation entity.name.type	#17D9FF
comment.block.documentation entity.name.type punctuation.definition.bracket	#17D9FF	—
comment.block.documentation variable	#FFE69B
constant, variable.other.constant	#CBFFAD	—
constant.character.escape, constant.character.string.escape, constant.regexp	#FD7623	—
entity.name.tag	#FD7623	—
entity.other.attribute-name.parent-selector	#FD7623	—
entity.other.attribute-name	#3DEB1E
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix	#3DEB1E	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#FFE69B
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#3DEB1E
meta.decorator variable.other.object	#3DEB1E	—
keyword, punctuation.definition.keyword	#FD7623	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#FD7623	—
support	#17D9FF
support.function.magic, support.variable, variable.other.predefined	#CBFFAD	regular
support.function, support.type.property-name	—	regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#FD7623	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#F3FCEE	—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile	#FD7623	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#17D9FF	—
constant.other.date, constant.other.timestamp	#FFE69B	—
variable.other.alias.yaml	#3DEB1E	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#FD7623	regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml	#17D9FF
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FFE69B	—
storage.modifier	#FD7623	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FFA770	—
punctuation.definition.group.capture.regexp	#FD7623	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#F72343	—
punctuation.definition.character-class.regexp	#17D9FF	—
punctuation.definition.group.regexp	#FFE69B	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#F72343	—
meta.assertion.look-ahead.regexp	#3DEB1E	—
string	#FFA770	—
punctuation.definition.string.begin, punctuation.definition.string.end	#FFA770	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#7159C1	—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#EEC200	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#F3FCEE	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#FFE69B
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#F3FCEE	normal
meta.selectionset.graphql variable	#FFA770	—
meta.selectionset.graphql meta.arguments variable	#F3FCEE	—
entity.name.fragment.graphql, variable.fragment.graphql	#17D9FF	—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#F3FCEE	—
source.shell variable.other	#CBFFAD	—
support.constant	#CBFFAD	normal
meta.scope.prerequisites.makefile	#FFA770	—
meta.attribute-selector.scss	#FFA770	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#F3FCEE	—
meta.preprocessor.haskell	#EEC200	—

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