Obsidian Minimal

Name: Obsidian Minimal
Author: rudrigu

Publisher: rudriguThemes in package: 1

This theme is based on the Obsidian Minimal Theme from Obsidian (a personal knowledge management tool)

Open in VS Code

VS Code preview

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

Obsidian Minimal — Obsidian Minimal

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#282828
activityBar.border#28282860
activityBar.foreground#A9BFC9
activityBarBadge.background#D1D1D1
activityBarBadge.foreground#282828
badge.background#28282830
badge.foreground#676767
breadcrumb.activeSelectionForeground#676767
breadcrumb.background#282828
breadcrumb.focusForeground#A9BFC9
breadcrumb.foreground#889EAA
breadcrumbPicker.background#282828
button.background#67676750
contrastBorder#67676740
debugToolBar.background#282828
diffEditor.insertedTextBackground#78789015
diffEditor.removedTextBackground#78909020
dropdown.background#282828
dropdown.border#AFCBDA10
editor.background#282828
editor.findMatchBackground#282828
editor.findMatchBorder#676767
editor.findMatchHighlightBackground#67676793
editor.findMatchHighlightBorder#AFCBDA30
editor.foreground#A9BFC9
editor.lineHighlightBackground#28282850
editor.selectionBackground#D1D1D130
editor.selectionHighlightBackground#6767676b
editor.selectionHighlightBorder#D1D1D1f0
editorBracketMatch.background#282828
editorBracketMatch.border#E1E7FF7f
editorCursor.foreground#E1E7FF
editorError.foreground#78909070
editorGroup.border#28282830
editorGroupHeader.tabsBackground#282828
editorGutter.addedBackground#78789060
editorGutter.deletedBackground#78909060
editorGutter.modifiedBackground#D1D1D160
editorHoverWidget.background#282828
editorHoverWidget.border#AFCBDA10
editorIndentGuide.activeBackground#486060
editorIndentGuide.background#48606070
editorInfo.foreground#D1D1D170
editorLineNumber.activeForeground#D1D1D1
editorLineNumber.foreground#676767c0
editorLink.activeForeground#A9BFC9
editorMarkerNavigation.background#A9BFC905
editorOverviewRuler.border#282828
editorOverviewRuler.errorForeground#78909040
editorOverviewRuler.findMatchForeground#676767
editorOverviewRuler.infoForeground#D1D1D140
editorOverviewRuler.warningForeground#E1E7FF70
editorRuler.foreground#486060
editorSuggestWidget.background#282828
editorSuggestWidget.border#AFCBDA10
editorSuggestWidget.foreground#A9BFC9
editorSuggestWidget.highlightForeground#E1E7FF
editorSuggestWidget.selectedBackground#67676720
editorWarning.foreground#787890
editorWhitespace.foreground#A9BFC940
editorWidget.background#282828
editorWidget.border#E1E7FF
editorWidget.resizeBorder#676767
extensionButton.prominentBackground#78789090
extensionButton.prominentHoverBackground#789090
focusBorder#AFCBDA00
gitDecoration.conflictingResourceForeground#E1E7FF
gitDecoration.deletedResourceForeground#789090
gitDecoration.ignoredResourceForeground#676767
gitDecoration.modifiedResourceForeground#889EAA
gitDecoration.untrackedResourceForeground#D1D1D1
input.background#304848
input.border#AFCBDA10
input.foreground#A9BFC9
input.placeholderForeground#A9BFC960
inputOption.activeBackground#A9BFC930
inputOption.activeBorder#A9BFC930
inputValidation.errorBorder#78909050
inputValidation.infoBorder#D1D1D150
inputValidation.warningBorder#E1E7FF50
list.activeSelectionBackground#282828
list.activeSelectionForeground#676767
list.focusBackground#304848
list.focusForeground#D1D1D1
list.highlightForeground#676767
list.hoverBackground#486060
list.hoverForeground#AFCBDA
list.inactiveSelectionBackground#28282830
list.inactiveSelectionForeground#676767
list.warningForeground#E1E7FF
listFilterWidget.background#28282830
listFilterWidget.noMatchesOutline#28282830
listFilterWidget.outline#28282830
menu.background#282828f8
menu.border#67676750
menu.foreground#A9BFC9
menu.selectionBackground#304848
menu.selectionBorder#28282830
menu.selectionForeground#A9BFC9
menu.separatorBackground#A9BFC9
menubar.selectionBackground#304848
menubar.selectionBorder#67676750
menubar.selectionForeground#A9BFC9
minimap.background#282828
minimapGutter.addedBackground#789090
minimapGutter.deletedBackground#E1E7FF
minimapGutter.modifiedBackground#787890
minimapSlider.activeBackground#787890b0
minimapSlider.background#78789080
minimapSlider.hoverBackground#787890a0
notificationLink.foreground#676767
notifications.background#282828
notifications.foreground#A9BFC9
panel.background#282828
panel.border#28282860
panelTitle.activeBorder#676767
panelTitle.activeForeground#AFCBDA
panelTitle.inactiveForeground#A9BFC9
peekView.border#28282830
peekViewEditor.background#A9BFC905
peekViewEditor.matchHighlightBackground#67676750
peekViewEditorGutter.background#A9BFC905
peekViewResult.background#A9BFC905
peekViewResult.matchHighlightBackground#67676750
peekViewResult.selectionBackground#67676770
peekViewTitle.background#A9BFC905
peekViewTitleDescription.foreground#A9BFC960
pickerGroup.foreground#676767
progressBar.background#676767
scrollbar.shadow#28282800
scrollbarSlider.activeBackground#676767cc
scrollbarSlider.background#676767bb
scrollbarSlider.hoverBackground#676767ee
selection.background#676767
settings.checkboxBackground#282828
settings.checkboxForeground#A9BFC9
settings.dropdownBackground#282828
settings.dropdownForeground#A9BFC9
settings.headerForeground#676767
settings.modifiedItemIndicator#676767
settings.numberInputBackground#282828
settings.numberInputForeground#A9BFC9
settings.textInputBackground#282828
settings.textInputForeground#A9BFC9
sideBar.background#282828
sideBar.border#67676750
sideBar.foreground#D1D1D1
sideBarSectionHeader.background#282828
sideBarSectionHeader.border#28282860
sideBarSectionHeader.foreground#D1D1D1
sideBarTitle.foreground#A9BFC9
statusBar.background#222222
statusBar.border#28282860
statusBar.debuggingBackground#E1E7FF
statusBar.debuggingForeground#AFCBDA
statusBar.foreground#D1D1D1
statusBar.noFolderBackground#282828
statusBarItem.hoverBackground#67676720
statusBarItem.remoteBackground#676767
statusBarItem.remoteForeground#282828
tab.activeBackground#67676750
tab.activeBorder#676767
tab.activeForeground#AFCBDA
tab.activeModifiedBorder#676767
tab.border#282828
tab.inactiveBackground#67676720
tab.inactiveForeground#A9BFC9af
tab.unfocusedActiveBackground#67676740
tab.unfocusedActiveBorder#676767
tab.unfocusedActiveForeground#A9BFC9
tab.unfocusedInactiveBackground#67676710
tab.unfocusedInactiveForeground#A9BFC97f
terminal.ansiBlack#282828
terminal.ansiBlue#D1D1D1
terminal.ansiBrightBlack#676767
terminal.ansiBrightBlue#D1D1D1
terminal.ansiBrightCyan#DCE9F2
terminal.ansiBrightGreen#787890
terminal.ansiBrightMagenta#E1E7FF
terminal.ansiBrightRed#789090
terminal.ansiBrightWhite#AFCBDA
terminal.ansiBrightYellow#E1E7FF
terminal.ansiCyan#DCE9F2
terminal.ansiGreen#787890
terminal.ansiMagenta#E1E7FF
terminal.ansiRed#789090
terminal.ansiWhite#AFCBDA
terminal.ansiYellow#E1E7FF
terminalCursor.background#282828
terminalCursor.foreground#E1E7FF
textLink.activeForeground#A9BFC9
textLink.foreground#676767
titleBar.activeBackground#282828
titleBar.activeForeground#A9BFC9
titleBar.border#28282860
titleBar.inactiveBackground#282828
titleBar.inactiveForeground#676767
tree.indentGuidesStroke#486060
widget.shadow#28282830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#E1E7FF	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#787890	—
constant.other.php	#E1E7FF	—
constant.other.color	#AFCBDA	—
invalid, invalid.illegal	#789090	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#dbd4bd	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#889EAA	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#c9a9a9	—
punctuation.definition, string.quoted.single.scss	#BDC4DB	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#7c6d6d	—
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#A9BFC9	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#E1E7FF	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#889EAA
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#e4e4e4	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#DCE9F2	—
support.other.variable, string.other.link, markup.table	#A9BFC9	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#C9B3A9	—
variable.parameter.function.language.special, variable.parameter	#789090	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#787890
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#E1E7FF	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#889EAA	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#789090	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#D1D1D1	italic
entity.other.attribute-name, support.function	#E1E7FF	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#A9BFC9	—
source.scss keyword.control	#E1E7FF	—
markup.inserted	#787890	—
markup.deleted	#789090	—
markup.changed	#E1E7FF	—
string.regexp	#DCE9F2	—
constant.character.escape	#DCE9F2	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#A9BFC9	italic
support.type.property-name.json	#A9BFC9	—
text.html.markdown, punctuation.definition.list_item.markdown	#A9BFC9	—
text.html.markdown markup.inline.raw.markdown	#E1E7FF	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#67676750	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#889EAA	bold
markup.underline	#D1D1D1	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#67676750	—
markup.quote	—	italic
string.other.link.description.title.markdown	#E1E7FF	—
constant.other.reference.link.markdown	#E1E7FF	—
markup.raw.block	#E1E7FF	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#DCE9F2	—
variable.language.fenced.markdown	#676767	—
meta.separator	#A7A8AF	bold
token.info-token	#676767	—
token.warn-token	#E1E7FF	—
token.error-token	#FF293B	—
token.debug-token	#DCE9F2	—

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