Nebula Theme

Name: Nebula Theme
Author: ChirtleLovesDolls

Publisher: ChirtleLovesDollsThemes in package: 2

🌌🌸 Fresh colors on a dark, cold slate. An almost-material theme for Visual Studio Code.

GitHub

Color themes

VS Code preview

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

Nebula Theme — Nebula

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#1F2330
activityBar.border#0F1320
activityBar.dropBackground#0F1320
activityBar.foreground#f6f0ff
activityBar.inactiveForeground#919CB9
activityBarBadge.background#E34F8C
badge.background#E34F8C
badge.foreground#f8f8f2
breadcrumb.activeSelectionForeground#FCF6FF
breadcrumb.background#27273A
breadcrumb.focusForeground#FCF6FF
breadcrumb.foreground#919CB9
breadcrumbPicker.background#27273A
button.background#E34F8C
button.hoverBackground#F661B1
debugExceptionWidget.border#24E8D8
debugToolBar.background#1F2330
debugToolBar.border#24E8D8
descriptionForeground#919CB9
diffEditor.insertedTextBackground#6EEEC425
diffEditor.removedTextBackground#E34F8C25
dropdown.background#1F2330
dropdown.border#B2CFFB3A
dropdown.foreground#D7D6DF
dropdown.listBackground#27273A
editor.background#27273A
editor.findMatchBackground#C7ADFB90
editor.findMatchBorder#C7ADFB00
editor.findMatchHighlightBackground#C7ADFB30
editor.findMatchHighlightBorder#C7ADFB50
editor.findRangeHighlightBackground#2A2A46
editor.foreground#fcf6ff
editor.lineHighlightBackground#2A2A46
editor.rangeHighlightBackground#2A2A46
editor.selectionBackground#42557BC0
editor.selectionForeground#25313e
editor.selectionHighlightBackground#42557B50
editor.selectionHighlightBorder#42557B
editor.snippetFinalTabstopHighlightBackground#1F2330
editor.snippetFinalTabstopHighlightBorder#24E8D890
editor.snippetTabstopHighlightBackground#1F2330
editor.snippetTabstopHighlightBorder#24E8D890
editor.wordHighlightBackground#42557B30
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#42557B30
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#2A2A46
editorBracketMatch.border#97EE91
editorCursor.foreground#97EE91
editorError.foreground#F36F98
editorGroup.border#0F1320
editorGroup.dropBackground#363C4C5f
editorGroup.emptyBackground#1F2330
editorGroupHeader.tabsBackground#1F2330
editorHint.foreground#F2C88C
editorHoverWidget.background#27273A
editorHoverWidget.border#24E8D8
editorIndentGuide.activeBackground#B2CFFB3A
editorIndentGuide.background#B2CFFB1A
editorLineNumber.activeForeground#24E8D8
editorLineNumber.foreground#919CB9
editorMarkerNavigation.background#1F2330
editorOverviewRuler.border#B2CFFB2A
editorOverviewRuler.selectionHighlightForeground#97EE91
editorPane.background#1F2330
editorRuler.foreground#C7ADFB2f
editorSuggestWidget.background#27273A
editorSuggestWidget.border#24E8D8
editorSuggestWidget.foreground#919CB9
editorSuggestWidget.highlightForeground#fcf6ff
editorSuggestWidget.selectedBackground#35355190
editorWarning.foreground#f2c88c
editorWhitespace.foreground#B2CFFB1A
editorWidget.background#1F2330
editorWidget.border#24E8D8
errorForeground#E34F8C
extensionButton.prominentBackground#97EE91
extensionButton.prominentForeground#0F1320
extensionButton.prominentHoverBackground#AFFA90
focusBorder#B2CFFB3A
foreground#fcf6ff
gitDecoration.conflictingResourceForeground#07ADFB
gitDecoration.deletedResourceForeground#E34F8C55
gitDecoration.ignoredResourceForeground#919CB9af
gitDecoration.modifiedResourceForeground#F2C88C
gitDecoration.submoduleResourceForeground#C7ADFB5f
gitDecoration.untrackedResourceForeground#e7ADFBa0
input.background#1F2330
input.border#B2CFFB1A
input.foreground#D7D6DF
input.placeholderForeground#919CB99c
inputOption.activeBorder#363C4C
inputValidation.errorBackground#1F2330
inputValidation.errorBorder#E34F8C
inputValidation.errorForeground#E34F8C
inputValidation.infoBackground#1F2330
inputValidation.infoBorder#919CB9
inputValidation.infoForeground#D7D6DF
inputValidation.warningBackground#1F2330
inputValidation.warningBorder#F2C88C
inputValidation.warningForeground#F2C88C
list.activeSelectionBackground#899BBF3a
list.dropBackground#f6f0ff15
list.errorForeground#F36F98
list.focusBackground#899BBF30
list.focusForeground#f6f0ff
list.highlightForeground#f8f8f2
list.hoverBackground#919CB915
list.hoverForeground#f6f0ffea
list.inactiveSelectionBackground#899BBF2c
list.inactiveSelectionForeground#fcf6ff
list.warningForeground#F2C88C
menu.background#27273A
menu.foreground#919CB9
menu.selectionBackground#899BBF3A
menu.selectionBorder#0F13207A
menu.selectionForeground#FCF6FF
menu.separatorBackground#B2CFFB3A
menubar.selectionBackground#899BBF3A
menubar.selectionBorder#0F13200A
menubar.selectionForeground#FCF6FF
notificationCenter.border#24E8D8
notificationCenterHeader.background#1F2330
notifications.border#24E8D8
notificationToast.border#24E8D8
panel.background#1F2330
panel.border#0F1320
panelTitle.activeBorder#24E8D8
panelTitle.activeForeground#24E8D8
panelTitle.inactiveForeground#919CB9
peekView.border#24E8D8
peekViewEditor.background#27273A
peekViewEditor.matchHighlightBackground#363C4C
peekViewResult.background#27273A
peekViewResult.matchHighlightBackground#363C4C
peekViewResult.selectionBackground#35355190
peekViewTitle.background#1F2330
pickerGroup.border#B2CFFB1A
pickerGroup.foreground#E752A1
progressBar.background#24E8D8
scrollbar.shadow#0F1320
scrollbarSlider.activeBackground#0F1320C0
scrollbarSlider.background#06080E4A
scrollbarSlider.hoverBackground#0F132090
selection.background#94cbf87a
settings.checkboxBackground#1F2330
settings.checkboxBorder#97EE9150
settings.checkboxForeground#97EE91
settings.dropdownBackground#1F2330
settings.dropdownBorder#B2CFFB1A
settings.dropdownForeground#E7ADFB
settings.dropdownListBorder#B2CFFB1A
settings.headerForeground#24E8D8
settings.inactiveSelectedItemBorder#B2CFFB1A
settings.modifiedItemForeground#E34F8C
settings.modifiedItemIndicator#E34F8C
settings.numberInputBackground#1F2330
settings.numberInputBorder#B2CFFB1A
settings.numberInputForeground#F8C275
settings.textInputBackground#1F2330
settings.textInputBorder#B2CFFB1A
settings.textInputForeground#50DFFE
sideBar.background#27273A
sideBar.border#0F1320
sideBar.dropBackground#363C4C5f
sideBar.foreground#919CB9
sideBarSectionHeader.background#1F2330
sideBarSectionHeader.border#27273A
sideBarSectionHeader.foreground#f6f0ff
sideBarTitle.foreground#24E8D8
statusBar.background#1F2330
statusBar.border#0F1320
statusBar.debuggingBackground#6EEEC4
statusBar.debuggingForeground#27273A
statusBar.foreground#919CB9
statusBar.noFolderBackground#E34FBC
statusBar.noFolderForeground#FCF6FF
tab.activeBackground#27273A
tab.activeBorder#0000
tab.activeForeground#24E8D8
tab.activeModifiedBorder#E34F8C
tab.border#353551
tab.hoverBorder#24E8D8
tab.inactiveBackground#1F2330
tab.inactiveForeground#919CB9
tab.inactiveModifiedBorder#E34F8C90
tab.unfocusedActiveBorder#0000
tab.unfocusedActiveForeground#47A9BC
tab.unfocusedActiveModifiedBorder#E34F8CA0
tab.unfocusedHoverBorder#47A9BC
tab.unfocusedInactiveForeground#79839C
tab.unfocusedInactiveModifiedBorder#E34F8C70
terminal.ansiBlack#353551
terminal.ansiBlue#C7ADFB
terminal.ansiBrightBlack#919CB9
terminal.ansiBrightBlue#74D6E9
terminal.ansiBrightCyan#8DF9F9
terminal.ansiBrightGreen#AFFA90
terminal.ansiBrightMagenta#F799C7
terminal.ansiBrightRed#F36F98
terminal.ansiBrightWhite#D7D6DF
terminal.ansiBrightYellow#FAFAA0
terminal.ansiCyan#24E8D8
terminal.ansiGreen#97F36D
terminal.ansiMagenta#E752A1
terminal.ansiRed#E34F8C
terminal.ansiWhite#FBD3E1
terminal.ansiYellow#F8C275
terminal.background#27273A
terminal.foreground#f6f0ff
terminal.selectionBackground#42557B5A
terminalCursor.background#0F1320
terminalCursor.foreground#97EE91
textBlockQuote.background#919CB91c
textBlockQuote.border#E34F8C
textLink.activeForeground#74D6E9
textLink.foreground#40afee
textPreformat.foreground#24E8D8
textSeparator.foreground#919CB9
titleBar.activeBackground#1F2330
titleBar.activeForeground#D7D6DF
titleBar.border#0F1320
titleBar.inactiveBackground#1F2330
titleBar.inactiveForeground#919CB9
welcomePage.buttonBackground#353551
welcomePage.buttonHoverBackground#919CB91c
widget.shadow#0F1320

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.curlybrace, punctuation.fullstop, punctuation.section, punctuation.support, punctuation.terminator, meta.structure.dictionary.json, string.quoted.double.json, constant.other.table-name.sql	#F6F0FF	—
support.variable, variable, support.type.property-name, variable.other.object.property, meta.object-literal.key.js, string.other.link.description.markdown	#8DF9F9	—
keyword.var, keyword.const, constant, keyword.struct, keyword.interface, keyword.function, markup.inline.raw, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, support.constant, support.type, support.class, markup.inserted, entity.name.type, entity.name.class, entity.other.inherited-class, entity.other.attribute-name.id.css	#97EE91	—
punctuation.terminator, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css	#919CB9	—
constant.other.database-name.sql, variable.other.object	#C5B9DF	—
comment	#8059A2	—
string, markup.quote, markup.bold, markup.italic, string.quoted.single.js, string.quoted.double.js, meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link, entity.name.type.js	#50DFFE	—
string.quoted.docstring, storage.type.function, keyword.type, storage.type, punctuation.accessor, punctuation.separator, meta.brace.square.js, meta.brace.square.ts	#E7ADFB	—
entity.name.class, entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, meta.function-call.generic, support.function, support.other.escape.special.regexp	#F36F98	—
entity.name.tag, storage, support.function.builtin, variable.language, constant.numeric, variable.parameter, markup.bold, markup.underline, markup.italic, string.quoted.double.css, punctuation.definition.string.css	#F8C275	—
entity.name.section, keyword, punctuation.definition.heading, punctuation.definition.keyword, keyword.other.DML.sql, constant.character.escape.markdown, entity.other.attribute-name.class.css	#E752A1	—
meta.brace, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.begin.bracket, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.dict, punctuation.definition.dictionary, punctuation.definition.end.bracket, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.tag, punctuation.other.comma, punctuation.other.period, punctuation.section, punctuation.support, punctuation.terminator	#FBD3E1	—
punctuation.definition.template-expression, punctuation.section.embedded, storage, markup.deleted, markup.heading, entity.name.section.markdown, token.error-token	#E34F8C	—
markup.changed, entity.name.filename.find-in-files, markup.quote, keyword.other.unit.px.css, keyword.other.unit.fr.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css	#FAFAA0	—
markup.fenced_code.block.markdown, keyword.type, keyword.other.alias.sql, meta.functiona.variable.css, variable.argument.css, constant.numeric.line-number.find-in-files - match	#C7ADFB	—
variable, text.html.markdown, support.constant.property-value.css	#FCF6FF	—
beginning.punctuation.definition.list.markdown, constant.language.null, constant.language.boolean.true, constant.language.boolean.false, entity.other.attribute-name.pseudo-element.css	#F39B35	—
meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link	#99ddff	—
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
entity.other.inherited-class, entity.name.type, entity.name.class, entity.other.inherited-class	—	underline
comment, entity.other.attribute-name.pseudo-element.css, entity.other.inherited-class, markup.italic.markdown, markup.quote, meta.function.variable.css, punctuation.definition.italic.markdown, punctuation.definition.string.css, storage.type.function, string.quoted.double.css, variable.argument.css, entity.name.tag.custom, entity.name.type.ts, italic, keyword.operator.type.annotation, keyword.control.import, modifier, punctuation.section.embedded, quote, storage.type, storage.type.class, support.class, support.class.builtin, support.constant, support.function.basic_functions, support.function.builtin, support.type.primitive, support.type.property.css, this, type.function, variable.parameter	—	italic

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