devyl60

Name: devyl60
Author: devyl60

Publisher: devyl60Themes in package: 2

A theme based on the personal ideal colors for dyslexia.

Color themes

VS Code preview

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

devyl60 — devyl_dark

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#20242a
activityBar.foreground#fff
activityBarBadge.background#6190ee
activityBarBadge.foreground#fff
badge.background#6190ee
badge.foreground#fff
breadcrumb.activeSelectionForeground#fff
breadcrumb.focusForeground#fff
breadcrumb.foreground#abb2c1
breadcrumbPicker.background#272b33
debugToolBar.background#272b33
diffEditor.insertedTextBackground#73c99019
diffEditor.removedTextBackground#ff634719
dropdown.background#272b33
editor.background#272b33
editor.findMatchBackground#6190ee7a
editor.findMatchHighlightBackground#6190ee10
editor.foreground#abb2c1
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#2c323c
editor.lineHighlightBorder#2c323c
editor.selectionBackground#6190ee46
editor.selectionHighlightBackground#add6ff26
editorCursor.foreground#6190ee
editorGroup.border#fff
editorGroup.dropBackground#23262d
editorGroupHeader.tabsBackground#20242a
editorIndentGuide.background#404040
editorLineNumber.foreground#4a5364
editorLink.activeForeground#6190ee
editorWidget.background#20242a
focusBorder#6190ee
gitDecoration.conflictingResourceForeground#c776df
gitDecoration.deletedResourceForeground#e16971
gitDecoration.ignoredResourceForeground#5c6370
gitDecoration.modifiedResourceForeground#d19a66
gitDecoration.untrackedResourceForeground#96c474
input.background#272b33
list.activeSelectionBackground#6190ee50
list.activeSelectionForeground#fff
list.hoverBackground#272b33
list.inactiveSelectionBackground#6190ee30
list.inactiveSelectionForeground#fff
menu.background#272b33
menu.foreground#abb2c1
menubar.selectionBackground#20242a
menubar.selectionForeground#fff
notifications.background#20242a
notifications.foreground#fff
panel.background#20242a
panel.border#20242a
sideBar.background#20242a
sideBar.foreground#fff
statusBar.background#20242a
statusBar.debuggingBackground#6190ee
statusBar.debuggingForeground#fff
statusBar.foreground#fff
statusBar.noFolderBackground#20242a
statusBarItem.remoteBackground#6190ee
statusBarItem.remoteForeground#fff
tab.activeBackground#272b33
tab.activeForeground#fff
tab.border#20242a
tab.inactiveBackground#20242a
terminal.ansiBlack#000
terminal.ansiBlue#5eadf2
terminal.ansiBrightBlack#000
terminal.ansiBrightBlue#5eadf2
terminal.ansiBrightCyan#56b6c2
terminal.ansiBrightGreen#96c474
terminal.ansiBrightMagenta#c776df
terminal.ansiBrightRed#e16971
terminal.ansiBrightWhite#fff
terminal.ansiBrightYellow#eedd92
terminal.ansiCyan#56b6c2
terminal.ansiGreen#96c474
terminal.ansiMagenta#c776df
terminal.ansiRed#e16971
terminal.ansiWhite#fff
terminal.ansiYellow#eedd92
titleBar.activeBackground#20242a
titleBar.activeForeground#abb2c1
titleBar.inactiveBackground#20242a
titleBar.inactiveForeground#abb2c1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#e48c8c	italic
string, punctuation.definition.string	#93d167
constant, variable.other.constant	#ff0000
constant.language	#f0b05c
constant.numeric	#5ccdf0
constant.character, variable.language	#c776df
variable.readwrite, variable.readwrite.other.block, support.type.object.module	#abb2c1
keyword, keyword.operator.new, keyword.operator.expression, punctuation.definition.keyword, storage	#f0b05c
punctuation.separator.key-value, punctuation.destructuring, punctuation.separator.annotation.python, punctuation.separator.dict.python	#a7e797
entity.name.class, entity.name.module, entity.name.type, entity.other.inherited-class, storage.identifier, storage.type.cs, support.class, support.other.namespace, support.type	#eedd92	italic
meta.function-call, meta.method-call, support.function.construct.output, entity.name.function.stylus, support.function.filter.css, support.function.misc, support.function.builtin.shell	#a3289d	italic
meta.definition.function, meta.definition.method, entity.name.function.stylus, support.function.filter.css, entity.name.function.shell	#a3289d
punctuation.accessor, punctuation.definition.arguments, punctuation.separator.delimiter, punctuation.terminator, punctuation.section, constant.name.attribute.tag, punctuation.definition.begin, punctuation.definition.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, variable.other, support.variable, meta.function-call.arguments, support.constant, meta.embedded.block.html, entity.name.function.tagged-template.js	#abb2c1
function.support.builtin, function.support.core	#96c474
meta.template.expression	#eedd92
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#e16971
entity.name.tag.class, entity.name.tag.id, entity.other.attribute-name.id	#56b6c2
entity.other.attribute-name	#d19a66
entity.other.attribute-name.class	#eedd92
support.type.property-name.css, support.type.property-name.postcss, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#abb2bf
support.constant.css, support.constant.postcss, support.constant.scss, support.constant.less, support.constant.sass	#96c474
variable.css, variable.postcss, variable.scss, variable.less, variable.sass	#abb2c1
variable.css.string, variable.postcss.string, variable.scss.string, variable.less.string, variable.sass.string	#e5c07b
unit.css, unit.postcss, unit.scss, unit.less, unit.sass	#c776df
function.css, function.postcss, function.scss, function.less, function.sass	#56b6c2
support.type.property-name, meta.object-literal.key, variable.object.property	#e16971
invalid, invalid.deprecated	#e16971	underline
string.detected-link, linkForeground	#eedd92	italic underline
meta.diff, meta.diff.header	#5c6370	bold
markup.deleted	#e16971
markup.inserted	#96c474
markup.changed	#56b6c2

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