Lightless Theme

Name: Lightless Theme
Author: Two Devs

Publisher: Two DevsThemes in package: 1

An improved dark theme for Visual Studio Code, inspired by Deepdark by Nimda and Material Theme by Mattia Astorino.

Open in VS Code GitHub

VS Code preview

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

Lightless Theme — Lightless Dark 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#050505
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#878787
activityBarBadge.background#8055FA
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#D0D0D0
breadcrumb.focusForeground#8C8C8A
breadcrumb.foreground#6D6D6D
breadcrumbPicker.background#292928
button.background#8055FA
button.foreground#FFFFFF
button.hoverBackground#6639E3
debugExceptionWidget.background#C43235
debugExceptionWidget.border#C43235
debugToolBar.background#3D3D3C
diffEditor.insertedTextBackground#00a78a20
diffEditor.removedTextBackground#A7001D40
dropdown.border#50504F
editor.background#121212
editor.findMatchBackground#43a047
editor.findMatchHighlightBackground#880e4f
editor.findRangeHighlightBackground#50504F4D
editor.foreground#F8F8F2
editor.hoverHighlightBackground#333332
editor.inactiveSelectionBackground#3D3D3C
editor.lineHighlightBackground#212121
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#50504F4D
editor.selectionBackground#50504F
editor.selectionHighlightBackground#3D3D3C
editor.wordHighlightBackground#333332
editor.wordHighlightStrongBackground#C3E88D30
editorBracketMatch.background#333332
editorBracketMatch.border#50504F
editorCodeLens.foreground#6D6D6D
editorCursor.foreground#D0D0D0
editorError.foreground#C43235
editorGroup.dropBackground#8055FA40
editorGroupHeader.tabsBackground#050505
editorGutter.addedBackground#00F3C9
editorGutter.deletedBackground#C43235
editorGutter.modifiedBackground#F3C900
editorHint.foreground#A9B9B0
editorHoverWidget.background#333332
editorHoverWidget.border#333332
editorIndentGuide.activeBackground#50504F
editorIndentGuide.background#333332
editorInfo.foreground#00F3C9
editorLineNumber.foreground#50504F
editorLink.activeForeground#8C8C8A
editorMarkerNavigation.background#1F1F1E
editorMarkerNavigationError.background#C43235
editorMarkerNavigationWarning.background#F3C900
editorOverviewRuler.addedForeground#00F3C9
editorOverviewRuler.currentContentForeground#00F3C9
editorOverviewRuler.deletedForeground#C43235
editorOverviewRuler.errorForeground#C43235
editorOverviewRuler.findMatchForeground#DA0093
editorOverviewRuler.incomingContentForeground#8055FA
editorOverviewRuler.infoForeground#00F3C9
editorOverviewRuler.modifiedForeground#F3C900
editorOverviewRuler.rangeHighlightForeground#50504F
editorOverviewRuler.selectionHighlightForeground#8C8C8A
editorOverviewRuler.warningForeground#F3C900
editorOverviewRuler.wordHighlightForeground#8C8C8A
editorOverviewRuler.wordHighlightStrongForeground#DA0093
editorRuler.foreground#333332
editorSuggestWidget.border#292928
editorSuggestWidget.foreground#D0D0D0
editorSuggestWidget.highlightForeground#F8F8F2
editorSuggestWidget.selectedBackground#3D3D3C
editorWarning.foreground#F3C900
editorWhitespace.foreground#333332
editorWidget.background#292928
editorWidget.border#3D3D3C
errorForeground#C43235
extensionButton.prominentBackground#8055FA
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#6639E3
focusBorder#00000000
foreground#EEFFFF
gitDecoration.conflictingResourceForeground#FFCB6B90
gitDecoration.deletedResourceForeground#f0717890
gitDecoration.ignoredResourceForeground#84848490
gitDecoration.modifiedResourceForeground#82AAFF90
gitDecoration.untrackedResourceForeground#C3E88D90
input.border#50504F
inputOption.activeBorder#B2B2B1
list.activeSelectionBackground#8055FA40
list.activeSelectionForeground#FFFFFF
list.dropBackground#333332
list.errorForeground#C43235
list.focusBackground#8055FA40
list.highlightForeground#F8F8F2
list.hoverBackground#8055FA40
list.inactiveSelectionBackground#8055FA40
list.inactiveSelectionForeground#FFFFFF
list.warningForeground#F3C900
menu.background#0c0c0c
menu.foreground#8C8C8A
menu.selectionBackground#212121
menu.selectionForeground#8055FA
menubar.selectionBackground#212121
menubar.selectionForeground#8055FA
merge.currentContentBackground#0074604D
merge.currentHeaderBackground#007460
merge.incomingContentBackground#0070A74D
merge.incomingHeaderBackground#0070A7
notificationCenterHeader.background#3D3D3C
notificationCenterHeader.foreground#B2B2B1
notificationLink.foreground#8055FA
notifications.background#292928
notifications.border#3D3D3C
notifications.foreground#F8F8F2
panel.background#050505
panel.border#3D3D3C
panelTitle.activeBorder#8055FA
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#8C8C8A
peekView.border#8055FA
peekViewEditor.background#0B0B0B
peekViewEditor.matchHighlightBackground#DA0093
peekViewResult.background#292928
peekViewResult.fileForeground#F8F8F2
peekViewResult.lineForeground#D0D0D0
peekViewResult.matchHighlightBackground#8E005F
peekViewResult.selectionBackground#0B0B0B
peekViewResult.selectionForeground#F8F8F2
peekViewTitle.background#8055FA
peekViewTitleDescription.foreground#FFFFFF
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#F3C900
pickerGroup.foreground#F3C900
sideBar.background#0a0a0a
sideBar.foreground#8C8C8A
sideBarSectionHeader.background#212121
sideBarSectionHeader.foreground#B2B2B1
statusBar.background#050505
statusBar.debuggingBackground#8055FA40
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#878787
statusBar.noFolderBackground#050505
statusBar.noFolderForeground#878787
statusBarItem.activeBackground#FFFFFF40
statusBarItem.hoverBackground#4A4A4A20
tab.activeBackground#000000
tab.activeBorder#050505
tab.activeBorderTop#8055FA
tab.border#050505
tab.hoverBackground#050505
tab.inactiveBackground#212121
tab.inactiveForeground#B2B2B1
tab.unfocusedActiveBorder#050505
tab.unfocusedActiveBorderTop#050505
tab.unfocusedActiveForeground#D0D0D0
tab.unfocusedInactiveForeground#8C8C8A
terminal.background#050505
titleBar.activeBackground#050505
titleBar.activeForeground#878787
titleBar.inactiveBackground#050505
titleBar.inactiveForeground#878787
walkThrough.embeddedEditorBackground#0B0B0B
welcomePage.buttonBackground#292928
welcomePage.buttonHoverBackground#0B0B0B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation, constant.other.symbol	#89DDFF	—
comment, punctuation.definition.comment, string.quoted.docstring	#6d6d6d	—
constant.numeric	#F78C6C	—
constant.language	#ff9cac	—
constant.other, support.constant	#eeffff	—
keyword.control	#89DDFF	—
keyword.control.conditional	#89DDFF	—
keyword.control.import, keyword.control.from	#7b8df1	—
keyword.control.flow	#C792EA	—
constant.keyword	#89DDFF	italic
support.module, support.node	#f07178	italic
keyword.other	#F78C6C	—
keyword.operator	#89DDFF	—
keyword.operator.logical	#ff8989	—
keyword.operator.spread	#ff8989	—
punctuation.definition.binding-pattern, meta.import punctuation.definition.block	#ff8989	—
storage.type, storage.control	#C792EA	—
storage.modifier	#C792EA	—
storage.other	#C792EA	—
entity.other.key, entity.other.inherited-class, entity.name.type, support.type, support.class, meta.use, constant.other.key	#ffd16e	—
variable.object.property, meta.field.declaration entity.name.function	#ff748e	—
meta.definition.method entity.name.function	#ff748e	—
punctuation.definition.string.begin, punctuation.definition.string.end	#89DDFF	—
string, string.unquoted	#C3E88D	—
constant.character.escape, text.html constant.character.entity.named	#EEFFFF	—
string.regexp	#C3E88D	—
string.regexp keyword.control, string.regexp keyword.operator, constant.other.character-class.regexp	#f77171	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#ffffff	—
string.regexp punctuation	#A9B9B0	—
string.regexp keyword.other	#FFCB6B	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#89DDFF	—
meta.embedded, source.groovy.embedded, meta.template.expression	#EEFFFF	—
variable, variable.language, support.variable, meta.definition.variable entity.name.function	#EEFFFF	—
variable.language.this, variable.language.self, variable.language.super	#7b8df1	—
variable.parameter, meta.function-call.arguments	#EEFFFF	—
meta.function, entity.name.function	#82AAFF	—
entity.name.function.call, support.function, source.python meta.function-call.python	#82AAFF	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#ff748e	—
variable.other.property	#ff748e	—
constant.language.json	#89DDFF	—
string.quoted.double.json	#e6e6e6	—
meta.structure.dictionary.json support.type.property-name.json	#ffb870	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff8670	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff748e	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ea72c7	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#df71e3	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d470ff	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#a599ff	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ada2ff	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b4aaff	—
entity.other.attribute-name.class	#C792EA	—
entity.other.attribute-name.id	#F78C6C	—
source.css entity.name.tag	#FFCB6B	—
support.type.property-name.css, support.type.property-name.media	#eeffff	—
support.type.vendored.property-name.css	#9ba7ec	—
support.constant.property-value.css	#89DDFF	—
punctuation.definition.css	#eeffff	—
keyword.operator.css	#eeffff	—
meta.tag, punctuation.definition.tag	#89DDFF	—
entity.name.tag	#f07178	—
entity.other.attribute-name	#C792EA	—
punctuation.definition.entity.html	#EEFFFF	—
markup.heading	#89DDFF	—
text.html.markdown meta.link.inline, meta.link.reference	#f07178	—
text.html.markdown beginning.punctuation.definition.list	#89DDFF	—
markup.italic	#f07178	italic
markup.bold	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold	#f07178	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#C3E88D	—
markup.inline.raw.string.markdown	#C3E88D	—
markup.quote	#89DDFF	italic
markup.fenced_code.block	#EEFFFF90	—
punctuation.definition.quote	#ff9cac	—
entity.name.tag.yaml	#ff748e	—
keyword.other.definition.ini	#ff748e	—
entity.name.section.group-title.ini	#89DDFF	—
source.cs meta.class.identifier storage.type	#ffd16e	—
source.cs meta.method.identifier entity.name.function	#ff748e	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#82AAFF	—
source.cs storage.type	#ffd16e	—
source.cs meta.method.return-type	#ffd16e	—
source.cs meta.preprocessor	#4A4A4A	—
source.cs entity.name.type.namespace	#EEFFFF	—
source.cpp meta.block variable.other	#EEFFFF	—
meta.jsx.children, SXNested	#EEFFFF	—
support.class.component	#ffd16e	—
source.python meta.member.access.python	#ff748e	—
source.php support.other.namespace, source.php meta.use support.class	#EEFFFF	—

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