Stella One Theme

Name: Stella One Theme
Author: 4S1ght

Publisher: 4S1ghtThemes in package: 2

A warm-coloured minimalist VSCode theme.

GitHub

Color themes

VS Code preview

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

Stella One Theme — Stella | Contrast

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#100f11
activityBar.border#18171a
activityBar.dropBorder#e3975d
activityBar.foreground#d2cdd8aa
activityBar.inactiveForeground#d2cdd844
activityBarBadge.background#e3975dff
activityBarBadge.foreground#100f11
background#100f11
badge.background#e3975d
badge.foreground#000000
button.background#e3975d
button.border#0000
button.foreground#000000
button.hoverBackground#fcbe8f
button.secondaryBackground#34333a
button.secondaryForeground#d2cdd8
checkbox.background#212024
checkbox.border#56535c44
checkbox.foreground#e3975d
checkbox.selectBorder#0000
commandCenter.activeBackground#18171acc
commandCenter.activeBorder#18171a
commandCenter.activeForeground#d2cdd8aa
commandCenter.background#18171a88
commandCenter.border#18171a
commandCenter.inactiveBorder#0000
diffEditor.border#56535c22
diffEditor.diagonalFill#d2cdd82a
diffEditor.insertedLineBackground#51ff0011
diffEditor.insertedTextBackground#51ff001c
diffEditor.insertedTextBorder#0000
diffEditor.move.border#0000
diffEditor.moveActive.border#0000
diffEditor.removedLineBackground#ff282822
diffEditor.removedTextBackground#ff28282f
diffEditor.removedTextBorder#0000
diffEditorGutter.insertedLineBackground#56535c33
diffEditorGutter.removedLineBackground#100f1177
dropdown.background#212024
dropdown.border#56535c44
dropdown.listBackground#212024
editor.background#18171a
editor.findMatchBackground#ff504d11
editor.findMatchBorder#ff504daa
editor.findMatchHighlightBackground#ff504d11
editor.findMatchHighlightBorder#ff504daa
editor.foreground#a09891
editor.inactiveSelectionBackground#d2cdd811
editor.lineHighlightBackground#56535c28
editor.lineHighlightBorder#0000
editor.selectionBackground#d2cdd822
editor.selectionForeground#d2cdd8aa
editor.selectionHighlightBackground#ff504d44
editor.selectionHighlightBorder#ff504d88
editor.wordHighlightBackground#d2cdd844
editor.wordHighlightStrongBackground#d2cdd822
editor.wordHighlightStrongBorder#d2cdd833
editorBracketHighlight.foreground1#ebb164
editorBracketHighlight.foreground2#df5764
editorBracketHighlight.foreground3#56B6C2
editorBracketHighlight.foreground4#ebb164
editorBracketHighlight.foreground5#df5764
editorBracketHighlight.foreground6#56B6C2
editorCursor.background#100f11
editorCursor.foreground#ff504d
editorError.foreground#ff413e
editorGhostText.foreground#7e7b82aa
editorGroup.border#56535c88
editorGroup.dropBackground#7e798a2b
editorGroup.dropIntoPromptBackground#100f11
editorGroup.dropIntoPromptBorder#56535c
editorGroup.dropIntoPromptForeground#d2cdd8
editorGroup.focusedEmptyBorder#0000
editorGroupHeader.border#0000
editorGroupHeader.tabsBackground#100f11
editorHoverWidget.border#56535caa
editorIndentGuide.activeBackground#d2cdd822
editorIndentGuide.background#d2cdd811
editorInlayHint.background#212024
editorInlayHint.foreground#d2cdd899
editorLineNumber.activeForeground#d2cdd8
editorLineNumber.dimmedForeground#d2cdd833
editorLineNumber.foreground#d2cdd855
editorOverviewRuler.border#18171a
editorRuler.foreground#d2cdd811
editorStickyScroll.background#18171a
editorStickyScrollHover.background#34333a
editorSuggestWidget.background#18171a
editorSuggestWidget.border#56535c44
editorSuggestWidget.focusHighlightForeground#e3975d
editorSuggestWidget.foreground#d2cdd8aa
editorSuggestWidget.highlightForeground#d2cdd8
editorSuggestWidget.selectedBackground#e3975d44
editorSuggestWidget.selectedForeground#d2cdd8
editorSuggestWidget.selectedIconForeground#e3975d
editorWidget.background#212024
editorWidget.border#56535c
editorWidget.foreground#d2cdd8
editorWidget.resizeBorder#56535c
focusBorder#e3975d
foreground#d2cdd8
gitDecoration.addedResourceForeground#99b440
gitDecoration.conflictingResourceForeground#ff514f
gitDecoration.deletedResourceForeground#ff514f
gitDecoration.ignoredResourceForeground#d2cdd866
gitDecoration.modifiedResourceForeground#b1826f
gitDecoration.renamedResourceForeground#5c81c7
gitDecoration.stageDeletedResourceForeground#ff2e2b
gitDecoration.stageModifiedResourceForeground#b1826f
gitDecoration.untrackedResourceForeground#99b440
icon.foreground#d2cdd888
input.background#212024
input.border#34333a
input.foreground#d2cdd8
input.placeholderForeground#d2cdd888
keybindingLabel.background#56535c
keybindingLabel.border#56535c
keybindingLabel.foreground#d2cdd8
list.activeSelectionBackground#56535c66
list.dropBackground#7e798a2b
list.errorForeground#ff413e
list.filterMatchBackground#ff504d44
list.filterMatchBorder#ff504dbb
list.focusBackground#56535c44
list.focusOutline#0000
list.highlightForeground#e3975d
list.hoverBackground#34333a88
list.inactiveSelectionBackground#21202466
list.inactiveSelectionForeground#d2cdd8aa
list.inactiveSelectionIconForeground#d2cdd8
list.warningForeground#ff9c51
listFilterWidget.background#212024
minimap.errorHighlight#ff413e
minimap.findMatchHighlight#ff504d
minimap.foregroundOpacity#000000
minimap.selectionHighlight#d2cdd866
minimap.warningHighlight#ff9c51
minimapSlider.background#d2cdd81a
notificationCenter.border#56535c
notificationCenterHeader.background#34333a
notifications.background#212024
notifications.border#0000
notifications.foreground#d2cdd8
notificationsErrorIcon.foreground#ff413e
notificationsInfoIcon.foreground#d2cdd8
notificationsWarningIcon.foreground#ff9c51
notificationToast.border#0000
panel.background#131214
panel.border#56535c55
panel.dropBorder#e3975d
panelInput.border#56535c44
panelSection.border#56535c44
panelSection.dropBackground#7e798a2b
panelSectionHeader.background#56535c44
panelSectionHeader.border#0000
panelTitle.activeBorder#56535c88
panelTitle.activeForeground#d2cdd8
panelTitle.inactiveForeground#d2cdd888
pickerGroup.border#56535c
pickerGroup.foreground#d2cdd8
quickInput.background#212024
quickInput.foreground#d2cdd8
quickInputList.focusForeground#e3975d
scrollbar.shadow#100f11
scrollbarSlider.activeBackground#56535ccc
scrollbarSlider.background#56535c66
scrollbarSlider.hoverBackground#56535c99
selection.background#d2cdd866
sideBar.background#100f11
sideBar.border#0000
sideBar.dropBackground#7e798a2b
sideBar.foreground#d2cdd8aa
sideBarSectionHeader.background#18171aab
sideBarSectionHeader.border#0000
sideBarSectionHeader.foreground#d2cdd888
sideBarTitle.foreground#d2cdd888
sideBySideEditor.horizontalBorder#0000
sideBySideEditor.verticalBorder#0000
statusBar.background#100f11
statusBar.border#18171a
statusBar.debuggingBackground#212024
statusBar.debuggingBorder#0000
statusBar.foreground#d2cdd8aa
statusBar.noFolderBackground#100f11
statusBar.noFolderForeground#d2cdd8aa
statusBarItem.hoverBackground#56535c66
statusBarItem.hoverForeground#d2cdd8
statusBarItem.remoteBackground#100f11
statusBarItem.remoteForeground#d2cdd8
statusBarItem.remoteHoverBackground#56535c66
statusBarItem.remoteHoverForeground#d2cdd8
symbolIcon.arrayForeground#d2cdd8
symbolIcon.booleanForeground#d2cdd8
symbolIcon.classForeground#71a0ff
symbolIcon.colorForeground#d2cdd8
symbolIcon.constantForeground#d2cdd8
symbolIcon.constructorForeground#d2cdd8
symbolIcon.enumeratorForeground#d2cdd8
symbolIcon.enumeratorMemberForeground#d2cdd8
symbolIcon.eventForeground#d2cdd8
symbolIcon.fieldForeground#d2cdd8
symbolIcon.fileForeground#d2cdd8
symbolIcon.folderForeground#d2cdd8
symbolIcon.functionForeground#d87533
symbolIcon.interfaceForeground#71a0ff
symbolIcon.keyForeground#d2cdd8
symbolIcon.keywordForeground#d87533
symbolIcon.methodForeground#d87533
symbolIcon.moduleForeground#d2cdd8
symbolIcon.namespaceForeground#71a0ff
symbolIcon.nullForeground#d2cdd8
symbolIcon.numberForeground#d2cdd8
symbolIcon.objectForeground#ffc157
symbolIcon.operatorForeground#d2cdd8
symbolIcon.packageForeground#d2cdd8
symbolIcon.propertyForeground#d2cdd8
symbolIcon.referenceForeground#d2cdd8
symbolIcon.snippetForeground#d2cdd8
symbolIcon.stringForeground#d2cdd8
symbolIcon.structForeground#d2cdd8
symbolIcon.textForeground#d2cdd8
symbolIcon.typeParameterForeground#d2cdd8
symbolIcon.unitForeground#d2cdd8
symbolIcon.variableForeground#d2cdd8
tab.activeBackground#18171a
tab.activeBorder#0000
tab.activeBorderTop#0000
tab.activeForeground#d2cdd8
tab.activeModifiedBorder#0000
tab.border#0000
tab.hoverBackground#18171aaa
tab.hoverBorder#0000
tab.inactiveBackground#100f11
tab.inactiveForeground#d2cdd888
tab.inactiveModifiedBorder#0000
tab.lastPinnedBorder$0000
tab.unfocusedActiveBorder#0000
tab.unfocusedActiveBorderTop#0000
tab.unfocusedActiveModifiedBorder#0000
tab.unfocusedHoverBorder#0000
tab.unfocusedInactiveModifiedBorder#0000
terminal.ansiBlack#3f3c37
terminal.ansiBlue#298ffc
terminal.ansiBrightBlack#6a665e
terminal.ansiBrightBlue#78b9ff
terminal.ansiBrightCyan#62ffd3
terminal.ansiBrightGreen#97ff4d
terminal.ansiBrightMagenta#f571dd
terminal.ansiBrightRed#ff6b6b
terminal.ansiBrightWhite#f1eadd
terminal.ansiBrightYellow#ffc45e
terminal.ansiCyan#18ca98
terminal.ansiGreen#66af32
terminal.ansiMagenta#cc1fac
terminal.ansiRed#d13327
terminal.ansiWhite#c4bcaf
terminal.ansiYellow#d89a2f
terminal.border#56535c33
terminal.dropBackground#7e798a2b
terminal.foreground#c4bcaf
terminal.tab.activeBorder#e3975ddd
textLink.activeForeground#fcbe8f
textLink.foreground#e3975d
titleBar.activeBackground#100f11
titleBar.activeForeground#d2cdd877
titleBar.border#18171a
titleBar.inactiveBackground#100f11
titleBar.inactiveForeground#d2cdd833
tree.inactiveIndentGuidesStroke#56535c33
tree.indentGuidesStroke#56535c77
tree.tableColumnsBorder#56535c88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7e7b82	—
string, string.quoted.double punctuation, string.quoted.single punctuation, punctuation.definition.string	#a4c549	—
meta.template.expression punctuation.definition	#db4c5a	—
constant.character.escape	#50cbdb	—
constant.other.color	#50cbdb	—
string.regexp, string.regexp constant.other.character-class.regexp, string.regexp constant.character.escape.backslash.regexp, string.regexp constant.other.character-class.set.regexp, string.regexp keyword.operator.quantifier.regexp, string.regexp keyword.control.anchor.regexp	#50cbdb	—
punctuation.definition.character-class.regexp, punctuation.definition.group.regexp, string.regexp keyword.operator	#50cbdb	—
keyword.operator.quantifier.regexp	#ffb95e	—
keyword.operator	#a09891	—
punctuation	#a09891	—
keyword.operator.expression	#e94986	—
keyword, keyword.operator.new	#e94986	—
storage	#e94986	—
support.function	#df7a48	—
keyword.other.special-method	#e94986	—
variable, support.variable, entity.name.tag	#db4c5a	—
meta.import	#db4c5a	—
constant, support.constant, variable.other.constant.property	#ffb95e	—
variable.parameter	#a09891	—
punctuation.definition.alias, punctuation.definition.anchor	#e94986	—
support.type.property-name	#a09891	—
entity.name.function	#df7a48	—
entity.name.type, entity.other.inherited-class, support.class	#46acff	—
entity.name.type.module	#a4c549	—
support.type	#50cbdb	—
storage.type.primitive	#e94986	—
entity.other.attribute-name	#ffb95e	—
keyword.other.unit	#ffb95e	—
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.delete.ts, keyword.operator.expression.delete.js, keyword.operator.expression.void.ts, keyword.operator.expression.void.js	#50cbdb	—
variable.other.constant.js, variable.other.constant.ts	#ffb95e	—
meta.object-literal.key.js, meta.object-literal.key.ts	#db4c5a	—
variable.other.readwrite.js, variable.other.readwrite.ts	#a09891	—
variable.other.object.js, variable.other.object.ts	#a09891	—
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts	#db4c5a	—
support.type.object.module.js, support.type.object.module.ts	#db4c5a	—
string.regexp.js punctuation.definition.string, string.regexp.ts punctuation.definition.string	#50cbdb	—
meta.template.expression.js meta.brace.round, meta.template.expression.ts meta.brace.round, meta.template.expression.js variable.other.object.js, meta.template.expression.ts variable.other.object.ts	#df7a48	—
storage.type.numeric.bigint.ts, storage.type.numeric.bigint.js, constant.numeric.hex.ts, constant.numeric.hex.js, constant.numeric.octal.ts, constant.numeric.octal.js, constant.numeric.binary.ts, constant.numeric.binary.js	#50cbdb	—
punctuation.definition.constant.css	#ffb95e	—
punctuation.definition.entity.css	#ffb95e	—
support.constant.property-value.css	#a09891	—
punctuation.definition.variable.css	#db4c5a	—
punctuation.definition.entity.css	#ffb95e	—
constant.other.color	#ffb95e	—
punctuation.definition.variable.less	#db4c5a	—
punctuation.definition.keyword.less	#e94986	—
variable.other.object.cs, variable.other.object.property.cs	#a09891	—
variable.other.readwrite.cs	#a09891	—
entity.name.variable.field.cs	#db4c5a	—
entity.name.type.namespace.cs	#a09891	—
support.function	#df7a48	—
source.java storage.type	#46acff	—
support.type.property-name.json, support.type.property-name.json punctuation	#db4c5a	—
constant.language.json	#50cbdb	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#db4c5a	—
markup.underline.link.image.markdown, markup.underline.link.markdown, punctuation.definition.metadata.markdown	#e94986	—
string.other.link.description.markdown, string.other.link.title.markdown	#df7a48	—
markup.bold, punctuation.definition.bold.markdown	#ffb95e	—
markup.italic, punctuation.definition.italic.markdown	#e94986	—
punctuation.definition.variable.php	#db4c5a	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#50cbdb	—
punctuation.definition.decorator.python, entity.name.function.decorator.python, support.type.python	#50cbdb	—
meta.function-call.python, support.function.builtin.python	#df7a48	—
meta.function-call.arguments.python	#a09891	—
keyword.operator.logical.python	#e94986	—
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, meta.embedded.line.ruby	#db4c5a	—
support.function.kernel.ruby	#50cbdb	—
variable.other.constant.ruby	#ffb95e	—
string.regexp.classic.ruby, punctuation.definition.string.ruby, punctuation.section.regexp.ruby	#50cbdb	—
constant.language.symbol.hashkey.ruby	#db4c5a	—
constant.language.symbol.ruby	#a09891	—
entity.name.type.rust	#46acff	—
entity.name.type.primitive.rust	#50cbdb	—
meta.definition.property.tsx variable	#a09891	—
punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml	#a09891	—
entity.name.type.anchor.yaml, variable.other.alias.yaml	#df7a48	—

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