DecodeLabs nucleus theme

Name: DecodeLabs nucleus theme
Author: Decode Labs

Publisher: Decode LabsThemes in package: 1

Easy on the eyes colour theme for web dev

GitHub

VS Code preview

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

DecodeLabs nucleus theme — Nucleus Dark

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#2F3237
activityBar.border#202628ce
activityBar.foreground#abafb4
activityBarBadge.background#aa3d1f
activityBarBadge.foreground#ffffff
badge.background#aa3d1f
badge.foreground#ffffff
button.background#7c6c67
button.foreground#ffffff
button.hoverBackground#9c776c
debugExceptionWidget.background#2F3237
debugToolBar.background#2F3237
diffEditor.insertedTextBackground#9ab76d30
diffEditor.insertedTextBorder#addb6728
diffEditor.removedTextBackground#ef535033
diffEditor.removedTextBorder#ef53504d
dropdown.background#262B2D
dropdown.border#202628ce
dropdown.foreground#bebebe
dropdown.listBackground#262B2D
editor.background#2F3237
editor.findMatchBackground#8fd01e22
editor.findMatchBorder#dbeb8a8b
editor.findMatchHighlightBackground#99af1a30
editor.findMatchHighlightBorder#a0ab634c
editor.foreground#cacfd4
editor.hoverHighlightBackground#3d42482d
editor.inactiveSelectionBackground#696e731d
editor.lineHighlightBackground#3d42482f
editor.rangeHighlightBackground#646c7728
editor.selectionBackground#8494a892
editor.selectionHighlightBackground#84646d65
editor.wordHighlightBackground#696e7336
editor.wordHighlightBorder#696e7340
editor.wordHighlightStrongBackground#696e733b
editor.wordHighlightStrongBorder#696e7358
editorBracketMatch.background#ace8a822
editorBracketMatch.border#b8e8b50a
editorCursor.foreground#9ab4be
editorError.foreground#ef5350
editorGroup.border#535860
editorGroupHeader.tabsBackground#23282a
editorGutter.background#2F3237
editorHoverWidget.border#5f7e97
editorIndentGuide.activeBackground1#e0b4d92a
editorIndentGuide.background1#ede9d807
editorLineNumber.foreground#575C61
editorOverviewRuler.commonContentForeground#7e57c2
editorOverviewRuler.currentContentForeground#7e57c2
editorOverviewRuler.incomingContentForeground#7e57c2
editorSuggestWidget.background#292c31
editorSuggestWidget.border#435053
editorSuggestWidget.foreground#d6deeb
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#4b5c6b75
editorWarning.foreground#ffca28
editorWhitespace.foreground#3B3A32
editorWidget.background#262d2f
editorWidget.border#445458
errorForeground#EF5350
focusBorder#aa3d1f67
foreground#cacfd4
input.background#3d4047
input.border#565d68
input.foreground#ffffffcc
input.placeholderForeground#ffffff37
list.activeSelectionBackground#599cb25a
list.dropBackground#b2ae5976
list.focusBackground#434a518f
list.focusForeground#ffffff
list.highlightForeground#ffffff
list.hoverBackground#434a518f
list.hoverForeground#e3e2d4cf
list.inactiveSelectionBackground#434a518f
list.inactiveSelectionForeground#a4b2be
list.invalidItemForeground#975f94
minimap.background#24262aef
minimap.findMatchHighlight#d0ff84cc
minimap.selectionHighlight#e9eee1cc
notificationLink.foreground#cb779d
notifications.background#23282a
notifications.foreground#ffffffc0
notificationToast.border#495458a7
panel.background#23282a
panel.border#1b2021ce
panelTitle.activeBorder#c7ccd1
panelTitle.activeForeground#e7eaec
panelTitle.inactiveForeground#6f7071
peekView.border#f1e39b7d
peekViewEditor.background#373f42
peekViewEditor.matchHighlightBackground#f8f1aa65
peekViewEditor.matchHighlightBorder#fdf6a788
peekViewResult.background#373f42
peekViewResult.matchHighlightBackground#f8f2aa4e
peekViewResult.selectionBackground#6b767a
peekViewResult.selectionForeground#e3e2e2
peekViewTitle.background#2d3336
peekViewTitleDescription.foreground#76abb5
peekViewTitleLabel.foreground#ede8a8
progressBar.background#aa3d1f
scrollbar.shadow#010b14
scrollbarSlider.activeBackground#85a9b55a
scrollbarSlider.background#85a9b52d
scrollbarSlider.hoverBackground#85a9b55a
sideBar.background#262b2d
sideBar.border#202628ce
sideBar.foreground#b2b2b2
sideBarSectionHeader.background#2c3438
sideBarSectionHeader.foreground#d6d9dd
sideBarTitle.foreground#5d5d5d
statusBar.background#262A2D
statusBar.border#191d1ece
statusBar.debuggingBackground#7c3f65
statusBar.debuggingForeground#efefef
statusBar.foreground#c3c6c8
statusBarItem.activeBackground#717171a2
statusBarItem.hoverBackground#71717153
statusBarItem.prominentBackground#717171a7
statusBarItem.prominentHoverBackground#717171a7
tab.activeBackground#3d4147
tab.activeBorderTop#9e6311
tab.activeForeground#ffffff
tab.inactiveBackground#40404047
tab.inactiveForeground#82878b
textLink.activeForeground#d48b67
textLink.foreground#b97c5d
titleBar.activeBackground#2F3237
titleBar.activeForeground#afafaf
titleBar.border#303030
titleBar.inactiveBackground#23282A
tree.indentGuidesStroke#e0b4d91a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.modifier, support.function.construct.output, support.function.general.tex, support.function.be.latex, support.function.section.latex, support.function.textit.latex	#80d746ea	—
keyword.control, support.function.construct.output, support.function.general.tex, support.function.be.latex, support.function.section.latex, support.function.textit.latex	—	bold
storage, storage.type.function, storage.type.class, storage.type.interface, storage.type.trait, meta.var storage.type	#BEB2A0
entity.name.function, support.function.magic, meta.function-call, meta.method-call, meta.use constant.other, keyword.other.get, keyword.other.set	#8fcbff	—
meta.function entity.name.function	—	bold
meta.function support.function.magic	—	bold italic
storage.type, keyword.other.type, keyword.type	#5affe6df	italic
entity.name.type.namespace, support.other.namespace, support.other.namespace storage.type	#49a89ae6	—
support.other.namespace variable.language.namespace	#eae088c8	—
support.class, entity.name.type, entity.other.inherited-class, entity.other.alias, meta.interface	#5affe6df	—
entity.other.alias	—	italic
entity.name.type.class, entity.name.type.interface, entity.name.type.trait	#a9d7ff	underline
punctuation, keyword.operator, meta.brace	#868e90	—
punctuation.separator.inheritance	#868e9094	—
punctuation.section.embedded	#ea7b7b	bold
keyword.operator.type.php, keyword.control.as, keyword.other.use-as, keyword.other.use-insteadof, storage.type.property, keyword.operator.new, keyword.other.new	#eae088da	—
constant, support.constant, support.type.builtin, support.type.primitive, variable.parameter.definition.label.latex	#dbace8	—
constant.other	#fd7acd	—
constant.other, constant.character.escape, variable.parameter.definition.label.latex	—	bold
comment, punctuation.definition.comment	#60554a	bold
comment keyword	#fd7acde1	bold
variable, string constant.other.placeholder	#ced4da	—
variable.language.this, keyword.other.this	#abdad3	italic
punctuation.definition.variable	#a2a8af	—
support.other.variable, string.other.link, markup.underline.link	#d0bbef	—
source.shell variable, variable.other.env	#d4c290	—
punctuation.definition.string	#85625B	—
string.quoted, meta.attribute-selector, source.env	#ff9494	—
string.regexp	#eaac8d	—
keyword.control.anchor.regexp	#fdf3ef	—
string.regexp keyword	#fecccc	—
constant.other.character-class.regexp, keyword.operator.quantifier.regexp, constant.other.character-class.range.regexp	#86e1efc7	—
constant.other.character-class.range.regexp	#eae188	—
string.template, string.other.link.title, string.other.link.description	#f4c3aa	—
meta.object-literal.key, meta.object-literal.key string.quoted, support.type.property-name.json, entity.name.tag.yaml, entity.name.function.neon, support.other.neon	#b2d7d7c2	—
entity.name.variable.parameter.php, variable.parameter.function.latex	#aec29be9	—
source.neon, string.unquoted.plain, string.quoted.single.yaml, string.quoted.double.yaml, string.quoted.single.neon, string.quoted.double.neon, meta.structure.dictionary string.quoted.double	#d4c076	—
keyword.preprocessor	#bda241	bold
entity.name.tag.css	#5affe6	—
keyword.other.unit	#eae188	—
entity.other.attribute-name.class, entity.other.attribute-name	#ffc277	—
entity.other.attribute-name.pseudo-class	#8fcbff	italic
entity.name.tag.reference	#6adc40	italic
source.css variable	#ed6dbe	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#d2c4b5	—
entity.name.tag	#b09b7c	—
meta.attribute, meta.attribute entity.other.attribute-name	#5affe6	—
meta.attribute string.quoted	#f1bdff	—
constant.other.rgb-value	#b79d7e	—
markup.heading	#8fcbff	bold
markup.bold	#f1bdff	bold
markup.italic	#f1bdff	italic
markup.quote	#5affe6	—
markup.list	#ab9067	—
markup.raw.block, markup.inline.raw.string, markup.fenced_code.block	#ff9494	—

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