Ashen

Name: Ashen
Author: dpaulos6

Publisher: dpaulos6Themes in package: 3

Ashen is a dark gray theme optimized for readability and eye comfort. With clear syntax highlighting and soothing colors, it reduces eye strain and enhances focus during long coding sessions.

GitHub

Color themes

VS Code preview

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

Ashen — Ashen Light

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#007acc
activityBar.background#e0e0e0
activityBar.foreground#000000
activityBarBadge.background#39A7FF
button.background#387ADF
button.hoverBackground#387ADFcc
dropdown.background#f0f0f0
editor.background#f0f0f0
editor.foreground#181818d0
editor.lineHighlightBackground#f0f0f088
editorCursor.foreground#5b96f0
editorGroupHeader.tabsBackground#f0f0f0
editorGroupHeader.tabsBorder#e9ecef
editorIndentGuide.activeBackground1#00b7ffaa
editorIndentGuide.activeBackground2#00b7ffaa
editorIndentGuide.activeBackground3#00b7ffaa
editorIndentGuide.activeBackground4#00b7ffaa
editorIndentGuide.activeBackground5#00b7ffaa
editorIndentGuide.activeBackground6#00b7ffaa
editorIndentGuide.background1#0001
editorIndentGuide.background2#0001
editorIndentGuide.background3#0001
editorIndentGuide.background4#0001
editorIndentGuide.background5#0001
editorIndentGuide.background6#0001
editorLineNumber.activeForeground#63c8f1
editorLineNumber.foreground#9c9c9caf
focusBorder#00000000
input.background#0000000f
list.activeSelectionBackground#00b7ff55
list.activeSelectionForeground#000
list.focusAndSelectionOutline#00b7ff55
list.hoverBackground#0000000a
list.inactiveSelectionBackground#00000022
menu.selectionBackground#00b7ff55
panel.background#f3f3f3
panel.border#e7e7e7
sideBar.background#e7e7e7
sideBar.foreground#000000bf
sideBarTitle.foreground#bbbbbb
statusBar.background#6c757d
statusBar.debuggingBackground#f4a261
statusBar.debuggingForeground#000
statusBar.foreground#fff
statusBar.noFolderBackground#6c757d
statusBar.noFolderForeground#fff
statusBarItem.remoteBackground#fff0
tab.activeBackground#f5f5f5
tab.activeBorderTop#007acc
tab.activeForeground#000000bf
tab.inactiveBackground#e9e9e9
tab.inactiveForeground#0000006f
textLink.foreground#39A7FF
titleBar.activeBackground#e0e0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment.unused.elixir	#abb2bf	—
comment, punctuation.definition.comment, comment.block.documentation punctuation.definition, string.comment, comment.block.documentation, comment.block	#636d8388	—
comment.block.documentation variable, keyword.other.documentation, storage.type.class.jsdoc, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation entity.name.type, meta.other.type.phpdoc support class	#7c8495	—
punctuation.comma.graphql, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.function, punctuation.brace, punctuation.terminator.statement, punctuation.delimiter.object.comma, punctuation.definition.entity, punctuation.definition, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.separator.key-value, punctuation.separator.dictionary, punctuation.terminator, punctuation.delimiter.comma, punctuation.separator.comma, punctuation.accessor, punctuation.separator.array, punctuation.section, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.separator.statement, punctuation.section.array.elixir, punctuation.separator.object.elixir, punctuation.section.embedded.elixir, punctuation.section.function.elixir, punctuation.section.scope.elixir, punctuation.separator.parameter, meta.brace.round, meta.brace.square, meta.brace.curly, constant.name.attribute.tag.pug, punctuation.section.embedded, punctuation.separator.method, punctuation.separator, punctuation.other.comma, punctuation.bracket, keyword.control.ternary, string.interpolated.pug, support.function.interpolation.sass, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation.graphql, punctuation.colon.graphql	#00000088	—
none	#abb2bf	—
keyword.operator	#457b9d	—
keyword, keyword.operator.expression, keyword.operator.type.asserts, variable.language, keyword.other.special-method.elixir, meta.control.flow	#3253e5	—
support.type.primitive	#10b1fe	—
variable, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby	#666	—
entity.name.function, meta.require, support.function.any-method, meta.function-call, meta.method-call, variable.function	#f95e5e	—
support.class, entity.name.class, entity.name.type.class, meta.class.instance, meta.class.inheritance, entity.other.inherited-class, entity.name.type, variable.other.constant.elixir, storage.type.haskell, support.type.graphql, support.type.enum.graphql	#f5b310	—
keyword.other.special-method	#3fc56b	—
storage, constant.language	#34bdf5	—
support.function	#F28585	—
string, punctuation.definition.string, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string	#74d20b	—
constant.numeric, variable.other.anonymous.elixir	#f025e5	—
none	#f025e5	—
none	#1a99d6	—
constant, variable.other.constant, punctuation.definition.constant, constant.other.symbol, constant.language.symbol, support.constant, support.variable.magic.python, variable.other.enummember	#ff6ebe	—
punctuation.definition.tag	#8187c1	—
entity.name.tag	#ecc715	—
entity.other.attribute-name, string.unquoted.alias.graphql	#ed7f0a	—
meta.selector	#7a82da	—
none	#f227e8	—
markup.heading, punctuation.definition.heading, entity.name.section, markup.heading.setext	#e6ab26
keyword.other.unit	#e6ab26	—
markup.bold, punctuation.definition.bold	#eb1f44	bold
markup.italic, punctuation.definition.italic	#ff936a	italic
markup.strikethrough, punctuation.definition.strikethrough	#636d83	strikethrough
markup.strikethrough markup.italic, markup.strikethrough markup.italic punctuation.definition.italic	#636d83	italic strikethrough
markup.strikethrough markup.bold, markup.strikethrough markup.bold punctuation.definition.bold	#636d83	bold strikethrough
markup.raw.inline	#e6ab26	—
string.other.link	#3691ff	—
meta.link	#10b1fe	—
beginning.punctuation.definition.list	#ce9887	—
markup.quote	#9f7efe	—
meta.separator	#abb2bf	—
markup.inserted	#3fc56b	—
markup.deleted	#eb1f44	—
markup.changed	#10b1fe	—
string.regexp	#e6ab26	—
constant.character.escape, constant.other.character-class	#ff936a	—
variable.interpolation	#10b41f	—
invalid	#fc2f52	—
keyword.operator.new	#10b1fe	—
meta.function-call.arguments	#6fb6fd	—
meta.object-literal.key, meta.object.member, variable.other.property, variable.other.object.property, support.variable.property, variable.object.property, support.type.property-name, meta.property-name, entity.name.tag.yaml, constant.other.key, constant.other.object.key.js, string.unquoted.label.js, support.type.map.key, variable.graphql	#ee60ae	—
markup.inline.raw, markup.fenced_code.block, markup.raw.block	#ce9887	—
markup.underline.link.image	#3fc56b	—
variable.parameter, parameter.variable.function.elixir, variable.other.block.ruby	#6fb6fd	—
support.type.primitive, support.type.builtin	#10b1fe	—
string.interpolated.dollar.shell	#eb1f44	—
string.other.math.shell	#3691ff	—
punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell	#7a82da	—
comment.rainbow4	#ce9887	—
markup.bold.rainbow9	#9f7efe
invalid.rainbow10	#ff936a	—
support.type.property-name.css, meta.property-list.css	#65C4F8	—
support.constant.property-value.css	#C9D7DD	—
entity.other.attribute-name.class.css	#F6995C	—
support.type.property-name	#9BCF53	—
keyword.control.at-rule	#ec5b5b	—
entity.other.attribute-name.id.css	#4a4ed9	—
support.type.property-name.json	#e69f69	—

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