Atom One Dark Pro UI

Name: Atom One Dark Pro UI
Author: mbmgfnbk

Publisher: mbmgfnbkThemes in package: 1

Atom One Dark Pro, but only the UI elements and not code syntax.

GitHub

VS Code preview

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

Atom One Dark Pro UI — Atom One Dark Pro UI

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#333842
activityBar.foreground#D7DAE0
activityBarBadge.background#528BFF
activityBarBadge.foreground#D7DAE0
badge.background#528BFF
badge.foreground#D7DAE0
button.background#4D78CC
button.foreground#FFFFFF
button.hoverBackground#6087CF
diffEditor.insertedTextBackground#00809B33
dropdown.background#353b45
dropdown.border#181A1F
editor.background#282C34
editor.findMatchHighlightBackground#528BFF3D
editor.foreground#ABB2BF
editor.lineHighlightBackground#99BBFF0A
editor.selectionBackground#3E4451
editorCursor.foreground#528BFF
editorGroup.border#181A1F
editorGroup.emptyBackground#21252B
editorGroupHeader.tabsBackground#21252B
editorHoverWidget.background#21252B
editorHoverWidget.border#181A1F
editorIndentGuide.activeBackground1#626772
editorIndentGuide.background1#ABB2BF26
editorInlayHint.background#2C313A
editorInlayHint.foreground#636e83
editorLineNumber.activeForeground#ABB2BF
editorLineNumber.foreground#636D83
editorRuler.foreground#ABB2BF26
editorSuggestWidget.background#21252B
editorSuggestWidget.border#181A1F
editorSuggestWidget.selectedBackground#2C313A
editorWhitespace.foreground#ABB2BF26
editorWidget.background#21252B
editorWidget.border#3A3F4B
extensionButton.prominentBackground#2BA143
extensionButton.prominentHoverBackground#37AF4E
focusBorder#528BFF
input.background#1B1D23
input.border#181A1F
list.activeSelectionBackground#2C313A
list.activeSelectionForeground#D7DAE0
list.focusBackground#2C313A
list.highlightForeground#D7DAE0
list.hoverBackground#2C313A66
list.inactiveSelectionBackground#2C313A
list.inactiveSelectionForeground#D7DAE0
notebook.cellEditorBackground#2C313A
notifications.background#21252B
peekView.border#528BFF
peekViewEditor.background#1B1D23
peekViewResult.background#21252B
peekViewResult.selectionBackground#2C313A
peekViewTitle.background#1B1D23
pickerGroup.border#528BFF
scrollbarSlider.activeBackground#747D9180
scrollbarSlider.background#4E566680
scrollbarSlider.hoverBackground#5A637580
sideBar.background#21252B
sideBarSectionHeader.background#333842
statusBar.background#21252B
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#9DA5B4
statusBar.noFolderBackground#21252B
statusBarItem.hoverBackground#2C313A
tab.activeBackground#282C34
tab.activeForeground#D7DAE0
tab.border#181A1F
tab.inactiveBackground#21252B
titleBar.activeBackground#21252B
titleBar.activeForeground#9DA5B4
titleBar.inactiveBackground#21252B
titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#DCDCAA	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.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	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby	#4EC9B0	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#C586C0	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#9CDCFE	—
variable.other.constant, variable.other.enummember	#4FC1FF	—
meta.object-literal.key	#9CDCFE	—
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	#CE9178	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#d16969	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAA	—
keyword.operator.quantifier.regexp	#d7ba7d	—
constant.character, constant.other.option	#569cd6	—
constant.character.escape	#d7ba7d	—
entity.name.label	#C8C8C8	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#DCDCAA	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.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	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby	#4EC9B0	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#C586C0	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#9CDCFE	—
variable.other.constant, variable.other.enummember	#4FC1FF	—
meta.object-literal.key	#9CDCFE	—
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	#CE9178	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#d16969	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAA	—
keyword.operator.quantifier.regexp	#d7ba7d	—
constant.character, constant.other.option	#569cd6	—
constant.character.escape	#d7ba7d	—
entity.name.label	#C8C8C8	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#6A9955	—
constant.language	#569cd6	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#b5cea8	—
constant.regexp	#646695	—
entity.name.tag	#569cd6	—
entity.name.tag.css, entity.name.tag.less	#d7ba7d	—
entity.other.attribute-name	#9cdcfe	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#d7ba7d	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold	#569cd6	bold
markup.heading	#569cd6	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#b5cea8	—
markup.deleted	#ce9178	—
markup.changed	#569cd6	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796e6	—
markup.inline.raw	#ce9178	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor	#569cd6	—
meta.preprocessor.string	#ce9178	—
meta.preprocessor.numeric	#b5cea8	—
meta.structure.dictionary.key.python	#9cdcfe	—
meta.diff.header	#569cd6	—
storage	#569cd6	—
storage.type	#569cd6	—
storage.modifier, keyword.operator.noexcept	#569cd6	—
string, meta.embedded.assembly	#ce9178	—
string.tag	#ce9178	—
string.value	#ce9178	—
string.regexp	#d16969	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#569cd6	—
meta.template.expression	#d4d4d4	—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded	#9cdcfe	—
keyword	#569cd6	—
keyword.control	#569cd6	—
keyword.operator	#d4d4d4	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#569cd6	—
keyword.other.unit	#b5cea8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#569cd6	—
support.function.git-rebase	#9cdcfe	—
constant.sha.git-rebase	#b5cea8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#d4d4d4	—
variable.language	#569cd6	—

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