Amoled Darcula Theme

Name: Amoled Darcula Theme
Author: CyrilLeblanc

Publisher: CyrilLeblancThemes in package: 2

An amoled Darcula theme pack for VsCode from Jetbrains IDEs

Open in VS Code GitHub

Color themes

VS Code preview

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

Amoled Darcula Theme — Darcula Amoled Theme

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#000
activityBar.border#343434
activityBarBadge.background#242424
button.background#0971f1
button.border#0971f1
button.foreground#fff
contrastBorder#343434
dropdown.background#000
dropdown.border#343434
dropdown.foreground#fff
editor.background#000
editor.foldBackground#000
editor.foreground#999999
editor.hoverHighlightBackground#242424
editor.inactiveSelectionBackground#242424
editor.lineHighlightBackground#fff0
editor.lineHighlightBorder#343434
editor.rangeHighlightBackground#343434
editor.selectionBackground#3793E033
editor.selectionHighlightBackground#343434
editor.wordHighlightBackground#343434
editor.wordHighlightStrongBackground#343434
editorBracketMatch.background#343434
editorBracketMatch.border#343434
editorCodeLens.foreground#343434
editorCursor.background#000
editorCursor.foreground#fff
editorError.border#343434
editorError.foreground#E1270E
editorGroup.border#343434
editorGroup.dropBackground#3793E01a
editorGroupHeader.tabsBackground#000
editorGroupHeader.tabsBorder#343434
editorGutter.background#000
editorGutter.deletedBackground#E1270E
editorGutter.modifiedBackground#285879
editorHoverWidget.background#000
editorHoverWidget.border#343434
editorIndentGuide.background#000
editorLineNumber.activeForeground#757575
editorLineNumber.foreground#343434
editorLink.activeForeground#999999
editorMarkerNavigation.background#000
editorMarkerNavigationError.background#000
editorMarkerNavigationWarning.background#343434
editorOverviewRuler.border#343434
editorOverviewRuler.commonContentForeground#343434
editorOverviewRuler.currentContentForeground#E1270E
editorOverviewRuler.incomingContentForeground#5BC266
editorRuler.foreground#343434
editorSuggestWidget.background#000
editorSuggestWidget.border#343434
editorSuggestWidget.foreground#999999
editorSuggestWidget.selectedBackground#343434
editorWarning.border#343434
editorWarning.foreground#FF453A
editorWhitespace.foreground#333333
editorWidget.background#000
editorWidget.border#343434
errorForeground#E1270E
extensionButton.prominentBackground#343434
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#343434
focusBorder#343434
foreground#e6e6e6
input.background#343434
input.foreground#fff
input.placeholderForeground#999999
inputOption.activeBorder#242424
inputValidation.errorBorder#E1270E
inputValidation.infoBorder#BF5AF2
inputValidation.warningBorder#FBCC43
list.activeSelectionBackground#343434
list.activeSelectionForeground#fff
list.dropBackground#000
list.errorForeground#E1270E
list.focusBackground#343434
list.highlightForeground#6CC7F6
list.hoverBackground#343434
list.inactiveSelectionBackground#343434
list.inactiveSelectionForeground#fff
list.warningForeground#FBCC43
menu.background#000
menu.selectionBackground#343434
peekView.border#242424
peekViewEditor.background#343434
peekViewEditor.matchHighlightBackground#6CC7F6
peekViewResult.background#343434
peekViewResult.fileForeground#fff
peekViewResult.lineForeground#fff
peekViewResult.matchHighlightBackground#6CC7F6
peekViewResult.selectionBackground#343434
peekViewResult.selectionForeground#fff
peekViewTitle.background#343434
peekViewTitleDescription.foreground#535BCF
peekViewTitleLabel.foreground#fff
scrollbarSlider.activeBackground#fff
selection.background#3793E040
sideBar.background#000
sideBar.border#343434
sideBar.foreground#e6e6e6
sideBarSectionHeader.background#000
sideBarSectionHeader.border#343434
sideBarSectionHeader.foreground#fff
sideBarTitle.foreground#fff
statusBar.background#343434
statusBar.border#343434
statusBar.debuggingBackground#E1270E
statusBar.debuggingForeground#343434
statusBar.foreground#fff
statusBar.noFolderBackground#343434
statusBar.noFolderForeground#fff
statusBarItem.prominentBackground#E1270E
statusBarItem.prominentHoverBackground#FBCC43
statusBarItem.remoteBackground#BF5AF2
statusBarItem.remoteForeground#fff9f9
tab.activeBackground#000
tab.activeBorder#6CC7F6
tab.activeForeground#fff
tab.border#343434
tab.inactiveBackground#000
tab.inactiveForeground#757575
tab.unfocusedActiveForeground#fff
tab.unfocusedInactiveForeground#757575
terminal.ansiBlack#343434
terminal.ansiBlue#535BCF
terminal.ansiBrightBlack#535BCF
terminal.ansiBrightGreen#5BC266
terminal.ansiBrightRed#E1270E
terminal.ansiBrightYellow#FBCC43
terminal.ansiCyan#6CC7F6
terminal.ansiGreen#5BC266
terminal.ansiMagenta#BF5AF2
terminal.ansiRed#E1270E
terminal.ansiWhite#fff
terminal.ansiYellow#FBCC43
terminal.background#000
terminal.foreground#fff
titleBar.activeBackground#000
titleBar.activeForeground#fff
titleBar.border#343434
titleBar.inactiveBackground#000
titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#808080	—
constant.language	#CC7832	bold
constant.numeric	#6897BB	—
constant.regexp	#646695	—
entity.name.tag	#FFC66D	—
entity.name.tag.css	#d7ba7d	—
entity.other.attribute-name	#BABABA	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#d7ba7d	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold	#A9B7C6	—
markup.heading	#A9B7C6	—
markup.italic	—	italic
markup.inserted	#b5cea8	—
markup.deleted	#ce9178	—
markup.changed	#A9B7C6	—
beginning.punctuation.definition.quote.markdown	#608b4e	—
beginning.punctuation.definition.list.markdown	#6796e6	—
markup.inline.raw	#ce9178	—
meta.selector	#d7ba7d	—
punctuation.definition.tag	#FFC66D	—
meta.preprocessor	#CC7832	—
meta.preprocessor.string	#ce9178	—
meta.preprocessor.numeric	#b5cea8	—
meta.structure.dictionary.key.python	#9876AA	—
meta.diff.header	#CC7832	—
storage	red	—
storage.type	#CC7832	bold
keyword.other.phpdoc.php, keyword.other.type.php, storage.type.class.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc	#808080	—
storage.modifier	#CC7832	bold
string	#6A8759	—
string.tag	#6A8759	—
string.value	#6A8759	—
string.regexp	#6A8759	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#A9B7C6	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less	#9876AA	—
variable.other.property, support.variable.property.dom, entity.other.inherited-class	#9876AA	—
variable.other.object, variable.other.object.property, support.class.dom, meta.function-call, entity.name.type.module	#A9B7C6	—
variable.other.readwrite, variable.other.constant.ts, variable.parameter, variable.other.readwrite.alias	#A9B7C6	—
keyword	#CC7832	bold
keyword.control	#CC7832	bold
keyword.operator	#A9B7C6	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#CC7832	—
keyword.other.unit	#b5cea8	—
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php	#CC7832	—
support.function.git-rebase	#9876AA	—
constant.sha.git-rebase	#b5cea8	—
storage.modifier.import.java, storage.modifier.package.java	#d4d4d4	—
variable.language	#CC7832	bold
source.python	#A9B7C6	—
support.function.magic.python	#9876AA	—
variable.language.special.self.python, variable.parameter.function.language.special.self.python	#9876AA
entity.name.function.python, meta.function-call.generic.python	#FFC66D	—
entity.name.function, support.function, support.constant.handlebars	#FFC66D	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, 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	—
support.class, entity.name.class, support.type, entity.name.type	#FFC66D	—
storage.type.function.arrow	#A9B7C6	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json	#4EC9B0	—
keyword.control	#CC7832	bold
meta.definition.variable.name, support.variable	#A9B7C6	—
variable	#9876AA	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#9876AA	—
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	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

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