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 Dark

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#007acc
activityBar.background#181a1d
activityBar.foreground#FFFFFF
activityBarBadge.background#39A7FF
button.background#387ADF
button.hoverBackground#387ADFcc
dropdown.background#36393e
editor.background#282b30
editor.foreground#eeffffd0
editor.lineHighlightBackground#424549
editorCursor.foreground#5b96f0
editorGroupHeader.tabsBackground#181a1d
editorGroupHeader.tabsBorder#1e2124
editorIndentGuide.activeBackground1#00b7ffaa
editorIndentGuide.activeBackground2#00b7ffaa
editorIndentGuide.activeBackground3#00b7ffaa
editorIndentGuide.activeBackground4#00b7ffaa
editorIndentGuide.activeBackground5#00b7ffaa
editorIndentGuide.activeBackground6#00b7ffaa
editorIndentGuide.background1#ffffff11
editorIndentGuide.background2#ffffff11
editorIndentGuide.background3#ffffff11
editorIndentGuide.background4#ffffff11
editorIndentGuide.background5#ffffff11
editorIndentGuide.background6#ffffff11
editorLineNumber.activeForeground#5b96f0
editorLineNumber.foreground#aeb1b5af
focusBorder#ffffff00
input.background#ffffff0f
list.activeSelectionBackground#00b7ff55
list.activeSelectionForeground#fff
list.focusAndSelectionOutline#00b7ff55
list.hoverBackground#ffffff09
list.inactiveSelectionBackground#ffffff16
panel.border#1e2124
sideBar.background#1e2124
sideBar.foreground#ffffffbf
sideBarTitle.foreground#bbbbbb
statusBar.background#373c43
statusBar.debuggingBackground#f7a936
statusBar.debuggingForeground#000
statusBar.foreground#fff
statusBar.noFolderBackground#c03f3f
statusBar.noFolderForeground#fff
statusBarItem.remoteBackground#0000
tab.activeBackground#36393e
tab.activeBorderTop#007acc
tab.activeForeground#ffffffbf
tab.inactiveBackground#282b30
tab.inactiveForeground#ffffff6f
textLink.foreground#39A7FF
titleBar.activeBackground#181a1d

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	#636d83	—
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	#787A91	—
none	#abb2bf	—
keyword.operator	#FF9843	—
keyword, keyword.operator.expression, keyword.operator.type.asserts, variable.language, keyword.other.special-method.elixir, meta.control.flow	#526FF1df	—
support.type.primitive	#10b1fe	—
variable, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby	#ccc	—
entity.name.function, meta.require, support.function.any-method, meta.function-call, meta.method-call, variable.function	#FF8080	—
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	#fcd34d	—
keyword.other.special-method	#3fc56b	—
storage, constant.language	#87D9FF	—
support.function	#F28585	—
string, punctuation.definition.string, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string	#BFEA7C	—
constant.numeric, variable.other.anonymous.elixir	#ff78f8	—
none	#ff78f8	—
none	#10b1fe	—
constant, variable.other.constant, punctuation.definition.constant, constant.other.symbol, constant.language.symbol, support.constant, support.variable.magic.python, variable.other.enummember	#e195bf	—
punctuation.definition.tag	#787A91	—
entity.name.tag	#efd34d	—
entity.other.attribute-name, string.unquoted.alias.graphql	#EF992E	—
meta.selector	#7a82da	—
none	#ff78f8	—
markup.heading, punctuation.definition.heading, entity.name.section, markup.heading.setext	#f9c859
keyword.other.unit	#f9c859	—
markup.bold, punctuation.definition.bold	#ff6480	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	#f9c859	—
string.other.link	#3691ff	—
meta.link	#10b1fe	—
beginning.punctuation.definition.list	#ce9887	—
markup.quote	#9f7efe	—
meta.separator	#abb2bf	—
markup.inserted	#3fc56b	—
markup.deleted	#ff6480	—
markup.changed	#10b1fe	—
string.regexp	#f9c859	—
constant.character.escape, constant.other.character-class	#ff936a	—
variable.interpolation	#10b51f	—
invalid	#fc2f52	—
keyword.operator.new	#10b1fe	—
meta.function-call.arguments	#87C4FF	—
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	#E195BF	—
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	#87C4FF	—
support.type.primitive, support.type.builtin	#10b1fe	—
string.interpolated.dollar.shell	#ff6480	—
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	#FF8080	—
entity.other.attribute-name.id.css	#4a4ed9	—
support.type.property-name.json	#C69774	—

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