Nothing OS Theme

Name: Nothing OS Theme
Author: xexefe

Publisher: xexefeThemes in package: 5

A minimal, high-contrast theme inspired by Nothing OS design language with signature red accents and dot-matrix aesthetics

GitHub

Color themes

Nothing OS Special

VS Code preview

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

Nothing OS Theme — Nothing OS Special

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ffc70340
activityBar.activeBorder#ffc703
activityBar.background#000000
activityBar.foreground#ffffff
activityBar.inactiveForeground#6b7d85
activityBarBadge.background#ffc703
activityBarBadge.foreground#000000
badge.background#ffc703
badge.foreground#000000
breadcrumb.activeSelectionForeground#ffc703
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#b4b4b4
breadcrumbPicker.background#000000
button.background#6b7d85
button.foreground#ffffff
button.hoverBackground#ffc703
button.secondaryBackground#6b7d85
button.secondaryForeground#ffffff
button.secondaryHoverBackground#b4b4b4
checkbox.background#000000
checkbox.border#6b7d85
checkbox.foreground#ffffff
diffEditor.border#6b7d85
diffEditor.insertedTextBackground#012f6b40
diffEditor.removedTextBackground#c80f2e40
dropdown.background#000000
dropdown.border#6b7d85
dropdown.foreground#ffffff
editor.background#000000
editor.findMatchBackground#ffc70380
editor.findMatchHighlightBackground#ffc70340
editor.findRangeHighlightBackground#c80f2e40
editor.foreground#ffffff
editor.lineHighlightBackground#012f6b40
editor.lineHighlightBorder#ffc703
editor.selectionBackground#012f6b80
editor.selectionHighlightBackground#505a6040
editorBracketMatch.background#c80f2e40
editorBracketMatch.border#ffc703
editorCursor.foreground#ffc703
editorError.foreground#c80f2e
editorIndentGuide.activeBackground1#b4b4b4
editorIndentGuide.background1#6b7d85
editorInfo.foreground#4a6fa5
editorLineNumber.activeForeground#b4b4b4
editorLineNumber.foreground#6b7d85
editorSuggestWidget.background#000000
editorSuggestWidget.border#6b7d85
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#ffc703
editorSuggestWidget.selectedBackground#c80f2e40
editorWarning.foreground#ffc703
editorWhitespace.foreground#6b7d85
editorWidget.background#000000
editorWidget.border#6b7d85
errorForeground#c80f2e
gitDecoration.conflictingResourceForeground#c80f2e
gitDecoration.deletedResourceForeground#c80f2e
gitDecoration.ignoredResourceForeground#6b7d85
gitDecoration.modifiedResourceForeground#ffc703
gitDecoration.untrackedResourceForeground#b4b4b4
input.background#000000
input.border#6b7d85
input.foreground#ffffff
input.placeholderForeground#6b7d85
inputOption.activeBorder#ffc703
inputValidation.errorBackground#c80f2e
inputValidation.errorBorder#c80f2e
inputValidation.infoBackground#012f6b
inputValidation.infoBorder#012f6b
inputValidation.warningBackground#ffc703
inputValidation.warningBorder#ffc703
list.activeSelectionBackground#012f6b80
list.activeSelectionForeground#ffffff
list.focusBackground#012f6b80
list.focusForeground#ffffff
list.highlightForeground#e85f6f
list.hoverBackground#ffc70330
list.hoverForeground#ffffff
list.inactiveSelectionBackground#012f6b40
list.inactiveSelectionForeground#b4b4b4
notificationCenter.border#6b7d85
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#ffc703
notifications.background#000000
notifications.border#6b7d85
notifications.foreground#ffffff
notificationToast.border#6b7d85
panel.background#000000
panel.border#6b7d85
panelInput.border#6b7d85
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#b4b4b4
problemsErrorIcon.foreground#c80f2e
problemsInfoIcon.foreground#4a6fa5
problemsWarningIcon.foreground#ffc703
progressBar.background#ffc703
scrollbarSlider.activeBackground#c80f2e80
scrollbarSlider.background#505a6080
scrollbarSlider.hoverBackground#b4b4b480
searchEditor.findMatchBackground#ffc70380
sideBar.background#000000
sideBar.foreground#ffffff
sideBarSectionHeader.background#012f6b40
sideBarSectionHeader.border#6b7d85
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#000000
statusBar.border#6b7d85
statusBar.debuggingBackground#c80f2e
statusBar.foreground#ffffff
statusBar.noFolderBackground#000000
tab.activeBackground#012f6b80
tab.activeBorder#ffc703
tab.activeForeground#ffffff
tab.border#6b7d85
tab.hoverBackground#ffc70330
tab.inactiveBackground#000000
tab.inactiveForeground#b4b4b4
tab.unfocusedActiveBackground#000000
tab.unfocusedActiveForeground#b4b4b4
terminal.ansiBlack#000000
terminal.ansiBlue#012f6b
terminal.ansiBrightBlack#6b7d85
terminal.ansiBrightBlue#012f6b
terminal.ansiBrightCyan#dbdbdc
terminal.ansiBrightGreen#b4b4b4
terminal.ansiBrightMagenta#b4b4b4
terminal.ansiBrightRed#c80f2e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffc703
terminal.ansiCyan#dbdbdc
terminal.ansiGreen#b4b4b4
terminal.ansiMagenta#b4b4b4
terminal.ansiRed#c80f2e
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffc703
terminal.background#000000
terminal.foreground#ffffff
terminalCursor.foreground#ffc703
textBlockQuote.background#6b7d85
textBlockQuote.border#6b7d85
textCodeBlock.background#000000
textLink.activeForeground#ffd84d
textLink.foreground#ffc703
textSeparator.foreground#6b7d85
titleBar.activeBackground#000000
titleBar.activeForeground#ffffff
titleBar.border#6b7d85
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#6b7d85
tree.indentGuidesStroke#6b7d85

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6b7d85	italic
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.other.important	#ffd84d	bold
keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.break, keyword.control.continue, keyword.control.exception	#d93d4f	bold
string, string.quoted, string.template, punctuation.definition.string	#a3b4cc	—
constant.numeric	#e85f6f	—
constant.language.boolean, constant.language.null, constant.language.undefined, constant.other	#e85f6f	—
entity.name.function, support.function, meta.function-call.generic, meta.method-call, entity.name.method	#5a7fb8	—
variable, variable.other, variable.parameter, meta.definition.variable	#e1e6f0	—
entity.name.type, entity.name.class, support.type, support.class, storage.type.class, entity.name.namespace	#6b8fc9	—
variable.other.property, support.type.property-name	#5a7fb8	—
variable.other.readwrite, variable.other.object.property	#e85f6f	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml	#6b8fc9	—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#5a7fb8	—
keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison	#b4b4b4	—
keyword.operator.assignment, keyword.operator.arrow, keyword.operator.spread, keyword.operator.rest	#e85f6f	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#b4b4b4	—
punctuation.decorator, entity.name.function.decorator	#5a7fb8	—
invalid, invalid.illegal	#c80f2e	bold
markup.heading, entity.name.section	#ffd84d	bold
markup.underline.link, string.other.link	#c80f2e	underline
markup.bold	—	bold
markup.italic	—	italic
markup.quote	#b4b4b4	italic
markup.inline.raw, markup.fenced_code.block	#ffd84d	—
support.type.property-name.json	#ffd84d	—
string.quoted.double.json	#a3b4cc	—
constant.numeric.json	#e85f6f	—
constant.language.boolean.json, constant.language.null.json	#e85f6f	—
support.type.property-name.css	#5a7fb8	—
support.constant.property-value.css	#e85f6f	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#6b8fc9	—
entity.other.attribute-name.html	#5a7fb8	—
string.quoted.double.html, string.quoted.single.html	#a3b4cc	—
markup.inserted.diff	#b4b4b4	—
markup.deleted.diff	#c80f2e	—
variable.language.this, variable.language.self	#ffd84d	italic
entity.name.type.interface	#6b8fc9	—
entity.name.type.parameter	#6b8fc9	—
variable.parameter.function.language.python	#8a8a8a	italic
string.regexp	#e85f6f	—
storage.modifier.async, storage.modifier.static, storage.modifier.abstract	#d93d4f	—
constant.language.infinity, constant.numeric.infinity, constant.language.nan	#e85f6f	—
storage.modifier.access, keyword.other.access-modifier	#d93d4f	—
meta.template.expression	#e85f6f	—
entity.name.tag.yaml, support.type.property-name.yaml	#ffd84d	—
keyword.other.definition.yaml	#ffd84d	—
string.unquoted.yaml, string.quoted.double.yaml, string.quoted.single.yaml	#a3b4cc	—
constant.numeric.yaml	#e85f6f	—
constant.language.boolean.yaml	#e85f6f	—

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