Neon Chalk

Name: Neon Chalk
Author: Brandon Burrus

Publisher: Brandon BurrusThemes in package: 1

VSCode Color Theme designed to look like brightly-colored chalk paired with a clean looking editor!

GitHub

VS Code preview

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

Neon Chalk — Neon Chalk

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.activeBorder#1D1F22
activityBar.background#1D1F22
activityBar.border#222428
contrastActiveBorder#fff0
contrastBorder#151719
debugToolBar.background#1D1F22
dropdown.border#1D1F22
editor.background#151719
editor.findMatchHighlightBackground#3AF3
editor.findRangeHighlightBackground#1D1F22
editor.foreground#AAA
editor.lineHighlightBackground#fff0
editor.lineHighlightBorder#0000
editor.rangeHighlightBackground#3AF2
editor.selectionHighlightBackground#fff0
editor.wordHighlightBackground#3AF2
editorBracketMatch.background#262628
editorBracketMatch.border#444
editorCursor.background#242428
editorCursor.foreground#aaa
editorGroup.border#151719
editorGroupHeader.noTabsBackground#151719
editorGroupHeader.tabsBackground#151719
editorGutter.background#151719
editorHoverWidget.background#1D1F22
editorHoverWidget.border#1D1F22
editorIndentGuide.activeBackground#1D1F22
editorIndentGuide.background#292929
editorLineNumber.foreground#444
editorOverviewRuler.border#151719
editorPane.background#151719
editorWidget.background#1D1F22
editorWidget.border#151719
focusBorder#1D1F22
input.border#1D1F22
list.activeSelectionBackground#212327
list.focusBackground#3AF2
list.inactiveFocusBackground#212327
list.inactiveSelectionBackground#212327
menu.border#1D1F22
notifications.border#1D1F22
panel.background#1D1F22
panel.border#1D1F22
panelTitle.activeBorder#1D1F22
peekView.border#3AF9
peekViewEditor.background#1D1F22
peekViewEditor.matchHighlightBackground#3AF2
peekViewEditorGutter.background#1D1F22
peekViewResult.background#1D1F22
peekViewResult.matchHighlightBackground#3AF2
pickerGroup.border#1D1F22
scrollbar.shadow#1D1F22
scrollbarSlider.activeBackground#444
scrollbarSlider.background#1D1F22
scrollbarSlider.hoverBackground#fff0
sideBar.background#1D1F22
sideBar.border#222428
sideBarSectionHeader.background#1D1F22
sideBarSectionHeader.border#fff0
sideBarTitle.foreground#606062
statusBar.background#0065d2
statusBar.debuggingBackground#397D02
statusBar.noFolderBackground#0065d2
tab.activeForeground#fff
tab.activeModifiedBorder#0065d2
tab.border#151719
tab.inactiveBackground#151719
tab.inactiveForeground#808081
widget.shadow#151719

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.sql, keyword.other.sql, meta.drop.sql, keyword.control.sql, keyword.other.DDL.create.II.sql	—
comment, comment.block, comment.block.documentation, markup, comment.block.documentation.js, markup.inline.raw.string.markdown	#41B645	italic
constant, constant.character, constant.language, constant.language.js, constant.other, variable, variable.name, variable.language.js, variable.other.property, variable.other, support.type.property-name, meta.item-access.python, meta.function-call.arguments.python, support.type.vendored.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded, entity.name.type.instance.jsdoc, variable.parameter, variable.parameter.js, source.sql, support.constant.color.w3c-extended-color-name.css, variable.other.readwrite.js, entity.name.function.top_level.elm, entity.name.function.elm, meta.method-call.java, variable.other.constant.tsx, variable.other.constant.object.tsx, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js, variable.other.constant.object.jsx	#82cb4d	—
entity.other.attribute-name, meta.directive.vue, constant.type-constructor.elm	#82cb4d	italic
constant.numeric, variable.other.constant.property.js, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal, variable.other.constant.property, entity.name.record.field.elm, storage.modifier.import.java, meta.object-literal.key.tsx	#7264ce
keyword, keyword.control, keyword.operator.new, variable.language, storage.type, storage.modifier, keyword.other.unit, support.constant.property-value, keyword.operator.logical.python, support.constant.property-value.css, constant.language.null.js, constant.language.null.tsx, constant.language.null.ts, keyword.operator.expression, constant.language.boolean, constant.language.null.ts, constant.language.undefined.ts, support.type.builtin.ts, constant.language.undefined.js, keyword.operator.closure.dart, meta.property-value.scss, meta.property-list.scss, meta.property-name.scss, entity.name.tag.reference.scss, constant.language.java, storage.type.primitive.java, keyword.operator.instanceof.java, meta.property-value.css	#da0caa	italic
entity.name.type.ts, entity.other.inherited-class.ts, entity.name.type.class.ts, support.class.dart, storage.type.elm, support.module.elm, variable.other.enummember, support.type, punctuation.decorator.ts, storage.type.haskell, storage.type.primitive.java, storage.type.object.array.java, storage.type.java, storage.type.generic.java, entity.name.type.class.java, entity.name.type, entity.other.inherited-class	#49c0b6
keyword.operator, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator, punctuation.terminator, meta.property-value, meta.property-group, meta.embedded.expression.js, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, meta.object.member.js, punctuation.accessor.js, meta.tag.without-attributes, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, meta.jsx.children, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, meta.selector.css, punctuation.section.function.scss, text.html.jinja, keyword.operator.logical.js, variable.parameter.url.css, source.sql, source.js, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.section.function.lambda.begin.python, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.accessor.tsx, punctuation.definition.block.tsx, meta.brace.round.tsx, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.tsx, meta.tag.other.html, text.html.vue-html, constant.name.attribute.tag.pug, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, attribute_value, text.html.derivative, text.pug, source.directive.vue, meta.brace.square.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, keyword.other.period.elm, punctuation.definition.list.elm, punctuation.bracket.elm, keyword.other.colon.elm, keyword.operator.assignment.elm, keyword.pipe.elm, punctuation.parens.module-export.elm, punctuation.section.braces.end, punctuation.section.braces.begin, punctuation.parens.elm, constant.unit.elm, punctuation.definition.parameters.begin.bracket.round.java, punctuation.definition.parameters.end.bracket.round.java, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.section.block.begin.bracket.curly.java, punctuation.section.block.end.bracket.curly.java, punctuation.bracket.round.java, punctuation.bracket.square.java, keyword.control.ternary.java, punctuation.bracket.angle.java, punctuation.definition.table.toml, punctuation.definition.binding-pattern.object.tsx, punctuation.destructuring.tsx, puncutation, punctuation.definition.ng-binding-name.begin.html, punctuation.definition.ng-binding-name.end.html, punctuation.accessor.ts, meta.brace.round.ts, punctuation.accessor.html, meta.brace.square.tsx, meta.tag.block.any.html, keyword.other.double-colon.haskell, support.constant.unit.haskell, punctuation.section.try.begin.bracket.curly.java, punctuation.section.try.end.bracket.curly.java, punctuation.section.catch.begin.bracket.curly.java, punctuation.section.catch.end.bracket.curly.java, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, meta.tag.xml, punctuation.accessor.optional, punctuation.definition.typeparameters, meta.brace.square	#ddddddff
meta.object-literal.key, record.name.elm, entity.name.record.field.accessor.elm, storage.modifier.package.java, entity.other.ng-binding-name.ngFor.html, entity.other.ng-binding-name.ngModel.html, entity.other.ng-binding-name.two-way.html, entity.other.ng-binding-name.click.html, entity.other.ng-binding-name.event.html, entity.other.ng-binding-name.ngIf.html, entity.other.ng-binding-name.ngForOf.html, entity.other.ng-binding-name.ngPluralCase.html, entity.other.ng-binding-name.ngSwitchCase.html, entity.other.ng-binding-name.ngSwitchDefault.html, entity.other.ng-binding-name.property.html, storage.modifier.package.java, entity.name.namespace	#7264ce
string, string.interpolated.single.dart, string.quoted, string.quoted.double, string.quoted.single, string.quoted.triple, string.unquoted, string.quoted.double.js, meta.tag.attributes.js, meta.tag, string.template.js, storage.type.string.python, string.interpolated.double.dart	#e8212f
support, support.class, support.constant, meta.function-call.generic.python, meta.function-call.python, support.function, support.other, support.variable, entity.name.class, entity.name.function, entity.name.method, entity.name.section, variable.other.object.js, entity.name.tag, entity.name.tag.css, support.constant.font-name, constant.other.color.rgb-value, support.constant.color.w3c-standard-color-name, support.type.property-name, support.type.property-name.css, meta.value.elm, entity.other.attribute-name.table.toml, entity.name.function.ts, variable.other.readwrite.alias.tsx, entity.name.function.tsx	#02a7ff
invalid, invalid.deprecated, invalid.illegal	#F44	bold italic underline
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression, constant.regexp, string.regexp, string.interpolated, 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.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, constant.character.escape, keyword.control.anchor.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, string.regexp.js, meta.group.regexp, keyword.operator.or.regexp, string.regexp.js, punctuation.definition.group.regexp, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, storage.type.class.jsdoc, keyword.other.js, constant.other.character-class.range.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, constant.other.character-class.set.regexp, support.constant.handlebars, constant.character.format.placeholder.other.python, string.interpolated.python, keyword.operator.function.infix.haskell, meta.selector.css	#364ded
storage.type.function.arrow.js, keyword.other.elm, storage.type.generic.wildcard.java	#d60ca0
punctuation.definition.annotation.java, storage.type.annotation, storage.type.annotation.java, meta.declaration.annotation.java	#888	italic

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