One Dark Pale

Name: One Dark Pale
Author: Stepan Zastupov

Publisher: Stepan ZastupovThemes in package: 1

One Dark theme with sane colors

GitHub

VS Code preview

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

One Dark Pale — One Dark Pale

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#2f333d
activityBar.foreground#d7dae0
activityBarBadge.background#4d78cc
activityBarBadge.foreground#f8fafd
badge.background#282c34
button.background#404754
debugToolBar.background#21252b
diffEditor.insertedTextBackground#98c37930
diffEditor.removedTextBackground#e06c7530
dropdown.background#1d1f23
dropdown.border#181a1f
editor.background#282c34
editor.findMatchHighlightBackground#314365
editor.lineHighlightBackground#383e4a
editor.selectionBackground#484e5b
editor.selectionHighlightBackground#484e5b
editor.wordHighlightBackground#484e5b
editor.wordHighlightStrongBackground#abb2bf26
editorCursor.foreground#f8f8f0
editorError.foreground#e06c75
editorGroup.border#181a1f
editorGroupHeader.tabsBackground#21252b
editorGutter.addedBackground#98c379c0
editorGutter.deletedBackground#e06c75c0
editorGutter.modifiedBackground#56b5c2c0
editorHoverWidget.background#21252b
editorHoverWidget.border#181a1f
editorIndentGuide.background#3b4048
editorLineNumber.foreground#495162
editorMarkerNavigation.background#21252b
editorOverviewRuler.addedForeground#98c37980
editorOverviewRuler.deletedForeground#e06c7580
editorOverviewRuler.modifiedForeground#56b5c280
editorRuler.foreground#abb2bf26
editorSuggestWidget.background#21252b
editorSuggestWidget.border#181a1f
editorSuggestWidget.selectedBackground#2c313a
editorWhitespace.foreground#3b4048
editorWidget.background#21252b
gitDecoration.deletedResourceForeground#e06c75
gitDecoration.modifiedResourceForeground#56b5c2
gitDecoration.untrackedResourceForeground#98c379
input.background#1d1f23
list.activeSelectionBackground#2c313a
list.activeSelectionForeground#d7dae0
list.focusBackground#383e4a
list.highlightForeground#c5c5c5
list.hoverBackground#292d35
list.inactiveSelectionBackground#2c313a
list.inactiveSelectionForeground#d7dae0
peekViewEditor.background#21252b
peekViewEditor.matchHighlightBackground#314365
peekViewResult.background#21252b
peekViewResult.matchHighlightBackground#314365
scrollbarSlider.activeBackground#747d9180
scrollbarSlider.background#4e566680
scrollbarSlider.hoverBackground#5a637580
sideBar.background#21252b
sideBarSectionHeader.background#282c34
statusBar.background#21252b
statusBar.debuggingBackground#21252b
statusBar.foreground#9da5b4
statusBar.noFolderBackground#21252b
statusBarItem.hoverBackground#2c313a
tab.activeBackground#2c313a
tab.border#181a1f
tab.inactiveBackground#21252b
terminal.ansiBlack#2D3139
terminal.ansiBlue#2e8ccf
terminal.ansiGreen#98c379
terminal.ansiRed#e06c75
terminal.ansiYellow#B4881D
terminal.foreground#C8C8C8
titleBar.activeBackground#282c34
titleBar.activeForeground#9da5b4
titleBar.inactiveBackground#282c34
titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7F848E	italic
comment	#7F848E	italic
string.quoted.docstring.multi.python	#7F848E	—
comment markup.link	#7F848E	—
markup.inserted.diff	#98c379	—
markup.deleted.diff	#e06c75	—
keyword.control.cpp	#e5c07b	—
punctuation.separator.key-value	#bbbbbb	—
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.language.super	—	italic
variable.language.super.js	#61afef	—
keyword.operator.expression.import	#61afef	—
support.constant.math	#e5c07b	—
support.constant.property.math	#d19a66	—
variable.other.jsdoc	#bbbbbb	—
meta.embedded.line.js,meta.embedded.line.ts	#bbbbbb	—
storage.type.annotation.java	#e5c07b	—
storage.modifier.import.java,storage.type.java	#e5c07b	—
meta.definition.variable.name.java	#e06c75	—
support.constant.property-value.scss,support.constant.property-value.css	#d19a66	—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss	#d19a66	—
punctuation.separator.list.comma.css	#b9c0ca	—
support.constant.color.w3c-standard-color-name.css	#d19a66	—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end	#e06c75	—
support.module.node,support.type.object.module,support.module.node	#e5c07b	—
support.constant.json	#d19a66	—
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary	#c678dd	—
support.type.object.console	#e06c75	—
support.variable.property.process	#d19a66	—
entity.name.function,support.function.console	#61afef	—
punctuation.separator.delimiter.c	#bbbbbb	—
support.type.posix-reserved.c	#57adb8	—
variable.parameter.function.python	#D18C4E	—
meta.function-call.generic.python	#61afef	—
punctuation.definition.comment	#7F848E	—
none	#A6B2C0	—
keyword	#c678dd	—
import.storage.java	#e5c07b	—
token.package.keyword	#c678dd	—
entity.name.function, meta.require, support.function.any-method	#61afef	—
entity.name.type.namespace	#e5c07b	—
support.class, entity.name.type.class	#e5c07b	—
entity.name.class.identifier.namespace.type	#e5c07b	—
entity.name.class	#61afef	—
entity.name.type	#e5c07b	—
keyword.control	#c678dd	—
control.elements, keyword.operator.less	#d19a66	—
keyword.other.special-method	#61afef	—
storage	#c678dd	—
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void	#C678DD	—
token.storage.type.java	#e5c07b	—
support.constant.font-name	#d19a66	—
string	#98c379	—
entity.other.inherited-class	#e5c07b	—
constant.numeric	#d19a66	—
none	#d19a66	—
none	#d19a66	—
constant	#d19a66	—
punctuation.definition.constant	#d19a66	—
entity.name.tag	#e06c75	—
entity.other.attribute-name	#d19a66	—
entity.other.attribute-name.id	#61afef	—
entity.other.attribute-name.class.css	#d19a66	—
meta.selector	#c678dd	—
none	#D2945D	—
markup.heading	—	bold
markup.heading punctuation.definition.heading, entity.name.section	—	—
keyword.other.unit	#d19a66	—
markup.bold,todo.bold	—	bold
emphasis md	#c678dd	—
markup.inline.raw.markdown, markup.inline.raw.string.markdown	#7F848E	—
beginning.punctuation.definition.list.markdown	#E06C75	—
markup.quote.markdown	#7F848E	italic
markup.underline.link.markdown,markup.underline.link.image.markdown	—	italic
string.other.link.title.markdown,string.other.link.description.markdown	#61AFEF	—
markup.italic.markdown	—	italic
markup.bold.markdown	—	bold
string.regexp	#57B6C2	—
constant.character.escape	#57B6C2	—
punctuation.section.embedded, variable.interpolation	#BE4F44	—
invalid.illegal	#FFFFFF	—
invalid.broken	#FFFFFF	—
invalid.deprecated	#FFFFFF	—
invalid.unimplemented	#FFFFFF	—
source.json meta.structure.dictionary.json > string.quoted.json	#E06C75	—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string	#E06C75	—
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation	#98C379	—
entity.name.function.decorator.python	#61afef	—
function.parameter	#d19a66	—
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx	#e5c07b	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
variable.other.normal.shell, variable.other.positional.shell	#e06c75	—
entity.name.tag.yaml	#bbbbbbff	—

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