Accord

Name: Accord
Author: KraXen72

Publisher: KraXen72Themes in package: 1

Personal VSCode theme based on new Dark Modern and base16 IR Black

GitHub

VS Code preview

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

Accord — Accord

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#181818
activityBar.border#ffffff15
activityBar.foreground#ffffffc5
activityBar.inactiveForeground#ffffff80
activityBarBadge.background#7CB342
activityBarBadge.foreground#ffffff
badge.background#fb6836
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#7CB342
breadcrumb.foreground#ffffff70
button.background#48b258
button.foreground#ffffff
button.secondaryBackground#FFFFFF0F
button.secondaryForeground#ffffffc5
button.secondaryHoverBackground#ffffff15
checkbox.background#313131
checkbox.border#ffffff15
debugToolBar.background#181818
descriptionForeground#8b949e
diffEditor.insertedLineBackground#7cb3420F
diffEditor.insertedTextBackground#7cb3420F
diffEditor.removedLineBackground#ff000012
diffEditor.removedTextBackground#ff000012
dropdown.background#282828
editor.background#1f1f1f
editor.findMatchBackground#5caeef4f
editor.findMatchHighlightBackground#b485274f
editor.foreground#ffffffd3
editor.lineHighlightBackground#11111130
editor.selectionBackground#ea542150
editor.selectionHighlightBackground#a5756233
editorBracketHighlight.foreground1#B5B3AA
editorBracketHighlight.foreground2#5caeef
editorBracketHighlight.foreground3#4fb1bc
editorBracketHighlight.foreground4#c172d9
editorBracketHighlight.foreground5#97c26c
editorBracketHighlight.foreground6#dfb976
editorBracketHighlight.unexpectedBracket.foreground#db6165
editorBracketMatch.background#ea542130
editorCursor.foreground#ea5421
editorGroup.border#ffffff17
editorGroupHeader.noTabsBackground#111111
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#ffffff15
editorGutter.addedBackground#587e31
editorHoverWidget.background#252526
editorIndentGuide.background1#404040
editorSuggestWidget.background#252526
editorSuggestWidget.highlightForeground#7CB342
editorWidget.background#1C1B1A
editorWidget.border#7CB342
editorWidget.resizeBorder#7CB342
focusBorder#42403e
foreground#ffffffc5
icon.foreground#ffffffc5
input.background#1f1f1f
input.border#343331
input.foreground#ffffffc5
input.placeholderForeground#878580
inputOption.activeBackground#282726
inputOption.activeBorder#7CB342
inputOption.activeForeground#ffffffc5
inputValidation.errorBackground#ea2121
inputValidation.infoBackground#48a4b2
inputValidation.warningBackground#ea7221
keybindingLabel.foreground#ffffffc5
list.activeSelectionForeground#7CB342
list.dropBackground#383b3d
list.focusAndSelectionOutline#ffffff00
list.highlightForeground#7CB342
list.hoverBackground#ffffff15
list.inactiveSelectionBackground#ffffff15
menu.selectionForeground#7CB342
menubar.selectionForeground#7CB342
notebook.focusedCellBorder#7CB342
notificationCenterHeader.background#1f1f1f
notificationCenterHeader.foreground#ffffffc5
notificationLink.foreground#7CB342
notifications.background#1f1f1f
notifications.border#ffffff15
notifications.foreground#ffffffc5
panelTitle.activeBorder#7CB342
peekViewEditor.background#1f1f1f
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#1f1f1f
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#ffffff15
pickerGroup.foreground#7CB342
progressBar.background#7CB342
quickInput.background#1f1f1f
quickInput.foreground#ffffffc5
scrollbar.shadow#484f5833
scrollbarSlider.activeBackground#802e12a1
scrollbarSlider.background#802e1264
scrollbarSlider.hoverBackground#a0391664
settings.dropdownBackground#313131
settings.dropdownBorder#ffffff17
settings.headerForeground#7CB342
settings.modifiedItemIndicator#7CB342
sideBar.background#181818
sideBar.border#ffffff15
sideBar.foreground#ffffffc5
sideBarSectionHeader.background#181818
sideBarSectionHeader.foreground#ffffffc5
sideBarTitle.foreground#ffffffc5
statusBar.background#181818
statusBar.border#ffffff15
statusBar.debuggingBackground#181818
statusBar.focusBorder#ffffff00
statusBar.foreground#ffffffda
statusBar.noFolderBackground#181818
statusBarItem.focusBorder#0078d4
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#6e768100
statusBarItem.remoteForeground#ffffffda
tab.activeBackground#1f1f1f
tab.activeBorder#1f1f1f
tab.activeBorderTop#7CB342
tab.activeForeground#ffffffc5
tab.border#ffffff15
tab.hoverBackground#ffffff15
tab.inactiveBackground#181818
tab.inactiveForeground#cccccc
tab.unfocusedActiveBorder#1f1f1f
tab.unfocusedActiveBorderTop#ffffff80
tab.unfocusedActiveForeground#cccccc
tab.unfocusedHoverBackground#ffffff15
terminal.foreground#ffffffc5
terminal.tab.activeBorder#7CB342
textLink.foreground#7CB342
titleBar.activeBackground#181818
titleBar.activeForeground#ffffffc5
titleBar.border#ffffff15
titleBar.inactiveBackground#1f1f1f
titleBar.inactiveForeground#8b949e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source	#FFFFFFD3	—
variable, meta.variable, meta.property, meta.function-call support.class, constant.other.caps.python, meta.function support.variable.property, meta.class.body storage.type.java, meta.method.body meta.function-call, source.css meta.function.variable, source.css meta.property-value, source.scss meta.function.variable, source.scss meta.property-value, source.less meta.function.variable, source.less meta.property-value, variable.parameter, meta.parameter, meta.indexed-name.python	#FFFFFFD3	—
variable.language.this, variable.language.special.self	#dd77db	—
keyword, keyword.other.directive.using, keyword.other.documentation, keyword.control, keyword.modifier, storage.modifier, storage.type	#dd77db	—
keyword.operator	#FFFFFFD3	—
keyword.operator.new, keyword.control.new, keyword.other.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.php source.php, punctuation.section.embedded.end.php, punctuation.section.embedded.end.php source.php	#569CD6	—
meta.brace, keyword.control.as, keyword.control.import, keyword.control.from, keyword.control.type, keyword.import, keyword.other.import, storage.modifier.import.java, storage.modifier.package.java, meta.import storage.modifier.java	#B5B3AA	—
support.type, storage.type.primitive, variable.type.parameter, variable.parameter.type, meta.decorator, storage.type.annotation, punctuation.decorator, entity.name.function.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, string.regexp, constant.character.escape, constant.character.set.regexp, constant.other.placeholder, string.regexp keyword.operator, constant.other.set.regexp, entity.name.tag.named.group.regexp, 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	#C6C5FE	—
meta.return-type, entity.name.type, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, meta.definition storage.type.java, meta.definition storage.type.generic.java, meta.definition.variable storage.type.java, meta.method.identifier storage.type.java, meta.method.identifier storage.type.generic.java, meta.method.body storage.type.generic.java, meta.method.return-type storage.type.java, meta.method.return-type storage.type.generic.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#4EC9B0	—
entity.name.tag, meta.tag.sgml	#FF6C60	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, meta.preprocessor.string, string.tag, string.value	#CE9178	—
support.class, entity.name.type.class, entity.name.class, entity.name.type.module, entity.other.inherited-class, support.class.component, storage.modifier.namespace, entity.name.scope-resolution, meta.use.php, support.other.namespace.use.php, support.other.namespace.php, support.type.sys-types	#FFFFB6	—
entity.name.function, entity.name.method, variable.function, support.function, keyword.other.special-method, meta.function.method, meta.function-call.generic, meta.method.declaration meta.definition.method, meta.method.body storage.type.java, meta.object-literal.key, support.type.property-name, keyword.other.definition.ini, entity.name.tag.yaml, source.json support.type.property-name.json, entity.name.function.preprocessor, meta.preprocessor	#96CBFE	—
entity.other.attribute-name, text.html.markdown meta.attribute, text.html.markdown meta.attribute invalid.deprecated, source.svelte meta.directive keyword.control, source.svelte meta.directive entity.name.type	#9CDCFE	—
comment, keyword.other.documentation, storage.type.class.jsdoc, storage.type.class.jsdoc punctuation, punctuation.definition.comment, comment.documentation, comment.line.documentation	#8BBD92	italic
string, constant.other.symbol, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.other.link, markup.inserted	#adf263	—
emphasis, markup.italic	—	italic
strong	—	bold
markup.heading, markdown.heading	#ffffb6	bold
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx	#96cbfe	—
beginning.punctuation.definition.list.markdown	#6796E6	—
invalid, invalid.illegal, token.error-token	#FF6C60	—
punctuation, punctuation.section.class.end, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.definition.list_item, punctuation.separator, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, punctuation.terminator, punctuation.definition.string, punctuation.section.block, keyword.other.template, keyword.control.conditional.svelte, keyword.other.substitution	#b5b3aa	—
markup.inline.raw, markup.inline.raw punctuation	#CE9178	—
markup.deleted	#FF6C60	—
markup.changed, string.other.link.description.title.markdown	#FF73FD	—
markup.bold, markup.bold string, markup.bold markup.italic, markup.bold markup.italic string, markup.italic markup.bold, markup.italic markup.bold string, markup.quote markup.bold, markup.quote markup.bold string	#FF6C60	bold
markup.underline	#E9C062	underline
markup.underline.link, string.other.link.destination.mdx	#96CBFE	—
markup.strike	—	strikethrough
markup.quote	—	italic
string.other.link.title.markdown, string.other.link.description.markdown	#4EC9B0	—
constant.other.reference.link.markdown	#FFFFB6	—
punctuation.definition.fenced.markdown	#00000050	—
token.info-token	#96CBFE	—
token.warn-token	#FFFFB6	—
token.debug-token	#FF73FD	—
meta.selector, 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.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#D7BA7D	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other, punctuation.definition.entity.html, source.python constant.character.format.placeholder storage.type.format, source.go storage.type.numeric.go, source.go storage.type.byte.go, source.go storage.type.boolean.go, source.go storage.type.string.go, source.go storage.type.uintptr.go, source.go storage.type.error.go, source.go storage.type.rune.go, meta.separator.markdown, string.other.number.mdx, variable.ordered.list.mdx, variable.unordered.list.mdx	#E9C062	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.fstring.python constant.character, source.python constant.character.format.placeholder	#B5B3AA	—
url, link, uri	—	underline

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